FabioBiondi.
0
CatalogoInfoIl tuo programma
← tutti i corsi
// corso · 2026angular

Angular UI: components, directives & pipes

API, pattern e strategie per la creazione di componenti, pipe e direttive custom riutilizzabili in Angular moderno.

Durata
16h
Sessioni
4 da 4h
Livello
Avanzato
[ descrizione ]

Di cosa parla
questo corso.

Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.

§01

INTRODUZIONE

Un corso intensivo su Angular in cui si analizzano metodologie, API e pattern offerti dal framework, spesso poco noti (ma utilissimi), allo scopo di sfruttarne il massimo potenziale soprattutto per quanto concerne lo sviluppo di user interface complesse, scalabili e testabili:
  • • componenti riutilizzabili e componibili
  • • custom pipe
  • • custom attribute e structural directives

Non solo creeremo decine di componenti, direttive e pipes (di tipo standalone) ma avremo modo di analizzare più in dettaglio il ciclo di vita dei componenti, l'utilizzo di diversi decoratori meno noti, integrare librerie JavaScript di terze parti, creare direttive per manipolare il DOM, gestire autenticazione e ruoli utenti, ottimizzare le performance e molto altro.
§02

OBIETTIVO DEL CORSO

L'obiettivo non è solo quello di apprendere differenti tecniche per la creazione di componenti, direttive e pipe riutilizzabili, ma anche quello di approfondire molte funzionalità offerte dal framework, comprendere il ciclo di vita dei componenti, sfruttare le più recenti API (introdotte dalla 17.1 in poi) e, in sostanza, acquisire più consapevolezza sulle potenzialità del framework.

In questo modo, nel momento in cui sarà necessario risolvere un problema/task, si avranno a disposizione molte più possibilità e potrete decidere con cognizione di causa quale sia la strategia più adeguata da adottare in un determinato contesto.
§03

REQUISITI

Conoscere le fondamenta del framework e/o aver partecipato ai corsi Angular Core Concepts e Mastering Angular. E’ preferibile aver già creato in precedenza progetti Angular per trarre il massimo beneficio dal corso e apprezzarne i contenuti.
[ programma ]

Cosa vediamo,
in dettaglio.

Il programma viene rifinito con il team prima del corso, in base a stack, obiettivi e livello. Quella che vedi è la base: possiamo accelerare o approfondire dove serve e, se necessario, modificare il programma.
La maggior parte del corso è live-coding, con esempi pratici.

5 moduli · 38 argomenti
  1. M01

    Componenti riutilizzabili (UIKit)

    • Creazione di componenti riuzilizzabili per esplorare differenti tecniche, API e pattern
    • Typography, Card, Collapsable, Side Panel, TimeLine
    • Grid e layout, TabBar, Accordion, Dropdown
    • Integrazione 3rd party: Leaflet/Google Maps, ChartJS
  2. M02

    API, tecniche, pattern

    • Styling e le diverse modalità di ViewEncapsulation
    • Approfondimento su ng-content e projection patterns
    • Signal Inputs, Computed Signals, model, effects
    • I metodi del ciclo di vita Ciclo di vita dei componenti
    • stateless vs stateful components
    • Dependency Injection, configurazione provider nei componenti
    • output e RxJS
    • Componenti che sfruttano signal, resource e httpResource
    • Proprietà host, stateful vs stateless
    • Signal Queries (v.17.2): viewChildren" vs contentChildren
    • Immutabilità, ChangeDetection, DI
  3. M03

    Attribute Custom Directives

    • Creare direttive per la manipolazione del DOM
    • Manipolazione DOM con host e @HostBinding decorator
    • Manipolazione DOM con ElementRef e Renderer2
    • Gestione eventi con @HostListener decorator
    • Directives e Signal Inputs
    • Structural directives VS attribute directives
    • Il ciclo di vita di una direttiva
    • Creare direttive “non visuali”
    • Gestione layout responsive con le direttive
    • Integrazione 3rd party API
  4. M04

    Structural Custom Directives

    • Direttive strutturali: utilizzo del simbolo “asterisk” *
    • Utilizzo delle direttive per gestione sicurezza e ruoli utenti
    • DOM: ElementRef vs TemplateRef
    • Usare le direttive per creare istanze a runtime di components
    • ViewContainerRef, createEmbeddedView e gestione ng-template
    • Creare custom *repeater (creare un *ngFor custom)
    • Sfruttare le direttive per gestire autenticazione e ruolo utenti
    • Utilizzare RxJS e Observable all’interno di direttive
    • Utilizzare i Signal all’interno di direttive
  5. M05

    Manipolazione DOM in Angular

    • DOM e local template reference variables
    • ElementRef and DOM references
    • signal queries: viewChild e model (v.17.2)
    • Il servizio ElementRef e nativeElement
[ corsi propedeutici ]

Prima di questo corso...

[ corsi correlati ]

Potrebbero piacerti anche...

Pronto a portarlo nel tuo team?

Contattami →