Sometimes, we want to style child components from parent component’s CSS file with Angular.
In this article, we’ll look at how to style child components from parent component’s CSS file with Angular.
How to style child components from parent component’s CSS file with Angular?
To style child components from parent component’s CSS file with Angular, we can set the encapsulation option.
For instance, we write
import { ViewEncapsulation } from "@angular/core";
@Component({
//...
encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {
constructor() {}
//...
}
to set the ParentComponent‘s encapsulation option to ViewEncapsulation.None.
This will let the styles in ParentComponent propagate to its children.
Conclusion
To style child components from parent component’s CSS file with Angular, we can set the encapsulation option.
