Angular CDK : Google sort un kit de composants pour Angular

7 packages pour faciliter votre code front-end

Le kit de développement est divisé en sept composants qui ont chacun un rôle bien précis :

•      Accessibility : rend le code accessible à tous, permet de se déplacer sur le site avec des touches du clavier
•      Bidirectionality : gestion du sens de l’écriture (de droite à gauche ou de gauche à droite)
•      Layout : gestion de la mise en forme
•      Observers : écouteur qui observent l’élément et émet une mutation s’il change
•      Overlay : recouvrement de menu, boîtes de dialogue, etc.
•      Portal : rend le contenu d’une application dynamique
•      Scrolling : réagit aux événements de défilement

2 nouveaux composants efficaces

En plus des packages, le kit de développement promets deux composants. Il s’agit de :

•      Stepper : qui permet de créer un élément en plusieurs étapes. L’idée est d’afficher un contenu en plusieurs étapes (d’où le nom stepper). Prenons l’exemple d’un formulaire :

En premier on affiche le nom, ensuite le prénom, et enfin une dernière étape de validation

Voici un aperçu du résultat avec le code adéquat.

•      Table

Ce composant permet de générer un tableau basé sur le Material-design qui sera dynamisé grâce au framework Angular. Le tableau peut être implémenté facilement en appelant le composant auquel on assigne les données souhaitées. Il reste ensuite à définir les modèles de colonnes et de lignes puis le tableau peut être affiché. Des options complémentaires proposées par Matérial-Angular permettent d’ajouter le tri, la pagination ainsi que des filtres au tableau, celles-ci font toute la force de ce composant.

Voici un aperçu du résultat avec le code adéquat.

Angular est actuellement à sa version 5.2.9. Même si Google continu de développer ce framework, il n’essaye pas moins de se renouveler en créant de nouveau logiciels comme Flutter.