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

[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

[wembernard]

👍

[JustasKuizinas]

Any updates on this?

[Swiftwork]

Isn't this quite easily solved by:

@HostBinding('class') @Input('class') classList: string = '';

This will capture any previous classes that have been manually assigned to the components dom. However does not facilitate for ones set dynamically by e.g. directives.

[tsu1980]

My workaround.

constructor(private el: ElementRef, private renderer: Renderer) { }

ngOnInit() {
  this.renderer.setElementClass(this.el.nativeElement, 'my-item-' + this.itemType, true);
}

[xmeng1]

Currently, I use 3 methods to add the class name for a component. I don't know whether they are good way to do it, but it works according to my test.

1. use host: https://stackoverflow.com/a/35996292/2000468

@component({
host: {
'[class]': 'm-grid__item' +
' m-grid__item--fluid''},
})

2. use HostBinding

@HostBinding('class.m-grid__item') public bindStyle: boolean = true;
@HostBinding('class.m-grid__item--fluid') public bindStyle2: boolean = true;

3. add class name to the component selector directly https://stackoverflow.com/a/38472185/2000468
   @component({
   selector: 'app-test .m-grid__item.m-grid__item--fluid',
   })

[MartinMa]

@xmeng1 Thanks for your summary. Just a small correction for approach 1 to avoid confusion (for anyone who might read this).

It has to be '[class]': (instead of ['class']:)! The quotes have to be on the outside.