37
videos

3
hours

Video Course

Language:

Angular Material & Angular CDK

Un mini corso intensivo su Angular Material, dalle basi a diversi trick avanzati. Aggiornato ad Angular 20.1

In questo corso:

Sfrutta Angular Material e il suo CDK per la creazione di interfacce grafiche in Angular

Impara a creare applicazioni Angular con dialog, modali, popover, tooltip e interazioni utente sofisticate

Crea liste e griglie utilizzando il drag and drop per il loro ordinamento

Crea componenti custom sfruttando gli stili di Material

Impara a creare componenti custom che sfruttano Angular Material e che si integrano con i form tramite l'utilizzo di Control Value Accessor

Gestisci temi e personalizza gli stili dei componenti Material

Questo corso è disponibile con il piano Membership

Presto disponibile

Questo video corso sarà disponibile nei prossimi giorni. Ritorna su questa pagina o iscriviti alla newsletter per sapere quando sarà pubblicato

# Creare Real World Applications

Quando sviluppiamo un software abbiamo spesso la necessità di gestire dialog, modali, drag and drop, popover, tooltip e decine di altre tipologie di componenti che non sono così semplici da realizzare da zero.

Nel mercato ci sono diversi UIKIT per Angular che forniscono decine di componenti e funzionalità pronte all'uso ma Angular Material è uno di quelli che preferisco.

Perché Angular Material?

È sviluppato dal team Angular, quindi sempre allineato alle ultime novità del framework. Questo si traduce in meno breaking changes e tutto ben documentato
Oltre a diversi componenti pronti all'uso che sfruttano Material Design, fornisce moltissime utility e funzionalità headless, senza grafica, come overlay e drag and drop, tanto per citarne un paio, utili per creare componenti custom in modo semplice.

# Introduzione al corso

Angular Material risulta quindi uno strumento validissimo anche se la vostra applicazione non implementa Material Design, oppure, se preferite usare un altro framework CSS o crearvi tutta la UI da zero.

Guarda il video per un introduzione più esaustiva:

# Angular Material

Angular Material e Angular CDK (Component Dev Kit) sono due librerie strettamente correlate ma con due scopi differenti.

# UI Kit

Un kit di componenti pronti all'uso per creare applicazioni front-end con un'interfaccia utente coerente e professionale, seguendo le linee guida di Material Design.

Fornisce un set completo di componenti UI pre-costruiti e pronti all'uso

Fornisce componenti come bottoni, card, menu, form, ecc

Basato su Material Design. Ogni componente è stilizzato secondo le linee guida di Google

Semplice personalizzazione tramite CSS (o override di proprietà), ma meno flessibile rispetto a costruire componenti da zero

Si basa sull'Angular CDK per la sua funzionalità interna. Non può esistere senza di esso

# Angular CDK

Un set di utility per creare componenti personalizzati, complessi e per aggiungere facilmente funzionalità come overlay (dialog, popover e modali), drag and drop, "copy to clipboard", "portali" e altro ancora:

Fornisce strumenti a basso livello e primitive per costruire componenti UI

Si occupa di concetti come overlay, popover, drag and drop, accessibilità, ecc

Agnostico al design. Non impone uno stile visivo. I componenti costruiti con il CDK possono avere qualsiasi aspetto

Richiede un lavoro manuale per lo styling e il design ma offre la massima flessibilità

Può essere usato da solo, senza Angular Material

# Angular Material

1
Angular Material e Tailwind
Nel primo capitolo del video corso vedremo come installare, configurare e creare progetti Zoneless con Angular v.20, Angular Material e Tailwind
2
Material Components
Impariamo ad utilizzare la documentazione e ad utilizzare alcuni dei componenti fondamentali di Angular Material tra cui Card, TabBar, Progress, Menu, Toolbar, Form Input, Select, Radio e Checkbox
3
Progetto
Creiamo un progetto demo in cui utilizziamo diverse funzionalità fornite da Angular Material e dal suo CDK: creazione dialog, modali, popover, tooltip, notifications, drag and drop e molto altro.

# CDK Utilities

1
Drag And Drop
Impariamo a creare liste e griglie "draggabili" che permettono l'ordinamento di elementi in modo molto agevole tramite "trascinamenti"
2
Overlay
Creiamo menu e popover personalizzati con funzionalità interattive.
3
Altre funzionalità del CDK
Tooltip, Notifications, Copy To Clipboard, Platform e molte altre utility...

# Creare una Dashboard dinamica

Creiamo una dashboard dinamica in cui utilizziamo molti componenti di Angular Material e funzionalità del CDK. Sfrutteremo, inoltre, molte delle più recenti API di Angular v.20.

# Personalizzazioni

1
Styling
Personalizzazione dei componenti Material utilizzando SCSS, variabili, funzionalità di override e diversi altri trick.
2
Theming
Creare temi e palette di colori personalizzate
3
Custom Components con Layout Material
Creiamo componenti personalizzati che ereditano le classi CSS e gli stili di Material allo scopo di creare componenti custom dal layout consistente al tema in uso

# Tips'n'Tricks

1
Reusable Components
Crea componenti custom riutilizzabili che sfruttano funzionalità di Angular Material e del CDK
2
Form e Control Value Accessor
Creiamo componenti custom CVA (Control Value Accessor) che si integrano perfettamente con Reactive e Template Driven Forms.
3
Aggiornato ad Angular v.20
Diversi tip'n'tricks e consigli per lo sviluppo di progetti Angular v.20 Zoneless, sfruttando le più recenti API, dai signal ad httpResource

# A Chi è Rivolto

Sviluppatori FrontEnd che già hanno una minima conoscenza di Angular.

# Requisiti

Per comprendere questo corso è necessario che tu abbia già una conoscenza minima su:

signal, computed, effect e preferibilmente Signal input, model e output
Template dinamici: @for, @if, interpolazione {{ value() }}, ...
Dependency Injection
Utilizzo del servizio httpClient
Conoscenza base di Template Driven Forms (ngModel) e Reactive Forms (FormControl)