Warum eine Komponentenbibliothek verwenden?<\/h2>\n
Unabh\u00e4ngig davon, ob du sie selbst erstellst oder Bibliotheken von Drittanbietern verwendest, bilden Komponenten die Grundlage von Angular-Anwendungen. Jede Komponente basiert auf einer Vorlage f\u00fcr ihre HTML- und CSS-Elemente und TypeScript-Code, der ihr Verhalten steuert.<\/p>\n
Der Hauptvorteil von Komponentenbibliotheken ist, dass sie wiederverwendbare, vorgefertigte UI-Komponenten bereitstellen, die den Bedarf an eigenem Code verringern und Entwicklern helfen, Anwendungen schnell zum Laufen zu bringen.<\/p>\n
Der Komponentenansatz von Angular kann auch die team\u00fcbergreifende Zusammenarbeit zwischen Programmierern, die den TypeScript-Code schreiben, und Webdesignern, die den HTML-Code f\u00fcr die Vorlagen erstellen, verbessern.<\/p>\n
Komponentenbibliotheken werden in der Regel \u00fcber den Node.js Die Komponentenbibliotheken auf unserer Liste wurden anhand mehrerer Kriterien ausgew\u00e4hlt:<\/p>\n Schauen wir uns unsere Auswahl genauer an.<\/p>\n Angular Material<\/a> ist die offizielle Angular-Komponentenbibliothek und bietet eine umfassende UI-Sammlung, die mit den neuesten Angular-Funktionen und API-\u00c4nderungen Schritt h\u00e4lt. Sie bietet au\u00dferdem integrierte Unterst\u00fctzung f\u00fcr Barrierefreiheit, indem sie Markup generiert, um die Tastaturnavigation zu erm\u00f6glichen und assistive Technologien wie Screenreader zu unterst\u00fctzen.<\/p>\n Wie es funktioniert:<\/strong> Angular Material nutzt die in Angular eingebauten Direktiven und Dienste, um eine Reihe von datengebundenen und performanten Komponenten auf Angular aufzusetzen, die es einfach machen, Webanwendungen interaktiv zu gestalten.<\/p>\n Was es auszeichnet:<\/strong> Angular Material zeichnet sich durch vorgefertigte UI-Komponenten aus, die den Material Design Richtlinien folgen. Es bietet eine Reihe gut gestalteter und anpassbarer UI-Komponenten, die leicht in Angular-Anwendungen integriert werden k\u00f6nnen. Zu diesen Komponenten geh\u00f6ren Navigationsmen\u00fcs, Schaltfl\u00e4chen, Formulare, Dialogfelder und vieles mehr.<\/p>\n Wenn du zum Beispiel eine Button-Komponente zu deiner Anwendung hinzuf\u00fcgen m\u00f6chtest, kannst du einfach die Direktive Hier ist ein Beispiel f\u00fcr einen Codeschnipsel:<\/p>\n Dieser Code erzeugt eine Schaltfl\u00e4chenkomponente mit dem prim\u00e4ren Farbschema. Du kannst die Schaltfl\u00e4che weiter anpassen, indem du Event-Handler hinzuf\u00fcgst, den Text und das Aussehen des Symbols \u00e4nderst.<\/p>\n NG-Bootstrap<\/a> ist eine Open-Source-Bibliothek, die auf Bootstrap CSS aufbaut und Komponenten und Designmuster bereitstellt, mit denen viele Entwickler bereits vertraut sind. Das beschleunigt die Lernkurve f\u00fcr neue Projekte und macht sie zu einer zuverl\u00e4ssigen Wahl, um Angular-Anwendungen schnell und effizient zu erstellen.<\/p>\n Wie es funktioniert: <\/strong>NG-Bootstrap erweitert die M\u00f6glichkeiten von Bootstrap-Komponenten, indem es Entwicklern erm\u00f6glicht, sie als Angular-Direktiven mit Zwei-Wege-Datenbindung und anderen Angular-spezifischen Funktionen zu verwenden. Das macht es Entwicklern leicht, reaktionsf\u00e4hige, mobilfreundliche Webanwendungen zu erstellen, die nahtlos mit Angular zusammenarbeiten.<\/p>\n Wo es sich auszeichnet:<\/strong> Eine der Hauptst\u00e4rken von NG-Bootstrap ist die Unterst\u00fctzung f\u00fcr barrierefreie Funktionen, einschlie\u00dflich der W3C-Spezifikationen f\u00fcr barrierefreie Rich-Internet-Anwendungen (ARIA), die es Entwicklern erleichtern, Anwendungen zu erstellen, die von Menschen mit Behinderungen genutzt werden k\u00f6nnen. NG-Bootstrap zeichnet sich auch im Bereich der modalen Dialoge aus. Mit der Komponente Hier ist ein Beispiel daf\u00fcr, wie man einen einfachen modalen Dialog mit NG-Bootstrap erstellt:<\/p>\n In diesem Beispiel enth\u00e4lt das Element Clarity<\/a> ist eine Open-Source-Bibliothek, die eine gemeinsame visuelle Sprache f\u00fcr ihre Komponenten verwendet, um eine einheitliche, intuitive Benutzeroberfl\u00e4che zu schaffen. Au\u00dferdem ist sie mit zahlreichen Anleitungen, Tutorials und API-Referenzen ausf\u00fchrlich dokumentiert, sodass sie leicht zu erlernen und anzuwenden ist.<\/p>\n Wie es funktioniert:<\/strong> Das Clarity-Designsystem basiert auf dem Konzept der „Karten“, mit denen zusammengeh\u00f6rige Inhalte gruppiert werden. Karten werden verwendet, um einzelne Inhalte strukturiert und \u00fcbersichtlich darzustellen. Clarity bietet eine Vielzahl von Kartenkomponenten, mit denen Daten in unterschiedlichen Formaten dargestellt werden k\u00f6nnen. Zu diesen Kartenkomponenten geh\u00f6ren Kopf- und Fu\u00dfzeilen sowie Inhaltsabschnitte, die mit verschiedenen Stilen und Themen leicht angepasst werden k\u00f6nnen.<\/p>\n Die Karten k\u00f6nnen auch mit anderen Komponenten – wie Modals, Dropdowns und Schaltfl\u00e4chen – kombiniert werden, um komplexere UI-Designs zu erstellen. Das \u00fcbergeordnete Ziel des kartenbasierten Designs ist es, ein flexibles und modulares System zu schaffen, mit dem sich komplexe Benutzeroberfl\u00e4chen leicht erstellen lassen.<\/p>\n Die<\/strong> St\u00e4rken:<\/strong> Claritys umfangreiches Set an Formularsteuerelementen ist eine eindeutige St\u00e4rke. Zu diesen Steuerelementen geh\u00f6ren Eingabefelder, Auswahlfelder, Optionsfelder und vieles mehr. Clarity bietet auch eine Reihe von Datenvisualisierungen, wie z. B. Balken-, Linien- und Tortendiagramme, um die Daten \u00fcbersichtlich darzustellen.<\/p>\n Hier ist ein Beispiel f\u00fcr die Verwendung der Clarity-Eingabefeldkomponente in einem HTML-Formular:<\/p>\n Mit diesem Code wird ein Formular-Eingabefeld mit einer Beschriftung und einem Platzhaltertext erstellt. Die Direktiven Kendo UI<\/a> ist eine kommerzielle Bibliothek, die mit Blick auf die Leistung entwickelt wurde, um schnelle Ladezeiten und ein reibungsloses Nutzererlebnis zu gew\u00e4hrleisten. Sie bietet au\u00dferdem Themes und Styling-Optionen, um das Aussehen deiner Anwendung zu verbessern, sowie eine umfangreiche Dokumentation und ein engagiertes Support-Team.<\/p>\n Wie es funktioniert:<\/strong> Kendo UI nutzt Techniken wie Virtualisierung und Lazy Loading, um schnelle Ladezeiten und ein reibungsloses Nutzererlebnis zu gew\u00e4hrleisten. Das bedeutet, dass Anwendungen, die mit Kendo UI erstellt werden, schnell und reaktionsschnell sind, selbst wenn sie mit gro\u00dfen Datens\u00e4tzen arbeiten. Kendo UI verfolgt au\u00dferdem eine modulare Architektur, die es Entwicklern erm\u00f6glicht, nur die Komponenten zu verwenden, die sie ben\u00f6tigen, was die Gr\u00f6\u00dfe der Bibliothek reduziert und die Leistung verbessert.<\/p>\n Die<\/strong> St\u00e4rken von Kendo UI:<\/strong> Kendo UI eignet sich besonders f\u00fcr Unternehmensanwendungen, die eine umfangreiche Datenverwaltung und komplexe Benutzerinteraktionen erfordern. Die Grid-Komponente von Kendo UI unterst\u00fctzt zum Beispiel Funktionen wie Filtern, Sortieren und Gruppieren und erm\u00f6glicht es Entwicklern, gro\u00dfe Datens\u00e4tze auf \u00fcberschaubare Weise f\u00fcr die Nutzer zu pr\u00e4sentieren.<\/p>\n Hier ist ein Codeschnipsel, der zeigt, wie man ein einfaches Kendo UI-Grid in HTML erstellt:<\/p>\n Dieser Code zeigt ein Kendo UI Grid in deiner Angular-Anwendung an. Du kannst das Raster anpassen, indem du verschiedene Konfigurationsoptionen an die Komponente PrimeNG<\/a> ist eine Open-Source-Bibliothek, die auf einfache Nutzung und Anpassung ausgelegt ist. Sie bietet au\u00dferdem erweiterte Funktionen f\u00fcr Barrierefreiheit und Unterst\u00fctzung f\u00fcr die Internationalisierung, was sie zu einer guten Wahl f\u00fcr globale Anwendungen macht.<\/p>\n Wie sie funktioniert:<\/strong> Die PrimeNG-Bibliothek bietet eine Reihe von vorgefertigten UI-Komponenten, die Entwickler leicht in ihre Angular-Anwendungen integrieren k\u00f6nnen. Sie nutzt die in Angular integrierten Direktiven und Lifecycle Hooks, um eine nahtlose Integration in das Framework zu erm\u00f6glichen. Au\u00dferdem unterst\u00fctzt sie verschiedene Konfigurationsoptionen und Anpassungen, sodass Entwickler die Komponenten an ihre spezifischen Bed\u00fcrfnisse anpassen k\u00f6nnen.<\/p>\n Wo es sich auszeichnet:<\/strong> Eine der wichtigsten Funktionen von PrimeNG ist die Unterst\u00fctzung der Internationalisierung. Die Bibliothek unterst\u00fctzt mehrere Sprachen und bietet \u00dcbersetzungsdienste f\u00fcr die meisten ihrer Komponenten. Dies wird durch den Einsatz des Angular-Lokalisierungsframeworks und der Nachrichtendateien erreicht, die leicht angepasst und aktualisiert werden k\u00f6nnen.<\/p>\n Um die Internationalisierung in PrimeNG zu nutzen, musst du \u00dcbersetzungsdateien f\u00fcr die Sprachen erstellen, die du unterst\u00fctzen willst. Diese Dateien sollten \u00dcbersetzungen f\u00fcr alle Komponenten enthalten, die du in deiner Anwendung verwenden willst. Um die Internationalisierung in PrimeNG zu aktivieren, musst du das Attribut Hier ist ein Beispiel f\u00fcr die Verwendung der Komponente In diesem Beispiel wird bei der Komponente Nebular<\/a> ist eine Sammlung von mehr als 40 Angular UI-Komponenten, die in vier anpassbaren Themes verf\u00fcgbar sind. Die von der Webentwicklungsfirma Akveo entwickelte Bibliothek enth\u00e4lt au\u00dferdem ein Modul zur Benutzerauthentifizierung und ein ACL-basiertes Sicherheitsmodul, mit dem der Zugriff auf bestimmte Ressourcen kontrolliert werden kann. Mit dem ngx-admin<\/strong>-Kit, das auf Nebular-Modulen basiert, kann Akveo auch deine eigene Admin-Dashboard-Anwendung entwickeln.<\/p>\n Wie es funktioniert:<\/strong> Der UI-Ansatz von Nebular basiert auf den Spezifikationen des Eva Design Systems<\/a> von Akveo, f\u00fcr das es auch Assets f\u00fcr Teams bereitstellt, deren Arbeit mit Design-Tools wie Sketch oder Figma beginnt.<\/p>\n Designer, die mit Nebulars CSS arbeiten, k\u00f6nnen sich im Allgemeinen semantisch auf Styling-Optionen beziehen – zum Beispiel auf die Farbvariablen Die Komponentenbibliothek von Nebular umfasst Layouts, Karten, Listen, Akkordeons, Navigationshilfen, Formularelemente, Datentabellen, Modals und Overlays sowie Widgets wie Spinner, Datumspicker und Fortschrittsbalken.<\/p>\n Die Metadaten f\u00fcr eine Nebular-Akkordeon-Komponente k\u00f6nnten wie folgt aussehen TypeScript:<\/p>\n Und die Vorlage k\u00f6nnte so aussehen:<\/p>\n Was es auszeichnet:<\/strong> Die Nebular-Bibliothek und das ngx-admin<\/strong> Admin-Dashboard-Kit k\u00f6nnen kostenlos genutzt werden, was ein gro\u00dfes Plus f\u00fcr eine so ausgefeilte Sammlung von Tools ist. Die Authentifizierungs- und Sicherheitsmodule spiegeln den Fokus von Akveo auf diese Komponenten des Administrations-Panels wider.<\/p>\n Nebular unterst\u00fctzt auch Sprachen, die von rechts nach links lesen (RTL). Die Nutzer finden CSS-Auszeichnungen zur Unterst\u00fctzung von RTL- (und LTR-) Layouts und Methoden – wie NG-Lightning<\/a> ist eine interessante Erg\u00e4nzung der Komponentenbibliothek. Es handelt sich um eine an Angular angelehnte Implementierung des Salesforce Lightning Design Systems<\/a> (LDS). Dieses System bietet HTML- und CSS-Elemente – Blaupausen – und Designrichtlinien f\u00fcr Salesforce-Entwickler, die das Lightning-Framework der Plattform nutzen. Die wichtigsten Elemente des LDS finden sich in dieser Open-Source-Sammlung von Angular-Widgets wieder, einschlie\u00dflich HTML und CSS.<\/p>\n Wie es funktioniert:<\/strong> NG-Lightning hat Abh\u00e4ngigkeiten, die es von einigen anderen Komponentenbibliotheken unterscheiden. NG-Lightning ist nicht nur vom offiziellen Angular Component Dev Kit<\/a> abh\u00e4ngig, sondern verlinkt auch auf die gleichen CSS-Repositories, die von Salesforce LDS verwendet werden. Dieses CSS kann aus dem offiziellen Salesforce UX-Repository<\/a> heruntergeladen oder \u00fcber ein CDN verlinkt werden.<\/p>\n Der TypeScript-basierte Ansatz zur Erstellung von Ansichten wird Angular-Entwicklern jedoch vertraut sein. In diesem Beispiel werden die Metadaten f\u00fcr die oben gezeigte Alarmkomponente erstellt:<\/p>\n Die Komponentenvorlage f\u00fcr dieses offizielle NG-Lightning-Beispiel lautet:<\/p>\n Wo es sich auszeichnet:<\/strong> Die Entwickler von NG-Lightning nehmen die Barrierefreiheit sehr ernst, was sich in der Salesforce LDS widerspiegelt. Dynamisch generierte Oberfl\u00e4chen, die das Markenzeichen von Frameworks wie Angular sind, k\u00f6nnen f\u00fcr Endnutzer mit Seh- oder Mobilit\u00e4tsbehinderungen oft eine Herausforderung darstellen. NG-Lightning h\u00e4lt sich an die ARIA-Spezifikationsrichtlinien des W3C und erstellt Web-Auszeichnungen, die Hilfsmittel wie Bildschirmleseger\u00e4te unterst\u00fctzen.<\/p>\n Syncfusion UI<\/a> ist eine leichtgewichtige, modulare Bibliothek, die es Entwicklern erm\u00f6glicht, nur die notwendigen Komponenten f\u00fcr ihre Anwendung auszuw\u00e4hlen und die Gesamtgr\u00f6\u00dfe des fertigen Pakets zu reduzieren. Das macht es einfach, die Bibliothek zu pflegen, zu erweitern und zu aktualisieren, indem man neue Komponenten hinzuf\u00fcgt oder bestehende modifiziert, ohne die anderen zu beeintr\u00e4chtigen.<\/p>\n Wie sie funktioniert:<\/strong> Wenn eine Seite geladen wird, initialisiert und erstellt die Syncfusion UI-Bibliothek die erforderlichen Komponenten auf der Grundlage des Markups und der Konfigurationsoptionen. Mit der Grid-Komponente k\u00f6nnen Nutzerinnen und Nutzer zum Beispiel Daten sortieren, filtern und gruppieren, w\u00e4hrend die Chart-Komponente Daten in verschiedenen Formaten wie Linien-, Balken- und Kreisdiagrammen anzeigen kann.<\/p>\n Die Bibliothek enth\u00e4lt au\u00dferdem eine Reihe von Hilfsfunktionen und Werkzeugen, die zur Vereinfachung g\u00e4ngiger Aufgaben wie Datenmanipulation und -validierung verwendet werden k\u00f6nnen. Die Bibliothek enth\u00e4lt einen Datenmanager, mit dem du mit komplexen Datenstrukturen arbeiten kannst, und eine Validierungs-Engine, mit der du Benutzereingaben \u00fcberpr\u00fcfen kannst.<\/p>\n St\u00e4rken:<\/strong> Syncfusion bietet eine Reihe von robusten Werkzeugen f\u00fcr die Anpassung und Thematisierung, mit denen Entwickler schnell eine einheitliche und professionell aussehende Benutzeroberfl\u00e4che erstellen k\u00f6nnen. Die Bibliothek umfasst eine Reihe leistungsstarker APIs und Ereignisse, die f\u00fcr die Entwicklung eigener Funktionen und Interaktivit\u00e4t genutzt werden k\u00f6nnen, sowie Unterst\u00fctzung f\u00fcr g\u00e4ngige Datenquellen wie REST APIs, OData und SignalR.<\/p>\n Hier ist ein Beispiel f\u00fcr die Einbindung einer Syncfusion-Grid-Komponente in eine Angular-Anwendung:<\/p>\n Dieser Code erstellt ein einfaches Raster, das Daten aus einer Datenquelle anzeigt. Die Eigenschaft Onsen UI<\/a> ist eine beliebte Open-Source UI-Bibliothek f\u00fcr die Entwicklung von hybriden und mobilen Webanwendungen. Sie l\u00e4sst sich besser als andere Bibliotheken von Drittanbietern nahtlos in g\u00e4ngige Frontend<\/a>-Frameworks integrieren, sodass du mit minimalem Aufwand eine hochwertige, interaktive Benutzeroberfl\u00e4che erstellen kannst.<\/p>\n Wie es funktioniert:<\/strong> Onsen UI basiert auf der Material Design-Philosophie von Google, die daf\u00fcr sorgt, dass die Benutzeroberfl\u00e4che der Anwendung sowohl \u00e4sthetisch ansprechend als auch benutzerfreundlich ist. Es bietet eine Vielzahl von integrierten Themes, die auf die Komponenten angewendet werden k\u00f6nnen, um das Aussehen der Anwendung zu verbessern.<\/p>\n Wo es sich auszeichnet:<\/strong> Onsen UI zeichnet sich durch seine Benutzerfreundlichkeit und seine F\u00e4higkeit aus, plattform\u00fcbergreifende Anwendungen zu erstellen, die aussehen und sich anf\u00fchlen wie native Anwendungen. Es bietet eine Vielzahl von vorgefertigten UI-Komponenten, die f\u00fcr mobile Ger\u00e4te optimiert sind und an die Bed\u00fcrfnisse der Anwendung angepasst werden k\u00f6nnen. Au\u00dferdem enth\u00e4lt sie Funktionen wie die FastClick-Unterst\u00fctzung<\/a>, die Verz\u00f6gerungen bei Touch-Ereignissen beseitigt, und Lazy Loading, das schnellere Ladezeiten der Anwendung erm\u00f6glicht.<\/p>\n Hier ist ein Beispielcode, der zeigt, wie du mit Onsen UI einen einfachen Button erstellen kannst:<\/p>\n Mit diesem Code wird eine Schaltfl\u00e4che mit dem Text „Klick mich!“ und der Modifikatorklasse Komponentenbibliotheken sind heute weithin als Standard in der Webentwicklung akzeptiert. Komponentenbibliotheken haben dazu beigetragen, dass Angular zu einem der beliebtesten und am weitesten verbreiteten Frontend-Entwicklungsframeworks geworden ist, da sie eine bequeme und effiziente M\u00f6glichkeit zur Entwicklung von UI-Komponenten bieten.<\/p>\n Die oben genannten Bibliotheken bieten vorgefertigte und anpassbare UI-Komponenten, die Entwicklern helfen, hochwertige und konsistente Benutzeroberfl\u00e4chen mit weniger Aufwand zu erstellen. Letztendlich h\u00e4ngt die Wahl der Bibliothek von den spezifischen Anforderungen des Projekts und den Vorlieben des Entwicklers ab.<\/p>\n Brauchst du ein Zuhause f\u00fcr dein n\u00e4chstes Angular-Projekt? Kinstas Plattformen f\u00fcr Anwendungs-Hosting<\/a> und Datenbank-Hosting<\/a> sind L\u00f6sungen, die bereit sind, deine Anwendung der Welt zur Verf\u00fcgung zu stellen.<\/p>\n","protected":false},"excerpt":{"rendered":" Angular ist ein Open-Source-JavaScript-Framework, das auf TypeScript basiert und f\u00fcr die Entwicklung von Single-Page-Webanwendungen optimiert ist. Es ist bekannt f\u00fcr seine Vielseitigkeit, die es Entwicklern erm\u00f6glicht, …<\/p>\n","protected":false},"author":117,"featured_media":60323,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[924],"class_list":["post-60322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"yoast_head":"\nnpm<\/code> Node Package Manager oder \u00fcber die Angular-eigene Befehlszeilenschnittstelle (CLI) zu Angular-Projekten hinzugef\u00fcgt.<\/p>\nWas macht eine gute Komponentenbibliothek aus?<\/h2>\n
\n
9 N\u00fctzliche Bibliotheken f\u00fcr Angular-Komponenten<\/h2>\n
1. Angular Material<\/h3>\n
![\"Screenshot:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-material-buttons.png\")
mat-button<\/code> verwenden und sie nach Bedarf anpassen.<\/p>\n<button mat-button color=\"primary\">Click me!<\/button><\/code><\/pre>\n2. NG-Bootstrap<\/h3>\n
![\"Screenshot:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-bootstrap-carousel.jpg\")
ng-bootstrap<\/code> Modal k\u00f6nnen Entwickler ganz einfach modale Dialoge mit anpassbaren Optionen wie Gr\u00f6\u00dfe, Hintergrund und Tastaturunterst\u00fctzung erstellen.<\/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> den Inhalt des modalen Dialogs, einschlie\u00dflich der Kopf-, K\u00f6rper- und Fu\u00dfzeile. Das Schaltfl\u00e4chenelement am Ende des Codeschnipsels l\u00f6st das \u00d6ffnen des modalen Dialogs aus, wenn es angeklickt wird. Die Methode open()<\/code> wird verwendet, um das Modal anzuzeigen und nimmt das Element ng-template<\/code> als Argument.<\/p>\n3. Clarity<\/h3>\n
![\"Eine](\"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> und clrInput<\/code> werden von der Clarity-Bibliothek bereitgestellt und werden das Eingabefeld entsprechend gestalten.<\/p>\n4. Kendo UI<\/h3>\n
![\"Screenshot:](\"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> \u00fcbergibst.<\/p>\n5. PrimeNG<\/h3>\n
![\"Offizielles](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-primeng-logo.png\"){kind=logo}
translate<\/code> einer Komponente auf true<\/code> setzen. Die Komponente verwendet dann die \u00dcbersetzungsdateien, um den Text in der Sprache der Wahl des Nutzers anzuzeigen.<\/p>\np-calendar<\/code> mit Internationalisierungsunterst\u00fctzung in PrimeNG:<\/p>\n<p-calendar [(ngModel)]=\"date\" [showIcon]=\"true\" [readonlyInput]=\"true\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"2000:2030\" [locale]=\"en\"><\/p-calendar><\/code><\/pre>\np-calendar<\/code> das Attribut translate<\/code> auf true<\/code> und das Attribut [locale]<\/code> auf den Sprachcode f\u00fcr Englisch (en) gesetzt. Damit wird sichergestellt, dass der Kalender f\u00fcr Nutzer, die diese Sprache gew\u00e4hlt haben, auf Englisch angezeigt wird.<\/p>\n6. Nebular<\/h3>\n
![\"Screenshot:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-nebular-smart-table.png\")
primary<\/code>, success<\/code>, info<\/code>, warning<\/code> und danger<\/code>. Aber die Benutzer k\u00f6nnen \u00fcber das hinausgehen, was Akveo festgelegt hat, indem sie erweiterte Styling-Anpassungen als Sass-Dateien importieren.<\/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> und setDirection()<\/code> – zur Erkennung und \u00c4nderung der Layoutrichtung zur Laufzeit.<\/p>\n7. NG-Lightning<\/h3>\n
![\"Screenshot:](\"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
![\"Screenshot:](\"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> wird auf die anzuzeigenden Daten gesetzt, und das Element e-columns<\/code> wird verwendet, um die Spalten im Grid zu definieren. Jedes e-column<\/code> Element definiert eine Spalte im Raster, einschlie\u00dflich des anzuzeigenden Feldes, des \u00dcberschriftentextes und der Spaltenbreite. Das Beispiel zeigt auch, wie die im Raster angezeigten Daten mithilfe des Attributs format<\/code> formatiert werden k\u00f6nnen.<\/p>\n9. Onsen UI<\/h3>\n
![\"Screenshot:](\"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> erstellt, die das Aussehen der Schaltfl\u00e4che in eine gr\u00f6\u00dfere Gr\u00f6\u00dfe mit einer Farbe \u00e4ndert, die f\u00fcr eine Call-to-Action-Schaltfl\u00e4che geeignet ist.<\/p>\n\nZusammenfassung<\/h2>\n