Angular is een open source JavaScript framework gebouwd met TypeScript en geoptimaliseerd voor het ontwikkelen van single-page webapplicaties. Het staat bekend om zijn veelzijdigheid, waardoor developers zich kunnen concentreren op features en functionaliteit. Het toevoegen van componentbibliotheken aan de mix voegt een extra laag van efficiëntie toe, waardoor de ontwikkelingsproductiviteit en de algehele kwaliteit van je applicaties verbetert.
Het kiezen van de beste bibliotheek voor je project kan echter moeilijk zijn met zoveel beschikbare opties. Dit artikel onderzoekt enkele van de nuttigste Angular componentbibliotheken, hoe ze werken, en hoe je ze elk in je Angular applicatie kunt integreren.
Waarom een componentenbibliotheek gebruiken?
Of je ze nu zelf bouwt of externe bibliotheken gebruikt, componenten vormen de basis van Angular applicaties. Elk component vertrouwt op een template voor zijn HTML en CSS elementen en TypeScript code die het gedrag ervan regelt.
Het belangrijkste voordeel van componentbibliotheken is dat ze herbruikbare, kant-en-klare UI componenten bieden, waardoor er minder aangepaste code nodig is en developers snel aan de slag kunnen.
Angular’s benadering van componenten kan ook de teamoverschrijdende samenwerking verbeteren tussen programmeurs die TypeScript code schrijven en webdesigners die de HTML voor de templates leveren.
Bibliotheken van componenten worden meestal toegevoegd aan Angular projecten met behulp van de Node.js npm Node Package Manager of met behulp van Angular’s eigen command line interface (CLI).
Eigenschappen van een goede componentenbibliotheek
De componentbibliotheken in onze lijst zijn geselecteerd op basis van verschillende criteria:
- Ze bieden een uitgebreide set UI componenten, waardoor het voor developers gemakkelijk is om snel mooie en functionele applicaties te maken.
- Ze zijn gemakkelijk te gebruiken en integreren met populaire webontwikkelingsframeworks zoals Angular, React en Vue.
- Ze bieden goede documentatie en ondersteuning, zodat developers hulp kunnen krijgen als dat nodig is.
- Ze worden actief onderhouden en bijgewerkt, zodat ze up-to-date blijven met de nieuwste webtechnologieën en beveiligingsnormen.
9 handige Angular componentenbibliotheken
Laten we nu onze keuzes eens beter bekijken.
1. Angular Material
Angular Material is de officiële Angular componentenbibliotheek, die een uitgebreide UI collectie biedt en tegelijkertijd de laatste Angular features en API veranderingen bijhoudt. Het biedt ook ingebouwde toegankelijkheidsondersteuning, waarbij markup wordt gegenereerd om toetsenbordnavigatie mogelijk te maken en hulptechnologieën zoals schermlezers te begeleiden.
Hoe het werkt: Angular Material maakt gebruik van Angular’s ingebouwde directives en diensten om een set datagebonden en high-performance componenten bovenop Angular te bieden, waardoor het eenvoudig is om interactiviteit toe te voegen aan webapplicaties.
Waar het in uitblinkt: Angular Material blinkt uit in het leveren van vooraf gebouwde UI componenten die de richtlijnen van Material Design volgen. Het biedt een set goed ontworpen en aanpasbare UI componenten die gemakkelijk in Angular applicaties kunnen worden geïntegreerd. Deze componenten bevatten navigatiemenu’s, knoppen, formulieren, dialoogvensters en meer.
Als je bijvoorbeeld een knopcomponent aan je applicatie wilt toevoegen, kun je simpelweg de mat-button directive gebruiken en die naar behoefte aanpassen.
Hier is een voorbeeld van een stukje code:
<button mat-button color="primary">Click me!</button>Deze code genereert een knopcomponent met het primaire kleurenschema. Je kunt de knop verder aanpassen door event handlers toe te voegen, de tekst te veranderen en het uiterlijk van het pictogram.
2. NG-Bootstrap
NG-Bootstrap is een open source bibliotheek gebouwd bovenop Bootstrap CSS, die componenten en design patterns biedt waar veel developers al bekend mee zijn. Dit vermindert de leercurve voor nieuwe projecten, waardoor het een betrouwbare keuze is voor het snel en efficiënt bouwen van Angular applicaties.
Hoe het werkt: NG-Bootstrap breidt de mogelijkheden van Bootstrap componenten uit door developers in staat te stellen ze te gebruiken als Angular directives, met two-way databinding en andere Angular specifieke features. Dit maakt het gemakkelijk voor developers om responsieve, mobiel-vriendelijke webapplicaties te maken die naadloos samenwerken met Angular.
Waar het in uitblinkt: Een van de belangrijkste sterke punten van NG-Bootstrap is de ondersteuning van toegankelijkheidsfeatures, waaronder de W3C specificaties voor Accessible Rich Internet Applications (ARIA), waardoor het voor developers gemakkelijker wordt om applicaties te maken die gebruikt kunnen worden door mensen met een handicap. NG-Bootstrap blinkt ook uit op het gebied van modale dialogen. Met de component ng-bootstrap Modal kunnen developers gemakkelijk modale dialogen maken met aanpasbare opties zoals grootte, achtergrond en toetsenbordondersteuning.
Hier is een voorbeeld van hoe je met NG-Bootstrap een eenvoudig popup dialoogvenster kunt maken:
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>
<button class="btn btn-primary" (click)="open(content)">Launch demo modal</button>In dit voorbeeld bevat het ng-template element de content voor het dialoogvenster, inclusief de header, body en footer. Het knopelement aan het eind van het codefragment activeert het openen van de modal wanneer erop geklikt wordt. De methode open() wordt gebruikt om de modal weer te geven en neemt het ng-template element als argument.
3. Clarity
Clarity is een open source bibliotheek die een gedeelde visuele taal gebruikt voor alle componenten om een consistente, intuïtieve UI te bieden. Het is ook uitgebreid gedocumenteerd, met veel handleidingen, tutorials en API referenties, waardoor het gemakkelijk te leren en te gebruiken is.
Hoe het werkt: Het Clarity ontwerpsysteem is gebaseerd op het concept van “kaarten” (cards), die worden gebruikt om gerelateerde content te groeperen. Kaarten worden gebruikt om afzonderlijke stukken inhoud gestructureerd en georganiseerd weer te geven. Clarity biedt een verscheidenheid aan kaartcomponenten die gegevens in verschillende formats kunnen presenteren. Deze kaartcomponenten hebben headers, footers en contentsecties, en kunnen gemakkelijk worden aangepast met verschillende stijlen en thema’s.
De kaarten kunnen ook worden gecombineerd met andere componenten – zoals modals, dropdowns en knoppen – om complexere UI ontwerpen te maken. Het algemene doel van het op kaarten gebaseerde ontwerp is het bieden van een flexibel en modulair systeem om gemakkelijk complexe interfaces te maken.
Waar het in uitblinkt: Clarity’s uitgebreide set formulierbesturingselementen is een duidelijk sterk punt. Deze besturingselementen hebben invoervelden, selectievakjes, keuzerondjes en meer. Clarity biedt ook een reeks gegevensvisualisaties, zoals staafdiagrammen, lijndiagrammen en taartdiagrammen, om gegevens duidelijk en overzichtelijk weer te geven.
Hier volgt een voorbeeld van het gebruik van het Clarity invoerveldcomponent in een HTML formulier:
<clr-input-container>
<label>Username</label>
<input clrInput placeholder="Enter your username">
</clr-input-container>Deze code maakt een formulierinvoerveld met een label en placeholdertekst. De directives clr-input-container en clrInput worden geleverd door de Clarity bibliotheek en zullen het invoerveld dienovereenkomstig stylen.
4. Kendo UI
Kendo UI is een commerciële bibliotheek die gebouwd is met het oog op prestaties, en zorgt voor snelle laadtijden en een soepele gebruikerservaring. Het biedt ook thema’s en stylingopties om het uiterlijk van je applicatie te verbeteren, evenals uitgebreide documentatie en een toegewijd ondersteuningsteam.
Hoe het werkt: Kendo UI gebruikt technieken als virtualisatie en lazy loading om snelle laadtijden en een soepele gebruikerservaring te garanderen. Dit betekent dat applicaties gebouwd met Kendo UI snel en responsief zijn, zelfs bij grote datasets. Kendo UI volgt daarnaast een modulaire architectuur waardoor developers alleen de componenten kunnen gebruiken die ze nodig hebben, waardoor de bibliotheek kleiner wordt en de prestaties verbeteren.
Waar het uitblinkt: Kendo UI is bijzonder geschikt voor grote zakelijke applicaties die uitgebreid gegevensbeheer en complexe gebruikersinteracties vereisen. Zijn rastercomponent, bijvoorbeeld, ondersteunt features als filteren, sorteren en groeperen, waardoor developers grote datasets op een beheersbare manier aan gebruikers kunnen presenteren.
Hier is een voorbeeld van hoe je een eenvoudig Kendo UI raster in HTML kunt maken:
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name" width="200"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="120"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock" width="120"></kendo-grid-column>
</kendo-grid>Deze code toont een Kendo UI raster in je Angular applicatie. Je kunt het raster aanpassen door verschillende configuratie opties door te geven aan de kendo-grid component.
5. PrimeNG
PrimeNG is een open source bibliotheek ontworpen voor gebruiksgemak en aanpassing. Het bevat ook geavanceerde toegankelijkheidsfeatures en ondersteuning voor internationalisatie, waardoor het een goede keuze is voor wereldwijde applicaties.
Hoe het werkt: PrimeNG bibliotheek biedt een set vooraf gebouwde UI componenten die developers gemakkelijk kunnen integreren in hun Angular applicaties. Het gebruikt Angular’s ingebouwde directives en lifecycle hooks om naadloze integratie met het framework te bieden. Het ondersteunt ook verschillende configuratieopties en aanpassingen, zodat developers de componenten kunnen aanpassen aan hun specifieke behoeften.
Waar het in uitblinkt: Een van de belangrijkste features van PrimeNG is de ondersteuning van internationalisatie. De bibliotheek ondersteunt meerdere talen en biedt vertaaldiensten voor de meeste componenten. Dit wordt bereikt door het gebruik van Angular’s lokalisatieframework en berichtenbestanden, die gemakkelijk kunnen worden aangepast en bijgewerkt.
Om internationalisatie in PrimeNG te gebruiken, moet je vertaalbestanden maken voor de talen die je wilt ondersteunen. Deze bestanden moeten vertalingen bevatten voor alle componenten die je in je applicatie wilt gebruiken. Om internationalisatie in PrimeNG in te schakelen, moet je het translate attribuut van een component instellen op true. Het component zal dan de vertaalbestanden gebruiken om de tekst weer te geven in de taal van de keuze van de gebruiker.
Hier is een voorbeeld van het gebruik van de p-calendar component met internationalisatie ondersteuning in PrimeNG:
<p-calendar [(ngModel)]="date" [showIcon]="true" [readonlyInput]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" [locale]="en"></p-calendar>In dit voorbeeld heeft de p-calendar component het translate attribuut ingesteld op true, en het [locale] attribuut is ingesteld op de taalcode voor Engels (en). Dit zorgt ervoor dat de kalender in het Engels wordt weergegeven voor gebruikers die die taal hebben gekozen.
6. Nebular
Nebular is een verzameling van meer dan 40 Angular UI componenten die beschikbaar zijn in vier aanpasbare thema’s. De bibliotheek, gemaakt door webontwikkelingsbedrijf Akveo, wordt ook geleverd met een gebruikersauthenticatie module en een ACL gebaseerde beveiligingsmodule om de toegang tot specifieke resources op een meer gedetailleerde manier te regelen. Akveo kan je ook op weg helpen met je eigen admin dashboardapplicatie met de ngx-admin kit die gebouwd is met Nebular modules.
Hoe het werkt: De UI aanpak van Nebular is gebaseerd op de specificaties van Akveo’s Eva Design System, waarvoor het ook assets levert voor teams waarvan het werk begint met ontwerptools als Sketch of Figma.
Ontwerpers die werken met Nebular’s CSS kunnen over het algemeen semantisch verwijzen naar stylingopties – zoals de kleurvariabelen primary, success, info, warning, en danger. Maar gebruikers kunnen verder gaan dan waar Akveo voor is gemaakt door geavanceerde stylingaanpassingen te importeren als Sass bestanden.
Nebular’s bibliotheek van componenten heeft layouts, kaarten, lijsten, accordeons, navigatiehulpmiddelen, formulierelementen, gegevenstabellen, modals en overlays, plus widgets als spinners, datumkiezers en voortgangsbalken.
De metadata voor een Nebular accordeoncomponent zou er als volgt uit kunnen zien TypeScript:
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'nb-accordion-demo',
templateUrl: './accordion-demo.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccordionDemoComponent {}En het template zou er zo uit kunnen zien:
<nb-accordion>
<nb-accordion-item>
<nb-accordion-item-header>First Item Heading</nb-accordion-item-header>
<nb-accordion-item-body>
Toggled content for First Item.
</nb-accordion-item-body>
</nb-accordion-item>
<nb-accordion-item>
<nb-accordion-item-header>Second Item Heading</nb-accordion-item-header>
<nb-accordion-item-body>
Toggled content for Second Item.
</nb-accordion-item-body>
</nb-accordion-item>
</nb-accordion>Waar het in uitblinkt: De Nebular bibliotheek en de ngx-admin admin dashboardkit zijn gratis te gebruiken, dus dat is een groot pluspunt voor zo’n geavanceerde verzameling tools. De authenticatie- en beveiligingsmodules weerspiegelen Akveo’s focus op deze administratie paneelcomponenten.
Nebular heeft ook sterke ondersteuning voor talen die rechts-naar-links lezen (RTL). Gebruikers zullen CSS opmaak vinden om RTL (en LTR) layouts te ondersteunen, en methoden – zoals getDirection() en setDirection() – om de layoutrichting tijdens de runtime te detecteren en te veranderen.
7. NG-Lightning
NG-Lightning is een interessante toevoeging aan de componentenbibliotheek, omdat het een Angular-achtige implementatie is van het Salesforce Lightning Design System (LDS). Dat systeem biedt HTML en CSS elementen – blauwdrukken – en ontwerprichtlijnen voor Salesforce developers die het Lightning framework van dat platform gebruiken. De belangrijkste elementen van LDS komen terug in deze open source verzameling van Angular widgets, inclusief de HTML en CSS.
Hoe het werkt: NG-Lightning heeft dependencies die het onderscheiden van sommige andere componentenbibliotheken. Behalve dat het afhankelijk is van de officiële Angular Component Dev Kit, linken NG-Lightning applicaties naar dezelfde CSS repositories die Salesforce LDS gebruikt. Die CSS kun je downloaden uit de officiële Salesforce UX repository of koppelen via een CDN.
Toch zal de op TypeScript gebaseerde aanpak voor het bouwen van views bekend zijn bij Angular developers. Dit voorbeeld zou de metadata voor de hierboven getoonde waarschuwingscomponent laten zien:
import { Component } from '@angular/core';
@Component({
selector: 'app-demo-alert-basic',
templateUrl: './basic.html',
})
export class DemoAlertBasic {
showTopAlert = false;
onClose(reason: string) {
console.log(`Closed by ${reason}`);
}
}Het componenttemplate voor dat officiële NG-Lightning voorbeeld is:
<div class="slds-notify_container">
<ngl-alert *ngIf="showTopAlert" variant="warning" iconName="warning" (close)="onClose($event); showTopAlert = false;">
<h2 class="slds-text-heading_small">
Your browser is outdated. Your Salesforce experience may be degraded.
<a href="javascript:void(0);">More Information</a>
</h2>
</ngl-alert>
</div>
<ngl-alert class="slds-theme_alert-texture" variant="offline" iconName="offline" (close)="onClose('click')">
<h2>You are in offline mode.<a href="javascript:void(0);">More Information</a></h2>
</ngl-alert>
<ngl-alert class="slds-m-top_small" variant="error">Your browser is currently not supported.</ngl-alert>
<button class="slds-m-top_medium" type="button" [disabled]="showTopAlert" nglButton (click)="showTopAlert = true">Show alert in container</button>Waar het in uitblinkt: De developers van NG-Lightning, die hun basis hebben in de Salesforce LDS, nemen webtoegankelijkheid serieus. Dynamisch gegenereerde interfaces die het uithangbord zijn van frameworks als Angular kunnen vaak een uitdaging vormen voor eindgebruikers met een visuele of mobiliteitsbeperking. NG-Lightning houdt zich aan de ARIA specificatierichtlijnen van het W3C en genereert webopmaak die ontworpen is om hulptechnologieën zoals schermlezers te ondersteunen.
8. Syncfusion UI
Syncfusion UI is een lichtgewicht, modulaire bibliotheek waarmee developers alleen de noodzakelijke componenten voor hun applicatie kunnen kiezen en de totale omvang van de uiteindelijke bundel kunnen beperken. Dit maakt het gemakkelijk om de bibliotheek te onderhouden, uit te breiden en bij te werken door nieuwe componenten toe te voegen of bestaande te wijzigen zonder de andere te beïnvloeden.
Hoe het werkt: Wanneer een pagina wordt geladen, initialiseert de Syncfusion UI bibliotheek en creëert de benodigde componenten op basis van de opmaak en configuratie opties. Met de gridcomponent bijvoorbeeld kunnen gebruikers gegevens sorteren, filteren en groeperen, terwijl de grafiekcomponent gegevens kan weergeven in verschillende formats, waaronder lijn-, staaf- en taartdiagrammen.
De bibliotheek bevat ook een reeks handige functies en tools die kunnen worden gebruikt om veelvoorkomende taken te vereenvoudigen, zoals gegevensmanipulatie en -validatie. De bibliotheek bevat een gegevensbeheerder die kan worden gebruikt om te werken met complexe gegevensstructuren en een validatie engine die kan worden gebruikt om gebruikersinvoer te valideren.
Waarin het uitblinkt: Syncfusion biedt een robuuste set tools voor aanpassing en thematisering, waarmee developers snel een consistente en professioneel ogende UI kunnen maken. De bibliotheek bevat een krachtige set API’s en events die kunnen worden gebruikt om aangepaste functionaliteit en interactiviteit te creëren, evenals ondersteuning voor populaire gegevensbronnen zoals REST API’s, OData en SignalR.
Hier is een voorbeeld van het opnemen van een Syncfusion gridcomponent in een Angular applicatie:
<ejs-grid [dataSource]="data">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
<e-column field="CustomerID" headerText="Customer Name" width="150"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
</e-columns>
</ejs-grid>Deze code maakt een eenvoudig raster dat gegevens van een gegevensbron weergeeft. De dataSource property wordt ingesteld op de weer te geven gegevens, en het element e-columns wordt gebruikt om de kolommen in het raster te definiëren. Elk e-column element definieert een kolom in het raster, inclusief het weer te geven veld, de headertekst en de kolombreedte. Het voorbeeld demonstreert ook hoe de gegevens in het raster opgemaakt kunnen worden met het format attribuut.
9. Onsen UI
Onsen UI is een populaire open source UI bibliotheek voor het bouwen van hybride en web mobiele applicaties. Het biedt een betere naadloze integratie met populaire frontend frameworks dan andere externe bibliotheken, waardoor het eenvoudig is om hoogwaardige, interactieve UI te maken met minimale inspanning.
Hoe het werkt: Onsen UI is gebaseerd op de Material Design filosofie van Google, die ervoor zorgt dat de UI van de applicatie zowel esthetisch als gebruiksvriendelijk is. Het biedt een uitgebreide set ingebouwde thema’s die op de componenten kunnen worden toegepast om het uiterlijk van de applicatie te verbeteren.
Waar het in uitblinkt: Onsen UI blinkt uit in zijn gebruiksgemak en vermogen om cross-platform applicaties te maken die er uitzien en aanvoelen als native apps. Het biedt een rijke verzameling vooraf ontworpen UI componenten die zijn geoptimaliseerd voor mobiele apparaten en kunnen worden aangepast aan de behoeften van de applicatie. Het bevat ook features als FastClick ondersteuning, die helpt vertragingen in touch events weg te nemen, en lazy loading, die zorgt voor snellere laadtijden van de applicatie.
Hier is een voorbeeld codefragment dat laat zien hoe je een eenvoudige knop maakt met Onsen UI:
<ons-button modifier="large--cta">Click me!</ons-button>Deze code maakt een knop met de tekst “Click me!” en de modifier klasse large--cta, die het uiterlijk van de knop verandert in een groter formaat met een kleur die geschikt is voor een call-to-action knop.
Samenvatting
Componentenbibliotheken zijn nu algemeen aanvaard als standaard werkwijze bij webdevelopment. Componentenbibliotheken hebben Angular geholpen om een van de populairste en meest gebruikte frontend ontwikkelingsframeworks te worden door een handige en efficiënte manier te bieden om UI componenten te ontwikkelen.
De bovenstaande bibliotheken bieden vooraf gebouwde en aanpasbare UI componenten die developers helpen om met minder moeite hoogwaardige en consistente gebruikersinterfaces te maken. Uiteindelijk hangt de keuze van de bibliotheek af van de specifieke behoeften van het project en de voorkeuren van de developer.
Een thuis nodig voor je volgende Angular project? Kinsta’s Applicatie Hosting en Database Hosting platforms zijn oplossingen die klaar zijn om je applicatie aan de wereld te presenteren.
Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.
Laat een reactie achter