How to style child components from parent component’s CSS file with Angular?

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.

Post Views: 10