0 Tage Serie
javascript / beginner
Snippet

Komponentenspezifisches Styling

Angular-Komponenten verwenden standardmäßig View Encapsulation. Stile, die innerhalb einer Komponente definiert sind, gelten nur für deren eigenes Template und beeinflussen nicht den Rest der Anwendung.

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
Erklärung
1
styles: [...]
Dieses Array ermöglicht es Ihnen, CSS-Regeln direkt in den Komponenten-Metadaten zu definieren.
2
p { color: blue; }
Diese Regel gilt nur für Paragraph-Tags innerhalb der 'app-box'-Komponente.