Description
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