Librerie e toolkit per creare interfacce utente con Angular

Siamo arrivati al termine di questa guida dopo un lungo viaggio partito dai fondamentali fino a sviluppare strategie e pattern di implementazione complessi. Concludiamo il nostro viaggio con una panoramica sulle più popolari librerie di componenti grafici (ma anche qualcosina di più!)

Cdk

Il Component Development Kit (CDK) è un set di behavior primitives (primitive di comportamento) per costruire componenti senza un tema grafico preimpostato; possiamo usarlo per implementare comportamenti avanzati ma molto comuni come:

• finestre modali (dialog),
• trascinamento (drag & drop),
• virtual scrolling

..e molte altre cose! L’Angular CDK contiene tutti i componenti e direttive headless (cioè senza una UI stilizzata) che stanno alla base di Angular Material (che vediamo a breve), ma lascia a noi la libertà su come implementarne l’estetica.

Angular Material

Angular Material è una libreria sviluppata dallo stesso team di Angular, proponendosi come il design system ufficiale, costruito ad hoc per questo framework. Ovviamente lo stile grafico implementato è quello Material, sviluppato proprio in casa Google e impiegato per le applicazioni della G Suite, ma anche come tema grafico predefinito per le applicazioni native Android.

Questo toolkit oltre ad essere ricco di funzionalità utili è dunque particolarmente adatto se vogliamo dare alla nostra web app un look simil-nativo in ambito Android.

Bootstrap

Bootsrap è la libreria HTML, CSS e JavaScript più famosa al mondo e fornisce una ampia varietà di componenti funzionali e pre-stilizzati per semplificare e velocizzare lo sviluppo web. Supporta moltissimi temi grafici pre-fabbricati ed è anche completamente customizzabile.

Il modo più facile per integrare bootstrap in un’applicazione Angular è installango la libreria dedicata ng-bootstrap.

Se vuoi approfondire, abbiamo preparato per te una guida a Boostrap in italiano!

Tailwind

Avevamo già parlato nel nostro blog di Tailwind  CSS: è un framework CSS in rapida ascesa negli ultimi anni. Purtroppo non esiste una libreria di componenti specificamente per Angular, ma è possibile includerlo nel nostro progetto e utilizzarlo nei template dei nostri componenti attraverso le classi CSS che espone. Sul loro sito è disponibile una guida per integrare e usare Tailwind in un progetto Angular.

Per renderti le cose più semplici, ecco i link utili:

• Link ai  componenti 
• Link integrazione Angular

Kendo UI

Kendo UI è una libreria di componenti funzionali pre-stilizzati con tre opzioni di design predefinite: standard, Material e Bootstrap; è anche possibile implementare uno stile grafico personalizzato.

Per utilizzare questa libreria è necessario, però, acquistare una licenza.

Ora hai gli strumenti per iniziare (o continuare) a costruire le tue applicazioni in Angular con maggiore consapevolezza e padronanza. Il passo successivo? Sperimentare, creare e contribuire.

Buon codice, e… buon viaggio nel mondo di Angular!