If my main/parent component has the following:
<div class="main-wrapper">
<app-inner></app-inner>
</div>
How might I add a class to the component being invoked inside?
The goal is that the app-inner component presents a class when rendered so that I might reference it in my CSS, such as:
<app-inner class="inner-comp">
However, neither this direct placement of the class attribute, nor [className], nor [ngClass] seem to actually add it.
Without modifying the main/parent component's HTML, you might just simply use HostBinding in the InnerComponent:
import { OnInit, HostBinding } from '@angular/core';
export class InnerComponent implements OnInit {
@HostBinding('className') componentClass: string;
constructor() {
this.componentClass = 'inner-comp';
}
}
The declared string variable componentClass references directly the className's hostPropertyName ("DOM property that is bound to a data property").
This automatically adds to all invocations of <app-inner> the inner-comp class when the InnerComponent renders, which will then allow direct references in the parent component's CSS, such as:
.inner-comp { height: 100%; }
app-inner { width: 100px }classattribute should work on component tags. What style is not applying to your component? Can you share the properties of the CSS classinner-comp?selector-type-no-unknown).<app-inner class="inner-comp">) does not work. When rendered the class attribute is simply not there. It's not a matter of how many properties/rules I have in my CSS.