javascript / beginner
Snippet
Scoped Component Styling
Angular components use View Encapsulation by default. Styles defined inside a component only apply to its own template and do not leak into the rest of the application.
snippet.js
javascript
1
2
3
4
5
@Component({selector: 'app-box',template: '<p>Styled Text</p>',styles: ['p { color: blue; font-weight: bold; }']})
angular
Breakdown
1
styles: [...]
This array allows you to define CSS rules directly within the component metadata.
2
p { color: blue; }
This rule will only target paragraph tags inside the 'app-box' component.