Mastering Angular Components

Component Fundamentals (53:27)

8 tips sul decoratore @Component (26:05)

Creare il progetto Angular, Tailwind e DaisyUI

Work with Components

Content Projection

Output and Event Emitters

Composizione di componenti

Practice

Creare un'applicazione CRUD (40:11)

Descrizione del template HTML

Fixes and Improvements

Source Code & Interactive Demo

Refactoring (38:37)

Error Component

User List Component

User Form Component

Source Code: Error, List e Form components

Move logic to Services

Performance and Change Detection onPush

Zoneless Angular applications

Soluzioni alternative (dalla community)

Reusable Components (2:48:11)

Create an Image Placeholder with Picsum API

Static Maps Component (MapToolkit | GoogleMap)

Title: Typography components

Flex: Layout Component

Flex Item: (HostBinding e Host)

Flex Item: inject the parent component

Button, Button Groups & Button Array: component composition (3 video)

Side Panel: model e 2 ways binding

ngClass vs class: Buttons refactoring

Card: controlled & uncontrolled components

Card: Angular Browser Animations

Card: Compound component pattern con Components & Directives

Weather: side effects & "resource" API (2 video)

TabBar: TypeScript Generics (4 video)

Signal Queries (21:35)

ViewChild, template reference e DOM elements

viewChild, components e template reference variables

viewChild, class name e istanze multiple

viewChildren: selezioni multiple di componenti

contentChildren: creare un componente Accordion riutilizzabile

Dynamic Components (01:08:11)

ngTemplateOutlet: Generic GridList con template dinamico

ngComponentOutlet: caricamento dinamico di componenti

ngComponentOutlet: Creare UI dinamiche a runtime (3 video)

ViewContainerRef & createComponent: Creare UI dinamiche a runtime (2 video)

3rd Party Integration (71:17)

ChartJS: integrazione (3 video)

Leaflet / Map: integrazione (25 min)

ThreeJS: Integrazione

Angular & Storybook (43:05)

Progetto Angular e Componenti

Picsum Component: scrivere una storia per un componente

Custom Documentation con CompoDoc

Weather Component: Application Configuration and Providers

Button Component: template e content projection

Button Group Component: composite components e wrappers

Card Component: output & actions

Condividere la proprietà argTypes tra storie

userEvent & interactions

Scrivere tests con Testing Library and Jest

Component Testing in Cypress (21:40)

Installazione e test di componenti Angular 19+

Cypress Selectors

Test Angular Event Emitter

Test Content Projection

Creare un'applicazione CRUD (40:11)

Creare un'applicazione CRUD (40:11)

Impara ad organizzare le tue view in Container e Presentational components

1 video

v.19

Fabio Biondi

Google Expert | Angular

In questo capitolo utilizziamo le più recenti API del framework per creare un semplice applicazione CRUD in Angular:

Signals: Signal Inputs, Signals Queries, computed, effect e i più recenti linkedSignal.
Comunicazione Lato Server: utilizziamo le nuovissime resource API, introdotte in via sperimentale in Angular v.19
Integrazione Reactive Forms
Control Flow Syntax: applicheremo le più recenti sintassi per migliorare leggibilità e performance.

E molto altro, per garantire che tu abbia una discreta panoramica sulle principali funzionalità offerte dal framework

New

Membership Plan, italian only!

Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!

Send your feedback