1. The solution provided here is quite effective, particularly for applying common styles to various components such as css grids. To give it more of an Angular touch, consider setting encapsulation for the app component to none:
`@Component({
selector: 'my-app',
template: ` `,
styleUrls: ["shared.style.css"],
encapsulation: ViewEncapsulation.None
}) export class App {}`
View the demo here (plunker)
Note: Styles included this way (by simply adding a style tag or with non-encapsulation) will impact all elements on your pages. While this may be desirable for using a css framework across the entire project, it may not be the best approach if you only want to share styles among a few components.
Summary:
(+) easy to use
(-) no encapsulation
2. This solution is appealing due to its clarity and consistent behavior. However, there is a potential drawback:
It will insert a style tag with shared styles each time you utilize it. This could be an issue with large style files or multiple elements using it.
https://i.sstatic.net/S0UlN.png
@Component({
selector: 'first',
template: `<h2> <ng-content> </ng-content> </h2>`,
styleUrls: ["shared.style.css"]
})
export class FirstComponent {}
View the demo here (plunker)
Summary:
(+) easy to use
(+) encapsulation
(-) duplicates styles for every usage
3. Another option is to create an additional component that provides shared styles for its children.
` <styles-container>
<first> first comp </first>
</styles-container>
<styles-container>
<second> second comp </second>
</styles-container>`
In this case, you will need to use /deep/ in your styles to make them accessible to child components:
:host /deep/ h2 {
color: red;
}
It is important to remember to use :host to restrict styles to only child elements. Omitting it will result in additional global styles being applied.
View the demo here (plunker)
Summary:
(-) requires creating a container in templates
(+) encapsulation
(+) avoids duplicated styles
Keep in mind: While the encapsulation of styles is a valuable feature, there is no way to restrict deep styles. Be cautious when applying deep styles, as they will impact all children elements.