Angular Components

Er zijn een aantal component-libraries die voor Angular veel worden gebruikt. Een overzicht om te helpen bij een keuze, of ter oriëntatie.

Material2

Dit is de officiele component-library die Material Design voor Angular implementeert. De library is gebouwd met Angular en Typescript. De UI componenten dienen als voorbeeld om te tonen hoe goede Angular code te schrijven.

De website van Material2 is goed voorzien van documentatie. Een handige kop is gepubliceerd als “Guides”. Met daarin de werkwijze voor

  • “Getting started”, hierin wordt uitgelegd hoe de library te installeren met NPM of Yarn
  • Schematics, deze helpen bij het configureren van een project waarin Material2 wordt gebruikt.
  • Theming Angular. Een thema (theme) is een set van kleuren en fonts gebaseerd op de Material Design Spec
  • Theming your own components, hiervoor wordt gebruik gemaakt van SASS
  • Angular Material typography, Typography maakt tekst leesbaar en aantrekkelijk. Angular’s typography is gebaseerd op de Material Design Spec
  • Customizing Angular Material component styles, er zijn 3 facetten om rekening mee te houden wanneer een Angular component te stylen: encapsulation, selector specify en component location.
  • Zelf form-velden creëren.

NGX Bootstrap / NG Bootstrap / Bootstrap

Welke bootstrap te gebruiken? De drie producten lijken in een soort onderlinge concurrentie. In elk geval kan men zeggen dat de originele Bootstrap afhankelijk is van jQuery, er vindt dus DOM manipulatie plaats buiten Angular om. Dat is extra complex, en moet met voorzichtigheid worden gebruikt. Toch wordt deze library veel gebruikt, maar dat zal ook met installed base te maken hebben. Ngx-bootstrap (Angular 2+) ondersteunt bootstrap 3 en bootstrap 4, terwijl ng-bootstrap alleen bootstrap 4 ondersteunt. Mocht men dus ondersteuning willen voor bootstrap 3 elementen, en geen installed base moeten onderhouden, dan lijkt ngx-bootstrap de beste keuze. Echter ngx-bootstrap heeft wel de bootstrap.min.css file als afhankelijkheid, en voor dat doel moet dus ook bootstrap worden geïnstalleerd. Ng-bootstrap is heel expliciet volledig onafhankelijk van enige bootstrap installatie. Het is een doel van de ontwikkelaars. Dus als men geen bootstrap 3 elementen wil, en als men geen oude installed base hoeft te onderhouden, dan is ng-bootstrap (alleen Angular 5+) de beste keuze. Simpel, eenduidig, goed gedocumenteerd en goed onderhouden.

Prime NG

Deze zeer uitgebreide componenten library bevat vele tientallen componenten. Er zijn ook componenten die andere libraries niet hebben, en dat maakt het speciaal. Ik noem maar een voorbeeld: de codehighlighter (zie afbeelding). De library is ontwikkeld door PrimeTek Informatics, een in Turkije gevestigd bedrijf naast universiteitsgebouwen van Ankara. Het bedrijf is gespecialiseerd in open source libraries. PrimeNG wordt gebruikt door Volkswagen, Ford, Lufthansa, ebay, dat zegt wel iets over schaalbaarheid en performance.

Onsen UI

Onsen UI is een populaire library voor hybride en mobile web-apps voor Android en iOS. Onsen UI is een eigenzinnig buitenbeentje van goede kwaliteit en beschikbaar voor meerdere platformen, zowel tijdens ontwikkeling als tijdens gebruik. Een grote varieteit aan UI componenten geschikt voor mobiele apps. Tabs, menu’s, navigatie, lijsten, formulieren en veel meer. Ze zijn allemaal voorzien van iOS en Android Material design support, en de stijl past zich automatisch aan, aan de app, gebaseerd op het platform. Binnen dezelfde code is het mogelijk om iOS en Android te ondersteunen.

Vaadin Components

Vaadin Components vult de kloof tussen Angular en Polymer. De Vaadin componenten zijn geïnspireerd door Material en dienen voor mobile en desktop. De elementen zijn verwerkt in verschillende repos.

NG-ZORRO

NG-ZORRO is in Typescript geschreven, de componenten vormen een Angular implementatie van het befaamde Chinese Ant-Design (waarmee Alibaba is gecreeerd.)

NG-Lightning

Angular componenten die gebouwd zijn voor het Saleforce Lightning Design System. De componenten zijn stateless en vertrouwen op hun input-eigenschappen. Daardoor zijn ze goed presterend en erg flexibel.

NG-Semantic-UI

De bouwblokken van Semantic-UI voor Angular. Het zijn 27 componenten.

Clarity

Clarity is een open source design systeem ontwikkeld door VMware. Het systeem brengt UX ontwikkelrichtlijnen en een html/css framework samen met Angular componenten. Het bestaat uit een rijke set data gebonden componenten on top van Angular.

Welke wordt het meeste gebruikt?

Duidelijk is dat Angular-material met grote overmacht wint. Dat lijkt mij een goede reden om daarvoor te kiezen. Er is veel kennis en veel ondersteuning op Stackoverflow. NG-bootstrap is echter een sterke tweede. Hoewel NG-Zorro veel minder wordt gebruikt, heeft het zijn schaalbaarheid wel goed bewezen. Het zou best wel kunnen dat deze de nieuwe hit met stip gaat worden.