Pourquoi utiliser une biblioth\u00e8que de composants ?<\/h2>\n
Que vous les construisiez vous-m\u00eame ou que vous adoptiez des biblioth\u00e8ques tierces, les composants constituent la base des applications Angular. Chaque composant s’appuie sur un mod\u00e8le pour ses \u00e9l\u00e9ments HTML et CSS et sur le code TypeScript qui contr\u00f4le son comportement.<\/p>\n
Le principal avantage des biblioth\u00e8ques de composants est qu’elles fournissent des composants d’interface utilisateur r\u00e9utilisables et pr\u00e9-construits, r\u00e9duisant ainsi le besoin de code personnalis\u00e9 et aidant les d\u00e9veloppeurs \u00e0 rendre leurs applications rapidement op\u00e9rationnelles.<\/p>\n
L’approche d’Angular en mati\u00e8re de composants peut \u00e9galement am\u00e9liorer la coop\u00e9ration entre les \u00e9quipes de programmeurs qui \u00e9crivent le code TypeScript et les concepteurs de sites web qui fournissent le HTML pour les mod\u00e8les.<\/p>\n
Les biblioth\u00e8ques de composants sont g\u00e9n\u00e9ralement ajout\u00e9es aux projets Angular \u00e0 l’aide de Node.js Les biblioth\u00e8ques de composants de notre liste ont \u00e9t\u00e9 s\u00e9lectionn\u00e9es sur la base de plusieurs crit\u00e8res :<\/p>\n Regardons maintenant de plus pr\u00e8s nos choix.<\/p>\n Angular<\/a> Material<\/a> est la biblioth\u00e8que de composants officielle d’Angular, offrant une collection compl\u00e8te d’interfaces utilisateur tout en restant \u00e0 jour avec les derni\u00e8res fonctionnalit\u00e9s d’Angular et les changements d’API. Elle offre \u00e9galement une prise en charge int\u00e9gr\u00e9e de l’accessibilit\u00e9, g\u00e9n\u00e9rant des balises pour permettre la navigation au clavier et guider les technologies d’assistance telles que les lecteurs d’\u00e9cran.<\/p>\n Comment \u00e7a marche :<\/strong> Angular Material s’appuie sur les directives et services int\u00e9gr\u00e9s d’Angular pour fournir un ensemble de composants performants et li\u00e9s aux donn\u00e9es au-dessus d’Angular, ce qui permet d’ajouter facilement de l’interactivit\u00e9 aux applications web.<\/p>\n Points forts :<\/strong> Angular Material excelle dans la fourniture de composants d’interface utilisateur pr\u00e9-construits qui respectent les lignes directrices du Material Design. Il offre un ensemble de composants d’interface utilisateur bien con\u00e7us et personnalisables qui peuvent \u00eatre int\u00e9gr\u00e9s facilement dans les applications Angular. Ces composants comprennent des menus de navigation, des boutons, des formulaires, des bo\u00eetes de dialogue, etc.<\/p>\n Par exemple, si vous souhaitez ajouter un composant de type bouton \u00e0 votre application, il vous suffit d’utiliser la directive Voici un exemple de code :<\/p>\n Ce code g\u00e9n\u00e8re un composant de type bouton avec la palette de couleurs primaires. Vous pouvez personnaliser davantage le bouton en ajoutant des gestionnaires d’\u00e9v\u00e9nements, en modifiant le texte et l’aspect de l’ic\u00f4ne.<\/p>\n NG-Bootstrap<\/a> est une biblioth\u00e8que open source construite au-dessus de Bootstrap CSS, fournissant des composants et des mod\u00e8les de conception avec lesquels de nombreux d\u00e9veloppeurs sont d\u00e9j\u00e0 familiers. Cela r\u00e9duit la courbe d’apprentissage pour les nouveaux projets, ce qui en fait un choix fiable pour construire des applications Angular rapidement et efficacement.<\/p>\n Comment cela fonctionne-t-il ? <\/strong>NG-Bootstrap \u00e9tend les capacit\u00e9s des composants Bootstrap en permettant aux d\u00e9veloppeurs de les utiliser comme des directives Angular, avec une liaison de donn\u00e9es bidirectionnelle et d’autres fonctionnalit\u00e9s sp\u00e9cifiques \u00e0 Angular. Cela permet aux d\u00e9veloppeurs de cr\u00e9er facilement des applications web responsiuves et adapt\u00e9es au mobile qui fonctionnent de mani\u00e8re transparente avec Angular.<\/p>\n Ses points forts :<\/strong> L’un des principaux atouts de NG-Bootstrap est sa prise en charge des fonctions d’accessibilit\u00e9, y compris les sp\u00e9cifications du W3C pour les applications Internet riches accessibles (ARIA), ce qui permet aux d\u00e9veloppeurs de cr\u00e9er plus facilement des applications utilisables par les personnes handicap\u00e9es. NG-Bootstrap excelle \u00e9galement dans le domaine des bo\u00eetes de dialogue modales. Avec le composant Voici un exemple de cr\u00e9ation d’une bo\u00eete de dialogue modale de base \u00e0 l’aide de NG-Bootstrap :<\/p>\n Dans cet exemple, l’\u00e9l\u00e9ment Clarity<\/a> est une biblioth\u00e8que open-source qui utilise un langage visuel commun \u00e0 tous ses composants pour fournir une interface utilisateur coh\u00e9rente et intuitive. Elle est \u00e9galement tr\u00e8s document\u00e9e, avec de nombreux guides, tutoriels et r\u00e9f\u00e9rences d’API, ce qui la rend facile \u00e0 apprendre et \u00e0 utiliser.<\/p>\n Comment cela fonctionne-t-il ?<\/strong> Le syst\u00e8me de conception de Clarity est bas\u00e9 sur le concept de \u00ab cartes \u00bb, qui sont utilis\u00e9es pour regrouper des contenus connexes. Les cartes sont utilis\u00e9es pour repr\u00e9senter des \u00e9l\u00e9ments de contenu individuels de mani\u00e8re structur\u00e9e et organis\u00e9e. Clarity fournit une vari\u00e9t\u00e9 de composants de cartes qui peuvent pr\u00e9senter des donn\u00e9es dans une vari\u00e9t\u00e9 de formats. Ces composants de cartes comprennent des en-t\u00eates, des pieds de page et des sections de contenu, et peuvent \u00eatre facilement personnalis\u00e9s avec diff\u00e9rents styles et th\u00e8mes.<\/p>\n Les cartes peuvent \u00e9galement \u00eatre combin\u00e9es avec d’autres composants, tels que des fen\u00eatres modales, des menus d\u00e9roulants et des boutons, afin de cr\u00e9er des interfaces utilisateur plus complexes. L’objectif global de la conception \u00e0 base de cartes est de fournir un syst\u00e8me flexible et modulaire permettant de cr\u00e9er facilement des interfaces complexes.<\/p>\n L\u00e0 o\u00f9 il excelle :<\/strong> Le vaste ensemble de contr\u00f4les de formulaires de Clarity est une force ind\u00e9niable. Ces contr\u00f4les comprennent des champs de saisie, des bo\u00eetes de s\u00e9lection, des boutons radio et bien plus encore. Clarity offre \u00e9galement un ensemble de visualisations de donn\u00e9es, telles que des diagrammes \u00e0 barres, des diagrammes lin\u00e9aires et des diagrammes circulaires, pour aider \u00e0 afficher les donn\u00e9es d’une mani\u00e8re claire et organis\u00e9e.<\/p>\n Voici un exemple d’utilisation du composant Clarity input field dans un formulaire HTML :<\/p>\n Ce code cr\u00e9era un champ de saisie de formulaire avec un libell\u00e9 et un texte de remplacement. Les directives Kendo UI<\/a> est une biblioth\u00e8que commerciale con\u00e7ue dans un souci de performance, garantissant des temps de chargement rapides et une exp\u00e9rience utilisateur fluide. Elle fournit \u00e9galement des th\u00e8mes et des options de style pour am\u00e9liorer l’aspect et la convivialit\u00e9 de votre application, ainsi qu’une documentation compl\u00e8te et une \u00e9quipe d’assistance d\u00e9di\u00e9e.<\/p>\n Comment cela fonctionne-t-il ?<\/strong> Kendo UI utilise des techniques telles que la virtualisation et le chargement diff\u00e9r\u00e9 pour garantir des temps de chargement rapides et une exp\u00e9rience utilisateur fluide. Cela signifie que les applications construites avec Kendo UI sont rapides et r\u00e9actives, m\u00eame lorsqu’elles traitent de grands ensembles de donn\u00e9es. Kendo UI suit \u00e9galement une architecture modulaire qui permet aux d\u00e9veloppeurs de n’utiliser que les composants dont ils ont besoin, ce qui r\u00e9duit la taille de la biblioth\u00e8que et am\u00e9liore les performances.<\/p>\n Points forts :<\/strong> Kendo UI est particuli\u00e8rement adapt\u00e9 aux applications d’entreprise qui n\u00e9cessitent une gestion \u00e9tendue des donn\u00e9es et des interactions complexes avec l’utilisateur. Son composant de grille, par exemple, prend en charge des fonctions telles que le filtrage, le tri et le regroupement, ce qui permet aux d\u00e9veloppeurs de pr\u00e9senter de grands ensembles de donn\u00e9es aux utilisateurs d’une mani\u00e8re g\u00e9rable.<\/p>\n Voici un extrait de code permettant de cr\u00e9er une grille Kendo UI simple en HTML :<\/p>\n Ce code affichera une grille Kendo UI dans votre application Angular. Vous pouvez personnaliser la grille en passant diverses options de configuration au composant PrimeNG<\/a> est une biblioth\u00e8que open source con\u00e7ue pour \u00eatre facile \u00e0 utiliser et \u00e0 personnaliser. Elle comprend \u00e9galement des fonctions d’accessibilit\u00e9 avanc\u00e9es et une prise en charge de l’internationalisation, ce qui en fait un excellent choix pour les applications internationales.<\/p>\n Comment cela fonctionne-t-il ?<\/strong> La biblioth\u00e8que PrimeNG fournit un ensemble de composants d’interface utilisateur pr\u00e9-construits que les d\u00e9veloppeurs peuvent facilement int\u00e9grer dans leurs applications Angular. Elle utilise les directives int\u00e9gr\u00e9es et les hooks de cycle de vie d’Angular pour assurer une int\u00e9gration transparente avec le framework. Elle prend \u00e9galement en charge diverses options de configuration et de personnalisation afin que les d\u00e9veloppeurs puissent adapter les composants \u00e0 leurs besoins sp\u00e9cifiques.<\/p>\n L\u00e0 o\u00f9 il excelle :<\/strong> L’une des principales caract\u00e9ristiques de PrimeNG est sa prise en charge de l’internationalisation. La biblioth\u00e8que prend en charge plusieurs langues et fournit des services de traduction pour la plupart de ses composants. Cela est possible gr\u00e2ce \u00e0 l’utilisation du cadre de localisation d’Angular et des fichiers de messages, qui peuvent \u00eatre facilement personnalis\u00e9s et mis \u00e0 jour.<\/p>\n Pour utiliser l’internationalisation dans PrimeNG, vous devez cr\u00e9er des fichiers de traduction pour les langues que vous souhaitez prendre en charge. Ces fichiers doivent contenir les traductions de tous les composants que vous souhaitez utiliser dans votre application. Pour activer l’internationalisation dans PrimeNG, vous devez d\u00e9finir l’attribut Voici un exemple d’utilisation du composant Dans cet exemple, l’attribut Nebular<\/a> est une collection de plus de 40 composants Angular UI disponibles dans quatre th\u00e8mes personnalisables. La biblioth\u00e8que, cr\u00e9\u00e9e par la soci\u00e9t\u00e9 de d\u00e9veloppement web Akveo, est \u00e9galement livr\u00e9e avec un module d’authentification des utilisateurs et un module de s\u00e9curit\u00e9 bas\u00e9 sur ACL pour contr\u00f4ler l’acc\u00e8s plus granulaire \u00e0 des ressources sp\u00e9cifiques. Akveo peut \u00e9galement vous aider \u00e0 cr\u00e9er votre propre application de tableau de bord d’administration avec le kit ngx-admin<\/strong> construit \u00e0 partir de modules Nebular.<\/p>\n Comment cela fonctionne-t-il ?<\/strong> L’approche de l’interface utilisateur de Nebular est bas\u00e9e sur les sp\u00e9cifications du syst\u00e8me de conception Eva<\/a> d’Akveo, pour lequel il fournit \u00e9galement des actifs pour les \u00e9quipes dont le travail commence avec des outils de conception tels que Sketch ou Figma.<\/p>\n Les concepteurs qui travaillent avec le CSS de Nebular peuvent g\u00e9n\u00e9ralement se r\u00e9f\u00e9rer aux options de style de mani\u00e8re s\u00e9mantique – telles que les variables de couleur La biblioth\u00e8que de composants de Nebular comprend des mises en page, des cartes, des listes, des accord\u00e9ons, des aides \u00e0 la navigation, des \u00e9l\u00e9ments de formulaire, des tableaux de donn\u00e9es, des fen\u00eatres modales et des superpositions, ainsi que des widgets tels que des spinners, des s\u00e9lecteurs de date et des barres de progression.<\/p>\n Les m\u00e9tadonn\u00e9es d’un composant accord\u00e9on Nebular peuvent ressembler \u00e0 ceci TypeScript :<\/p>\n Et son mod\u00e8le pourrait ressembler \u00e0 ceci :<\/p>\n Points forts :<\/strong> La biblioth\u00e8que Nebular et le kit de tableau de bord d’administration ngx-admin<\/strong> sont libres d’utilisation, ce qui est un grand avantage pour une collection d’outils aussi sophistiqu\u00e9e. Les modules d’authentification et de s\u00e9curit\u00e9 refl\u00e8tent l’accent mis par Akveo sur ces composants du panneau d’administration.<\/p>\n Nebular offre \u00e9galement un support solide pour les langues qui se lisent de droite \u00e0 gauche (RTL). Les utilisateurs trouveront des balises CSS pour prendre en charge les mises en page RTL (et LTR), ainsi que des m\u00e9thodes – comme NG-Lightning<\/a> est un ajout int\u00e9ressant \u00e0 la gamme de biblioth\u00e8ques de composants, puisqu’il s’agit d’une impl\u00e9mentation du syst\u00e8me de conception Salesforce Lightning<\/a> (LDS) \u00e0 la sauce Angular. Ce syst\u00e8me fournit des \u00e9l\u00e9ments HTML et CSS – des plans – et des directives de conception pour les d\u00e9veloppeurs Salesforce qui utilisent le cadre Lightning de cette plateforme. Les \u00e9l\u00e9ments cl\u00e9s du LDS sont refl\u00e9t\u00e9s dans cette collection open source de widgets Angular, y compris le HTML et le CSS.<\/p>\n Comment \u00e7a marche :<\/strong> NG-Lightning a des d\u00e9pendances qui la distinguent de certaines autres biblioth\u00e8ques de composants. En plus de d\u00e9pendre du kit officiel de d\u00e9veloppement de composants Angular<\/a>, les applications NG-Lightning sont li\u00e9es aux m\u00eames r\u00e9f\u00e9rentiels CSS que ceux utilis\u00e9s par Salesforce LDS. Ces feuilles de style CSS peuvent \u00eatre t\u00e9l\u00e9charg\u00e9es \u00e0 partir du r\u00e9f\u00e9rentiel Salesforce UX<\/a> officiel ou li\u00e9es par le biais d’un CDN.<\/p>\n Toutefois, l’approche TypeScript de la cr\u00e9ation de vues sera famili\u00e8re aux d\u00e9veloppeurs Angular. Cet exemple lance les m\u00e9tadonn\u00e9es du composant d’alerte illustr\u00e9 ci-dessus :<\/p>\n Le mod\u00e8le de composant pour cet exemple officiel NG-Lightning est :<\/p>\n L\u00e0 o\u00f9 il excelle :<\/strong> Refl\u00e9tant leur ancrage dans le LDS de Salesforce, les d\u00e9veloppeurs de NG-Lightning prennent l’accessibilit\u00e9 du web au s\u00e9rieux. Les interfaces g\u00e9n\u00e9r\u00e9es dynamiquement, qui sont la marque de fabrique de frameworks tels qu’Angular, peuvent souvent repr\u00e9senter un d\u00e9fi pour les utilisateurs finaux souffrant d’un handicap visuel ou de mobilit\u00e9. NG-Lightning adh\u00e8re aux directives des sp\u00e9cifications ARIA du W3C, g\u00e9n\u00e9rant des balises Web con\u00e7ues pour prendre en charge les technologies d’assistance telles que les lecteurs d’\u00e9cran.<\/p>\n Syncfusion UI<\/a> est une biblioth\u00e8que l\u00e9g\u00e8re et modulaire qui permet aux d\u00e9veloppeurs de ne choisir que les composants n\u00e9cessaires \u00e0 leur application et de r\u00e9duire la taille globale du paquet final. Cela facilite la maintenance, l’extension et la mise \u00e0 jour de la biblioth\u00e8que en ajoutant de nouveaux composants ou en modifiant les composants existants sans affecter les autres.<\/p>\n Comment cela fonctionne-t-il ?<\/strong> Lorsqu’une page se charge, la biblioth\u00e8que Syncfusion UI initialise et cr\u00e9e les composants n\u00e9cessaires en fonction du balisage et des options de configuration. Par exemple, le composant grille permet aux utilisateurs de trier, de filtrer et de grouper les donn\u00e9es, tandis que le composant graphique peut afficher les donn\u00e9es dans une vari\u00e9t\u00e9 de formats, y compris les graphiques lin\u00e9aires, \u00e0 barres et circulaires.<\/p>\n La biblioth\u00e8que comprend \u00e9galement un ensemble de fonctions et d’outils utilitaires qui peuvent \u00eatre utilis\u00e9s pour simplifier les t\u00e2ches courantes, telles que la manipulation et la validation des donn\u00e9es. La biblioth\u00e8que comprend un gestionnaire de donn\u00e9es qui peut \u00eatre utilis\u00e9 pour travailler avec des structures de donn\u00e9es complexes et un moteur de validation qui peut \u00eatre utilis\u00e9 pour valider les donn\u00e9es saisies par l’utilisateur.<\/p>\n Points forts :<\/strong> Syncfusion fournit un ensemble d’outils robustes pour la personnalisation et la cr\u00e9ation de th\u00e8mes, permettant aux d\u00e9veloppeurs de cr\u00e9er rapidement une interface utilisateur coh\u00e9rente et d’aspect professionnel. La biblioth\u00e8que comprend un ensemble puissant d’API et d’\u00e9v\u00e9nements qui peuvent \u00eatre utilis\u00e9s pour cr\u00e9er des fonctionnalit\u00e9s et une interactivit\u00e9 personnalis\u00e9es, ainsi qu’une prise en charge des sources de donn\u00e9es les plus courantes telles que les API REST, OData et SignalR.<\/p>\n Voici un exemple d’int\u00e9gration d’un composant de grille Syncfusion dans une application Angular :<\/p>\n Ce code cr\u00e9e une grille simple qui affiche des donn\u00e9es provenant d’une source de donn\u00e9es. La propri\u00e9t\u00e9 Onsen UI<\/a> est une biblioth\u00e8que d’interface utilisateur open source populaire pour la cr\u00e9ation d’applications mobiles hybrides et web. Elle offre une meilleure int\u00e9gration transparente avec les frameworks frontend<\/a> les plus courants que d’autres biblioth\u00e8ques tierces, ce qui facilite la cr\u00e9ation d’interfaces utilisateur interactives de haute qualit\u00e9 avec un minimum d’efforts.<\/p>\n Comment cela fonctionne-t-il ?<\/strong> Onsen UI est bas\u00e9 sur la philosophie Material Design de Google, qui garantit que l’interface utilisateur de l’application est \u00e0 la fois esth\u00e9tique et conviviale. Elle fournit un vaste ensemble de th\u00e8mes int\u00e9gr\u00e9s qui peuvent \u00eatre appliqu\u00e9s aux composants pour am\u00e9liorer l’aspect et la convivialit\u00e9 de l’application.<\/p>\n Ses points forts :<\/strong> Onsen UI se distingue par sa facilit\u00e9 d’utilisation et sa capacit\u00e9 \u00e0 cr\u00e9er des applications multiplateformes qui ressemblent \u00e0 des applications natives. Il fournit un riche ensemble de composants d’interface utilisateur pr\u00e9con\u00e7us qui sont optimis\u00e9s pour les appareils mobiles et peuvent \u00eatre personnalis\u00e9s pour r\u00e9pondre aux besoins de l’application. Il comprend \u00e9galement des fonctionnalit\u00e9s telles que la prise en charge FastClick<\/a>, qui permet de supprimer les retards dans les \u00e9v\u00e9nements tactiles, et le lazy loading, qui permet d’acc\u00e9l\u00e9rer les temps de chargement de l’application.<\/p>\n Voici un exemple de code montrant comment cr\u00e9er un simple bouton \u00e0 l’aide d’Onsen UI :<\/p>\n Ce code cr\u00e9era un bouton avec le texte \u00ab Click me! \u00bb\u00a0 et la classe modificatrice Les biblioth\u00e8ques de composants sont d\u00e9sormais largement accept\u00e9es comme une pratique standard dans le d\u00e9veloppement web. Les biblioth\u00e8ques de composants ont aid\u00e9 Angular \u00e0 devenir l’un des frameworks de d\u00e9veloppement frontal les plus populaires et les plus utilis\u00e9s en fournissant un moyen pratique et efficace de d\u00e9velopper des composants d’interface utilisateur.<\/p>\n Les biblioth\u00e8ques ci-dessus fournissent des composants d’interface utilisateur pr\u00e9-construits et personnalisables qui aident les d\u00e9veloppeurs \u00e0 cr\u00e9er des interfaces utilisateur de haute qualit\u00e9 et coh\u00e9rentes avec moins d’efforts. En fin de compte, le choix de la biblioth\u00e8que d\u00e9pendra des besoins sp\u00e9cifiques du projet et des pr\u00e9f\u00e9rences du d\u00e9veloppeur.<\/p>\n Vous avez besoin d’un h\u00e9bergement pour votre prochain projet Angular ? Les plateformes d’h\u00e9bergement d’applications<\/a> et de bases de donn\u00e9es<\/a> de Kinsta sont des solutions pr\u00eates \u00e0 servir votre application au monde entier.<\/p>\n","protected":false},"excerpt":{"rendered":" Angular est un framework JavaScript open source construit \u00e0 l’aide de TypeScript et optimis\u00e9 pour le d\u00e9veloppement d’applications web \u00e0 page unique. Il est r\u00e9put\u00e9 pour …<\/p>\n","protected":false},"author":117,"featured_media":67499,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[952],"class_list":["post-67498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"yoast_head":"\nnpm<\/code> Node Package Manager ou \u00e0 l’aide de l’interface de ligne de commande (CLI) d’Angular.<\/p>\nQu’est-ce qui fait une bonne biblioth\u00e8que de composants ?<\/h2>\n
\n
9 biblioth\u00e8ques de composants Angular tr\u00e8s pratiques<\/h2>\n
1. Angular Material<\/h3>\n
![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-material-buttons.png\")
mat-button<\/code> et de le personnaliser selon vos besoins.<\/p>\n<button mat-button color=\"primary\">Click me!<\/button><\/code><\/pre>\n2. NG-Bootstrap<\/h3>\n
![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-bootstrap-carousel.jpg\")
ng-bootstrap<\/code> Modal, les d\u00e9veloppeurs peuvent facilement cr\u00e9er des bo\u00eetes de dialogue modales avec des options personnalisables telles que la taille, l’arri\u00e8re-plan et la prise en charge du clavier.<\/p>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">Modal title<\/h4>\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n <span aria-hidden=\"true\">×<\/span>\n <\/button>\n <\/div>\n <div class=\"modal-body\">\n <p>Modal body text goes here.<\/p>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"modal.close('Close click')\">Close<\/button>\n <\/div>\n<\/ng-template>\n<button class=\"btn btn-primary\" (click)=\"open(content)\">Launch demo modal<\/button><\/code><\/pre>\nng-template<\/code> contient le contenu de la bo\u00eete de dialogue modale, y compris l’en-t\u00eate, le corps et le pied de page. L’\u00e9l\u00e9ment button \u00e0 la fin de l’extrait de code d\u00e9clenche l’ouverture de la bo\u00eete de dialogue modale lorsqu’il est cliqu\u00e9. La m\u00e9thode open()<\/code> est utilis\u00e9e pour afficher la fen\u00eatre modale et prend l’\u00e9l\u00e9ment ng-template<\/code> comme argument.<\/p>\n3. Clarity<\/h3>\n
![\"Illustration](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-clarity.png\")
<clr-input-container>\n <label>Username<\/label>\n <input clrInput placeholder=\"Enter your username\">\n<\/clr-input-container><\/code><\/pre>\nclr-input-container<\/code> et clrInput<\/code> sont fournies par la biblioth\u00e8que Clarity et styliseront le champ de saisie en cons\u00e9quence.<\/p>\n4. Kendo UI<\/h3>\n
![\"Exemple](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-kendo-ui-data-grid.png\")
<kendo-grid [data]=\"gridData\">\n <kendo-grid-column field=\"ProductID\" title=\"Product ID\" width=\"120\"><\/kendo-grid-column>\n <kendo-grid-column field=\"ProductName\" title=\"Product Name\" width=\"200\"><\/kendo-grid-column>\n <kendo-grid-column field=\"UnitPrice\" title=\"Unit Price\" width=\"120\"><\/kendo-grid-column>\n <kendo-grid-column field=\"UnitsInStock\" title=\"Units In Stock\" width=\"120\"><\/kendo-grid-column>\n<\/kendo-grid><\/code><\/pre>\nkendo-grid<\/code>.<\/p>\n5. PrimeNG<\/h3>\n
![\"Logo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-primeng-logo.png\"){kind=logo}
translate<\/code> d’un composant sur true<\/code>. Le composant utilisera alors les fichiers de traduction pour afficher le texte dans la langue choisie par l’utilisateur.<\/p>\np-calendar<\/code> avec prise en charge de l’internationalisation dans PrimeNG :<\/p>\n<p-calendar [(ngModel)]=\"date\" [showIcon]=\"true\" [readonlyInput]=\"true\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"2000:2030\" [locale]=\"en\"><\/p-calendar><\/code><\/pre>\ntranslate<\/code> du composant p-calendar<\/code> est d\u00e9fini sur true<\/code>, et l’attribut [locale]<\/code> est d\u00e9fini sur le code de langue de l’anglais (en). Cela garantit que le calendrier s’affiche en anglais pour les utilisateurs qui ont choisi cette langue.<\/p>\n6. Nebular<\/h3>\n
![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-nebular-smart-table.png\")
primary<\/code>, success<\/code>, info<\/code>, warning<\/code>, et danger<\/code>. Mais les utilisateurs peuvent aller au-del\u00e0 de ce qu’Akveo a d\u00e9cid\u00e9 de repr\u00e9senter en important des personnalisations de style avanc\u00e9es sous forme de fichiers Sass.<\/p>\nimport { Component, ChangeDetectionStrategy } from '@angular\/core';\n\n@Component({\n selector: 'nb-accordion-demo',\n templateUrl: '.\/accordion-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionDemoComponent {}<\/code><\/pre>\n<nb-accordion>\n <nb-accordion-item>\n <nb-accordion-item-header>First Item Heading<\/nb-accordion-item-header>\n <nb-accordion-item-body>\n Toggled content for First Item.\n <\/nb-accordion-item-body>\n <\/nb-accordion-item>\n <nb-accordion-item>\n <nb-accordion-item-header>Second Item Heading<\/nb-accordion-item-header>\n <nb-accordion-item-body>\n Toggled content for Second Item.\n <\/nb-accordion-item-body>\n <\/nb-accordion-item>\n<\/nb-accordion><\/code><\/pre>\ngetDirection()<\/code> et setDirection()<\/code> – pour d\u00e9tecter et modifier la direction de la mise en page au moment de l’ex\u00e9cution.<\/p>\n7. NG-Lightning<\/h3>\n
![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-lightning-alert.png\")
import { Component } from '@angular\/core';\n\n@Component({\n selector: 'app-demo-alert-basic',\n templateUrl: '.\/basic.html',\n})\nexport class DemoAlertBasic {\n showTopAlert = false;\n\n onClose(reason: string) {\n console.log(`Closed by ${reason}`);\n }\n}<\/code><\/pre>\n<div class=\"slds-notify_container\">\n <ngl-alert *ngIf=\"showTopAlert\" variant=\"warning\" iconName=\"warning\" (close)=\"onClose($event); showTopAlert = false;\">\n <h2 class=\"slds-text-heading_small\">\n Your browser is outdated. Your Salesforce experience may be degraded.\n <a href=\"javascript:void(0);\">More Information<\/a>\n <\/h2>\n <\/ngl-alert>\n<\/div>\n\n<ngl-alert class=\"slds-theme_alert-texture\" variant=\"offline\" iconName=\"offline\" (close)=\"onClose('click')\">\n <h2>You are in offline mode.<a href=\"javascript:void(0);\">More Information<\/a><\/h2>\n<\/ngl-alert>\n\n<ngl-alert class=\"slds-m-top_small\" variant=\"error\">Your browser is currently not supported.<\/ngl-alert>\n\n<button class=\"slds-m-top_medium\" type=\"button\" [disabled]=\"showTopAlert\" nglButton (click)=\"showTopAlert = true\">Show alert in container<\/button><\/code><\/pre>\n8. Syncfusion UI<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-syncfusion-cards.png\")
<ejs-grid [dataSource]=\"data\">\n <e-columns>\n <e-column field=\"OrderID\" headerText=\"Order ID\" textAlign=\"Right\" width=\"120\"><\/e-column>\n <e-column field=\"CustomerID\" headerText=\"Customer Name\" width=\"150\"><\/e-column>\n <e-column field=\"Freight\" headerText=\"Freight\" textAlign=\"Right\" format=\"C2\" width=\"120\"><\/e-column>\n <e-column field=\"ShipCity\" headerText=\"Ship City\" width=\"150\"><\/e-column>\n <\/e-columns>\n<\/ejs-grid><\/code><\/pre>\ndataSource<\/code> est d\u00e9finie sur les donn\u00e9es \u00e0 afficher, et l’\u00e9l\u00e9ment e-columns<\/code> est utilis\u00e9 pour d\u00e9finir les colonnes de la grille. Chaque \u00e9l\u00e9ment e-column<\/code> d\u00e9finit une colonne de la grille, y compris le champ \u00e0 afficher, le texte de l’en-t\u00eate et la largeur de la colonne. L’exemple montre \u00e9galement comment formater les donn\u00e9es affich\u00e9es dans la grille \u00e0 l’aide de l’attribut format<\/code>.<\/p>\n9. Onsen UI<\/h3>\n
![\"Exemples](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-onsen-ui-lists.png\")
<ons-button modifier=\"large--cta\">Click me!<\/ons-button><\/code><\/pre>\nlarge--cta<\/code>, qui modifiera l’apparence du bouton en lui donnant une taille plus grande et une couleur adapt\u00e9e \u00e0 un bouton d’appel \u00e0 l’action.<\/p>\n\nEn r\u00e9sum\u00e9<\/h2>\n