Skip to content

Need a way for a component to add CSS classes to host non-destructively #7289

Closed
@jelbourn

Description

@jelbourn

Say a user wants to add margin around a component:

<cool-thing class="extra-margin"> ... 

But the component itself has need to set a dynamic CSS class to the host element:

@Component({
  ...
  host: { '[class]': 'myCustomStyle' }
})
class CoolThing {
  myCustomStyle: string = figureOutWhichClassToUse();
}

Doing this in the component will completely overwrite the class property, wiping away the user's classes.

In other situations, NgClass serves this purpose, but a component cannot apply a directive to its host element. Using the [class.whatever] syntax also doesn't solve this, as the whatever is the variable part.

Proposal

Each component can, conceptually, have two distinct class lists: one that is from the user and one that comes from the component itself. These could be resolved independently with Angular rendering the union. Any time the user uses ngClass or the [class.whatever] syntax, it should override whatever is set to "class".

cc @mhevery

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions