Componentgebonden stijlen
Houd stijlen lokaal binnen een component.
Componentgebonden stijlen is een gratis Angular Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Stijlen horen bij componenten
Met Angular kan elke component zijn eigen CSS bevatten. Standaard zijn deze stijlen afgebakend, wat betekent dat ze alleen de template van die component beïnvloeden en niet de rest van de pagina.
Array met inline stijlen
U kunt stijlen inline definiëren in de decorator @Component met behulp van de array styles.
@Component({
selector: "app-card",
template: "<div class='card'>Hello</div>",
styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}Externe styleUrls
Vaker verwijst u met styleUrls naar een of meer externe stylesheets.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrls: ["./card.component.css"]
})
export class CardComponent {}De verkorte schrijfwijze styleUrl
Voor één stylesheet ondersteunt modern Angular de eigenschap styleUrl in het enkelvoud.
@Component({
selector: "app-card",
templateUrl: "./card.component.html",
styleUrl: "./card.component.css"
})
export class CardComponent {}Afbakening in de praktijk
Een regel voor .card in de ene component lekt niet door naar een andere component die ook de klasse card gebruikt. Elke component is geïsoleerd.
/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */Hoe afbakening werkt
Angular voegt unieke attributen toe aan de elementen van een component en herschrijft de CSS-selectors zodat deze overeenkomen. Zo worden stijlen alleen binnen die component toegepast.
<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>
/* generated css */
.card[_ngcontent-abc] { color: navy; }Stijlen dringen niet binnen
Net zoals uw stijlen binnen de component blijven, overschrijven de meeste stijlen van buitenaf de regels van een component niet onbedoeld. Zo blijven componenten zelfstandig.
Globale stijlen
Gebruik voor stijlen die app-breed gelden het globale styles.css-bestand dat in angular.json wordt vermeld. Deze stijlen zijn niet afgebakend.
/* src/styles.css - global */
body { font-family: system-ui; }Meerdere stylesheets
Een component kan meerdere stylesheets laden door deze in de array te vermelden.
@Component({
selector: "app-page",
styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}Klassebindingen gebruiken
Afgebakende stijlen sluiten goed aan op klassebindingen om regels voorwaardelijk toe te passen.
<div class="card" [class.featured]="isFeatured"></div>
/* card.component.css */
.featured { border-color: gold; }Waarom afbakening helpt
Afgebakende stijlen voorkomen naamconflicten in een grote app, stellen teams in staat onafhankelijk te werken en maken componenten overdraagbaar en gemakkelijk te begrijpen.
Korte controle
Test je begrip van stijlen met een componentbereik.
Samenvatting
Componenten bevatten CSS via styles, styleUrls of styleUrl. Standaard hebben deze regels een bereik dat beperkt is tot de component, waardoor conflicten worden voorkomen. Gebruik het globale stylesheet voor regels die voor de hele app gelden.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “Componentgebonden stijlen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Componentgebonden stijlen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “Componentgebonden stijlen”?
Houd stijlen lokaal binnen een component. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Componentgebonden stijlen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Angular Academy?
Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Componentgebonden stijlen
- Modi voor view-encapsulatie
- Styling van host en host-context
- Dynamische klassen en stijlen