La nouvelle version 17 est arrivée en novembre et apporte son lot de nouveautés au Framework Angular !
Lexique des nouveautés :
- Nouveau Logo et arrivé d’Angular.dev
- Nouvelle syntaxe pour le Control Flow
- Lazy Loading
- Styles et StyleUrl
- Nouvel Application Builder
Nouveau logo et angular.dev
Avec la version 17, Angular souhaite totalement faire peau neuve ! Tout d’abord en publiant le tout nouveau logo :
Mais ce n’est pas tout ! L’équipe d’Angular a annoncé au passage l’arrivé du tout nouveau site de documentations. Désormais, la documentation nous donne accès facilement à tous les points clés d’une application Angular moderne. Nous avons également des tutorials avec IDE intégré pour nous montrer les bases du framework et un Playground pour tester le framework directement dans le navigateur.
Voici le lien pour se rendre sur cette nouvelle documentation : Angular.dev
Nouvelle syntaxe du Control Flow
Dans cette version, le Control Flow a totalement était revu et remit à neuf. Les anciennes directives structurelles ngIf, ngSwitch, ngFor sont désormais remplacées respectivement par @if, @switch et @for. Voici une comparaison pour mieux comprendre ces changements :
Ancien if :
<div *ngIf=« loggedIn; else anonymousUser »>
The user is logged in
</div>
<ng-template #anonymousUser>
The user is not logged in
</ng-template>
Nouveau @if
@if (loggedIn) {
The user is logged in
} @else {
The user is not logged in
}
Puis respectivement le changement pour switch et le for :
Ancien switch :
<div [ngSwitch]=« accessLevel »>
<admin-dashboard *ngSwitchCase=« admin »/>
<moderator-dashboard *ngSwitchCase=« moderator »/>
<user-dashboard *ngSwitchDefault/>
</div>
Nouveau @switch
@switch (accessLevel) {
@case (‘admin’) { <admin-dashboard/> }
@case (‘moderator’) { <moderator-dashboard/> }
@default { <user-dashboard/> }
}
Nouveau @for
@for (user of users; track user.id) {
{{ user.name }}
} @empty {
Empty list of users
}
On peut voir pour le Switch et le for que le changement est flagrant. Les anciennes directives sont toujours disponibles pour le moment, mais pour une meilleure performance je vous conseille d’utiliser ces nouvelles syntaxes beaucoup plus simples d’utilisation !
Pour accéder automatiquement a cette nouveauté :
ng g @angular/core:control-flow 