Nouveautés Angular 7

• Par Vincent
• Dans Développement Web
• Posté le 02 nov. 2018

---

Nouveautés Angular 7

La dernière version majeure du Framework Angular est disponible depuis mi octobre 2018. Angular 7.0.0 met à jour la totalité de la plate-forme, du Framework, d'Angular Material et CLI, ainsi que de nouvelles fonctionnalités.

---

CLI

La nouvelle CLI est tout simplement fantastique pour les commandes telles que ng new ou ng add.
Vous pouvez installer la dernière version de la CLI de manière globale : "npm install -g @angular/cli@latest"
Avec CLI, Angular.io inclut désormais la documentation pour l'interface de ligne de commande(https://angular.io/cli)!

 

MATERIAL

Angular Material a eu du succès cette année avec de nombreuses nouvelles mises à jour, y compris la nouvelle page d’accueil pour material.io.
Si vous êtes un utilisateur de Angular Material, à partir de la V7, vous devriez remarquer quelques petites différences visuelles au fur et à mesure que la bibliothèque s'aligne sur la spécification mise à jour de la conception de Material.

 

CDK - MAINTENANT AVEC DEFILEMENT VIRUTEL ET GLISSER-DEPOSER

Défilement virtuel

Le CDK dispose désormais de fonctionnalités de défilement virtuel que vous pouvez utiliser en important le module "ScrollingModule" !
Le défilement virtuel consiste à charger / décharger des éléments DOM en fonction de l'emplacement de l'utilisateur dans une liste d'éléments. Cela signifie que vos énormes listes défilables sont beaucoup plus rapides !
Voici donc StackBlitz d'Angular Material créé pour jouer avec le défilement virtuel.

<cdk-virtual-scroll-viewport itemSize="20">
<div *cdkVirtualFor="let dog of dogsArray">{{dog}}</div>
</cdk-virtual-scroll-viewport>

Drag & Drop

Le CDK prend également en charge le glisser-déposer, qui inclut les fonctionnalités astucieuses suivantes :
- Rendu automatique lorsque l'utilisateur déplace des éléments
- Méthodes d'assistance pour réorganiser / transférer des éléments dans des listes : "moveItemInArray" et "transferArrayItem"

 

AMELIORER LA PERFORMANCE DES APPLICATIONS

Il est toujours intérressant d'avoir des garanties qui nous sauvent de nous-mêmes. C'est précisément ce que fait la prochaine fonctionnalité en avertissant les développeurs lorsqu'ils dépassent le budget avec la taille de leur lot ! Les valeurs par défaut sont un avertissement à 2 Mo et une erreur à 5 Mo. Mais ne soyez pas effrayé ! Ces valeurs par défaut peuvent être facilement modifiées dans votre fichier angular.json. Pour cela :

"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]

Les reflect-metadata de Polyfill ont été supprimés en production afin d'aléger l'application.

 

METTRE A JOUR VERS ANGULAR 7?

Depuis une application Anguler v6, c'est assez simple ; il suffit d'éxécuter la commande suivante :

ng update @angular/cli @angular/core

 

Si vous avez besoin de vous former sur Angular 7, suivez notre formation Angular 7 sur 3 jours

---

Cette actualité a été postée avec les tags angular, javascript, typescript, angular-cli, material, rxjs