Voorwaardelijk renderen met @if
Toon inhoud voorwaardelijk met @if en @else.
Voorwaardelijk renderen met @if 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.
Ingebouwde besturingsstroom
Moderne Angular-sjablonen bevatten blokken voor ingebouwde besturingsstroom die met een apenstaartje worden geschreven. Ze vervangen de oudere structurele directives en hebben geen imports nodig.
Het if-blok
Het at-if-blok geeft inhoud voorwaardelijk weer. Je schrijft een apenstaartje, gevolgd door het woord if, de voorwaarde tussen haakjes en de inhoud tussen accolades.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }ngIf vervangen
Dit vervangt de oude structurele directive *ngIf. De nieuwe syntaxis maakt deel uit van de sjabloontaal, dus je hoeft niets te importeren.
Een signal in de voorwaarde lezen
De voorwaarde kan elke expressie zijn, ook een aanroep van een signal.
// @if (count() > 0) {
// <p>You have items</p>
// }Het else-blok
Een at-else-blok biedt terugvalinhoud wanneer de voorwaarde onwaar is. Het volgt direct op de afsluitende accolade van het if-blok.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }else-if-ketens
Je kunt voorwaarden aan elkaar koppelen met at-else if, gevolgd door een laatste at-else.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Het resultaat van de voorwaarde opslaan
Met het at-if-blok kun je het resultaat van de voorwaarde met het sleutelwoord as aan een lokale variabele binden. Dat is handig voor het verfijnen van waarden die niet null zijn.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Waarom de nieuwe syntaxis
Ingebouwde besturingsstroom is beter leesbaar, wordt op typen gecontroleerd en is efficiënter dan structurele directives. De microsyntaxis en het sterretje van de oude directives zijn niet nodig.
Geen containerelement nodig
In tegenstelling tot oudere patronen heeft het at-if-blok geen omhullend element of ng-template nodig. De accolades begrenzen de voorwaardelijke inhoud zelf.
Blokken nesten
Blokken voor besturingsstroom kunnen vrij worden genest. Een at-if kan bijvoorbeeld een ander at-if, een at-for enzovoort bevatten.
Combineren met bindingen
Binnen een at-if-blok gebruik je de volledige sjabloontaal: interpolatie, propertybindingen en eventbindingen werken allemaal gewoon.
Korte controle: voorwaarden
De nieuwe syntaxis voor voorwaarden.
Samenvatting: voorwaarden
Je hebt het at-if-blok geleerd voor voorwaardelijke weergave, met at-else en at-else if voor alternatieven, en het sleutelwoord as om het resultaat vast te leggen. Het vervangt star-ngIf en heeft geen import nodig. Hierna lussen met at-for.
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 “Voorwaardelijk renderen met @if” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Voorwaardelijk renderen met @if”, 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 “Voorwaardelijk renderen met @if”?
Toon inhoud voorwaardelijk met @if en @else. 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 “Voorwaardelijk renderen met @if”?
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
- Voorwaardelijk renderen met @if
- Lussen met @for
- Wisselen met @switch
- Uitgesteld laden met @defer