Slide a supporto del breve corso di introduzione al mondo Angular 2+ tenuto da Valerio Radice (aka valix85) persso Nextre Engineering s.r.l. di Milano

1. Introduzione ad
Angular 7/8
Valerio Radice - 2019
Nextre Engineering S.R.L.

2. Valerio Radice
WEB DEVELOPER & TEACHER
@ Nextre Engineering S.r.l.
valerio.radice@nextre.it
https://github.com/valix85
https://it.linkedin.com/in/valix85/it

3. Pre-requisiti
● Conoscenza del linguaggio HTML
● Conoscenza del linguaggio CSS
● Conoscenza base di JavaScript
Conoscenze opzionali ma consigliate
● TypeScript
● ECMAScript

4. Risorse utili
● https://www.typescriptlang.org/play/index.html
● https://babeljs.io/repl
● https://angular.io/docs
● https://web.dev/angular
● https://ng-girls.gitbook.io/todo-list-tutorial/
● https://www.mrwebmaster.it/javascript/guida-angular/
● https://codecraft.tv/courses/angular/
● https://scrimba.com/g/gyourfirstangularapp
● https://www.freecodecamp.org/news/want-to-learn-angular-heres-our-free-33-
part-course-by-dan-wahlin-fc2ff27ab451/

5. IDE: VS CODE
Visual Studio Code scaricabile da:
● https://code.visualstudio.com/
Estensioni consigliate:
Angular Snippets di John Papa
● https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2

6. NodeJs e NPM
Installare nodeJs per poter usare npm ed installare angular-cli.
https://nodejs.org/it/
eseguire nel prompt il comando node -v per verificare la versione installata
Per installare angular-cli :
https://cli.angular.io/

7. Il Progetto
Il corso terrà come linea guida la creazione di un’interfaccia per la gestione dei film.
Il link al repository di GitHub è:
https://github.com/valix85/corso-angular8-videoteca/tree/master
Le branch denominate “step...” andranno a crescere, dalle basi del progetto alle
implementazioni più evolute.

8. Svolgimento
Durante il corso si affronteranno:
- le basi del linguaggio,
- installazione dell’ambiente di sviluppo
- l’uso di angular cli
- organizzazione di un progetto e i principali file
- dependency injection
- la filosofia a componenti, decorator di input e output
- principali direttive strutturali e non, pipe, template references
- il model, two e one way binding, gli eventi
- lo sviluppo di una SPA
- il routing
- chiamate http a servizi REST

9. Avviare un nuovo progetto
Dalla console spostarsi nella cartella in cui volete creare il nuovo progetto e
lanciare il comando:
ng new NomeApp --skipTests=true --prefix=nxt
--prefix permette di cambiare il prefisso standard dei vostri componenti
--skipTests evita la generazione dei file .spec.ts
Maggiori dettagli a: https://angular.io/cli/new

10. Contenuto del progetto
package.json indica che si tratta di un progetto basato su
nodeJs, contiene le dipendenze e i comandi (script) che si
possono lanciare con npm
cambiare lo script di start con “ng serve -o” per aprire
automaticamente il browser una volta lanciato l’applicativo
con “npm start”

11. Contenuto del progetto
angular.json (o il vecchio angular-cli.json) indica che si tratta
di un progetto contenente il framework Angular. Questo file
permette alla console di angular di poterlo riconoscere e
funzionare. In esso sono contenute informazioni come il
prefix, la cartella di sorgente (src), il formato del codice in
output, i file da includere e in quale cartella (assets), gli stili
css, eventuali script e molto altro ancora.
cambiare lo script di serve aggiungendo tra le options il
valore “open”:true per aprire automaticamente il browser
una volta lanciato l’applicativo con “ng serve”

12. La cartella src
Nella cartella di src si trova il codice sorgente del nostro
applicativo, al suo interno vi è un file index.html, che conterrà la
prima pagina html la quale avvierà il progetto angular grazie alla
presenza in esso del principale tag root dell’applicativo, vi è
presente uno stile css globale (style.css), la favicon.ico, la
cartella assets per tutti i file statici da linkare nel progetto e la
cartella app che conterrà i sorgenti di tutti i componenti del
nostro applicativo.
Il file index non contiene ora alcun css o script, saranno aggiunti
automaticamente in fase di build del progetto.

13. La cartella src/app
Qui è presente il file app.module.ts , primo file che usa Angular
per lanciare l’intero progetto. Ogni app Angular ha almeno un
modulo e un componente.
Vi è presente il principale componente, app.component.ts, con
il suo template grafico e il css. E possibile generare
componenti che integrano al loro interno
(--inlineTemplate=true) il template HTML e lo stile CSS
(--inlineStyle=true) evitando di avere troppi file a
discapito dell’ordine, ma queste sono scelte progettuali.
Il file app-routing.module.ts conterrà l’elenco delle path del
nostro applicativo (vedremo poi).
Maggiori info a: https://angular.io/guide/bootstrapping

14. app.module.ts
Qui è presente il file app.module.ts ,
primo file che usa Angular per lanciare
l’intero progetto. Contiene un
decoratore @NgModule che accetta un
oggetto. Come si vede all’interno del
nodo bootstrap è presente
AppComponent, il primo componente
che verrà invocato all’avvio.
I componenti che si creano vanno
importati e dichiarati nel nodo
declarations.

15. Esercizio 1
Trovare le funzioni (a cosa servono) dei nodi declarations, imports, providers e
bootstrap nella dichiarazione di un modulo.
@NgModule({
declarations: [ ??? ],
imports: [ ??? ],
providers: [ ??? ],
bootstrap: [ ??? ]
})
export class AppModule { }

17. app.component.ts
Questo file è il principale file per
dichiarare un componente. Usa il
decoratore @Component, importato
da @angular/core (in testa al file).
In esso sono contenute informazioni
riguardo il suo selettore ( selector ),
alla template da usare e dove
trovarla ( template o templateUrl ) e
gli eventuali stili css ( styleUrls o
style: [ ] )

18. app.component.ts
Ogni componente esporta una classe
che può contenere metodi e funzioni
(cosa fa un componente), può
contenere delle informazioni proprie
al suo interno (in questo caso titolo),
potrà ricevere in input dei valori, con
il decoratore @Input, o emettere
eventi in output col decoratore
@Output, usare dei servizi e molto
altro.

19. Componenti
In angular un componente e un blocco, contenitore che ha una propria vita. Ogni
componente può essere riutilizzato e dovrebbe essere riutilizzabile. Questo vuol
dire che ogni volta che inseriamo un componente nella pagina esso avrà una
propria istanza per quanto riguarda le variabili interne che userà.
“... Ciascun componente rappresenta un'entità configurabile e personalizzabile e
può essere inserito in altri componenti. Un componente può quindi avere dei
componenti discendenti a cui passare delle informazioni, viceversa questi ultimi
possono notificare il componente genitore se qualche proprietà in essi contenuta
ha subito delle modifiche. ...“
Fonte: https://www.mrwebmaster.it/javascript/componente-angular-come-crearne_12727.html

20. Componenti
Per generare un nuovo componente in un progetto angular si sfrutta la angular cli
attraverso il parametro generate ( g ):
ng generate component NomeComponente
oppure
ng g c NomeComponente
oppure
ng g c sottocartella/NomeComponente
Verranno creati i file necessari al componente per funzionare.
<nomeComponente>.component.ts è uno standard
maggiori dettagli a: https://angular.io/cli/generate#component

21. Componenti: ciclo di vita
Tutti i componenti hanno un ciclo di vita, dalla creazione alla loro distruzione,
angular ne controlla ogni momento. Per prima cosa ogni volta che inseriamo un
componente in una template html, angular richiama il costruttore javascript della
classe, per avere una nuova istanza, e subito dopo, se implementato, si richiama il
metodo NgOnInit().
Altri metodi vengono invocati ad esempio al cambio dello stato interno delle
variabili, dopo che la template è stata aggiornata, al richiamo della distruzione di un
componente e moto altro.
Maggiori dettagli a: https://italiancoders.it/ciclo-di-vita-di-un-componente-angular/

22. {{ interpolazione }}
In Angular è possibile utilizzare una variabile presente nel modello direttamente nel
template grazie al meccanismo dell’interpolazione, ovvero la scrittura nel template
della variabile tra le doppie parentesi graffe:
{{ nomeVariaible }}
Ma non solo, all’interno delle doppie parentesi graffe è possibile inserire del codice
che dovrà essere risolto prima di essere stampato a schermo, oppure usare delle
pipe (vedremo più avanti) per formattare l’output.
maggiori dettagli a: https://www.html.it/pag/60029/template-e-data-binding/

23. Le parentesi quadre [ ]
Un attributo tra parentesi quadre [ ] indica che il risultato dell’espressione
assegnata all’attributo deve essere mappata alla corrispondente proprietà del
componente o dell’elemento sottostante:
<articolo [articolo]="myArticolo"></articolo>
Rappresenta l’approccio standard per passare dati ad un componente. Sono una
semplificazione della sintassi bind-proprietà
<img [src]="getImg()"/> <===> <img bind-src="getImg()"/>
maggiori dettagli a: https://www.html.it/pag/60029/template-e-data-binding/

24. Le parentesi tonde ( )
Un attributo tra parentesi tonde ( ) indica che l’espressione assegnata all’attributo
deve essere eseguita al verificarsi dell’evento corrispondente
<button (click)="like()" >Mi piace</button>
In corrispondenza del verificarsi dell’evento click sarà eseguito il metodo like().
Angular crea un gestore dell’evento che si ascolta tra parentesi. Per gli eventi
standard non è più necessario usare il prefisso “on”.
on-click <===> onClick <===> (click)
maggiori dettagli a: https://www.html.it/pag/60029/template-e-data-binding/

25. Attributo VS proprietà
Un attributo è il mezzo sintattico che ci consente di passare un valore ad un
elemento HTML. Il valore assegnato ad un attributo è sempre di tipo stringa.
Una proprietà è invece relativa all’oggetto del DOM sottostante all’elemento HTML
e può essere di tipo diverso, esattamente come ogni proprietà di un oggetto
JavaScript.
In genere ad ogni attributo HTML corrisponde una proprietà dell’oggetto del DOM.

26. Esempio
All’attributo src dell’elemento HTML <img> corrisponde l’omonima proprietà
dell’oggetto HTMLImageElement. Quindi, se abbiamo il seguente markup:
<img src="images/myPhoto123.jpg"/>
il valore "images/myPhoto123.jpg" si rifletterà sulla corrispondente proprietà src
dell’oggetto HTMLImageElement.
Supponiamo invece di voler fare in modo che l’immagine da assegnare all’attributo
src sia dinamica e possa dipendere da una elaborazione, come ad esempio dal
risultato di una funzione.

27. Esempio
Se proviamo a scrivere
<img src="getImg()" />
otteniamo il fallimento del caricamento dell’immagine; dal momento che un
attributo accetta soltanto valori di tipo stringa, il valore che sarà assegnato alla
proprietà src dell’oggetto HTMLImageElement corrispondente sarà la stringa
"getImg()", che ovviamente non è il nome dell’immagine da visualizzare.

28. Esempio
Per risolvere il problema, in Angular 2+ è sufficiente racchiudere l’attributo src in
parentesi quadre:
<img [src]="getImg()" />
Ciò farà si che la stringa "getImg()" venga prima valutata da Angular , il risultato
verrà assegnato alla proprietà src dell’ oggetto HTMLImageElement
corrispondente. Ciò permette una grande dinamicità all’HTML.

29. Modello Dati
Spesso è necessario realizzare strutture dati ad hoc per
rappresentare oggetti del nostro dominio applicativo. Per
esempio possiamo modellare un oggetto Todo che ha
come attributi un id, un’etichetta, una quantità e un
attributo booleano complete.
Per farlo si può usare o una classe o un’interfaccia di
es6.
Si crea quindi un file che esporta la classe di riferimento
e la si importa in ogni componente che necessita di
conoscerlo.

30. Mock
Dato un modello spesso è utile testare
dei dati di prova all’interno
dell’applicativo, a tale scopo si provano
varie istanze dei nostri modelli, creando
dati ad hoc, detti mock. Per farlo basta
creare un file che esporta tale collezione
di dato e di norma ha il nome del
modello con suffisso .mock.ts. Questi
dati di prova saranno importati in ogni
componente che dovrà usarli.

31. Direttive: Pipe |
Il simbolo | indicata una direttiva di formattazione/trasformazione detta pipe, prende
in ingresso un oggetto e applica una logica. Una pipe è una direttiva che può
essere sfruttata all’interno del template, di norma per formattare meglio un dato.
Una pipe può essere concatenata ad un’altra, pertanto il risultato della prima
trasformazione verrà usato come input per la pipe successiva. Alcune pipe possono
avere in ingresso degli attributi per modificarne il comportamento. Esempio in
una template:
{{ 1234.56 | currency: 'USD' | lowercase }}
maggiori dettagli a: https://angular.io/guide/pipes
https://codecraft.tv/courses/angular/pipes/overview/

32. Direttive: JSON Pipe
Una pipe molto utile per vedere il contenuto di un oggetto è la json pipe. Dato in
ingresso un Object/Array mi formatta il suo contenuto. Consiglio di usarla all’interno
di un tag <pre>
esempio in una template:
<pre>{{ todo | json }}</pre>
maggiori dettagli a: https://angular.io/api/common/JsonPipe

33. Direttive: decimal e currency Pipe
Usata per formattare un numero seguendo un certo pattern. Dato un numero
formattarlo con almeno un numero intero, dopo la virgola almeno un decimale e
massimo 2 decimali, il valore sarà arrotondato di conseguenza.
Esempio in una template:
<pre>{{film.prezzo | number: '1.1-2' }}</span> €</pre>
maggiori dettagli a:
https://angular.io/api/common/DecimalPipe
https://angular.io/api/common/CurrencyPipe
https://alligator.io/angular/built-in-pipes-angular/

34. Direttive: Splice
Usata per ottenere una sottostringa di lunghezza determinata, per esempio dal
carattere in posizione 0 al carattere in posizione 15:
<pre>{{film.descrizione | slice:0:15 }}</span> €</pre>
Ma può essere usato anche per estrarre un sottoinsieme di elementi in una lista:
<li *ngFor="let item of list | slice:0:10; let i=index">{{item.text}}</li>
maggiori dettagli a: https://angular.io/api/common/SlicePipe

35. Direttive: TitleCase, LowerCase, UpperCase
TitleCase: usata per ottenere una stringa capitalizzata:
<p>{{'tHIs is mIXeD CaSe' | titlecase}}</p> <!-- "This Is Mixed Case" -->
LowerCase: usata per avere una stringa tutta in minuscolo
<p>{{'tHIs is mIXeD CaSe' | lowercase}}</p> <!-- "this is mixed case" -->
UpperCase: usata per avere una stringa tutta in maiuscolo
<p>{{'tHIs is mIXeD CaSe' | uppercase}}</p> <!-- "THIS IS MIXED CASE" -->
maggiori dettagli a: https://angular.io/api/common/TitleCasePipe
https://angular.io/api/common/LowerCasePipe
https://angular.io/api/common/UpperCasePipe

36. Direttive strutturali
Le direttive strutturali sono direttive che si applicano su tag del template per
garantire un certo comportamento. Esse differiscono da altre per la presenza di un
* iniziale (*ngIf , *ngFor, *ngSwitchCase)
Non è possibile applicare più direttive strutturali sullo stesso elemento/tag. Queste
direttive sono in grado di manipolare il DOM creando/aggiungendo/rimuovendo
degli elementi.
maggiori dettagli a:
https://angular.io/guide/structural-directives
https://www.mrwebmaster.it/javascript/direttive-predefinite-angular_12752.html

37. *NgIf
Direttiva strutturale, valutata nel contesto di Angular, in grado di verificare una
condizione booleana, se soddisfatta l’elemento su cui è applicata verrà inserito nel
DOM, altrimenti verrà rimosso.
Ad ogni cambiamento nel modello essa viene rivalutata e il DOM ridisegnato di
conseguenza se necessario. Meccanismi di ottimizzazione fanno si che venga
rivalutata solo al cambio delle variabili coinvolte.
<span *ngIf="film.regista.length>0" >
Un film di {{film.regista}}
</span>
maggiori dettagli a: https://angular.io/api/common/NgIf

38. *NgIf-Else
Direttiva strutturale, tramite una reference variable è possibile scegliere quale parte
di template deve essere mostrata nel caso in cui l’if risulti falso
<span *ngIf="film.regista.length>0; else box1" >
Un film di {{film.regista}}
</span>
<ng-template #box1>
<p>Regista sconosciuto</p>
</ng-template
maggiori dettagli a: https://angular.io/api/common/NgIf

39. *ngFor
Direttiva strutturale per ciclare gli elementi, presenti nel modello/controller, in fase
di rappresentazione (view). Oltre al singolo elemento di un insieme e possibile
ottenere l’indice del ciclo, il primo, l’ultimo, se l’elemento ha indice pari o dispari.
<li *ngFor="let film of films; let idx = index">{{film |
json}}</li>
<li *ngFor="let film of films; index as idx">{{film |
json}}</li>
maggiori dettagli a: https://angular.io/api/common/NgForOf

40. Direttive attributi
A differenza delle direttive strutturali, le direttive a livello di attributo possono
essere applicate in contemporanea ad altre direttive. Esse permettono di
modificare l’aspetto e/o il comportamento di un componente.
Tali direttive sono applicate come un normale attributo HTML ma il valore è il
risultato di un’espressione valutata nel contesto di Angular.
Tra le più importanti si trovano: ngClass, ngSwitch, ngStyle...
Le direttive attributi possono essere inserite in contemporanea a una direttiva
strutturale.

41. ngClass
ngClass permette di aggiungere o rimuovere classi CSS da un elemento
dinamicamente. Quando necessitiamo di lavorare con più classi CSS
contemporaneamente, la direttiva NgClass è tuttavia il modo migliore di farlo. Ci
permette di usare un oggetto del ciclo di vita del componente e su di esso valutare
le nostre condizioni logiche e se esse risultano vere la/le classi verranno
assegnate, nel momento in cui risulteranno false tali classi verranno rimosse.
[ngClass]="{'rosso bold':azione.qta>2, 'blu':azione.qta<=2,
'stroke':azione.complete}"
[ngClass]="azione.qta>1?'rosso bold':'blu'"
maggiori dettagli a: https://angular.io/api/common/NgClass

42. ngStyle
Permette di associare un valore o un insieme di valori CSS direttamente
all’elemento su cui sta operando. È il corrispettivo dell’attributo style per inserire
del CSS inline sull’elemento HTML.
Prezzo: <span [style.color]="film.prezzo<10?'red': null">
{{film.prezzo | number: '1.1-2' }}
</span> €
maggiori dettagli a: https://angular.io/api/common/NgStyle

43. Comportamenti in un componente
Per aggiungere un certo
comportamento ad un
comportamento è sufficiente
dichiarare un metodo all’interno
della classe che il componente
esporta. Tale metodo potrà
essere richiamato dalla vista che
lo userà per ottenere
informazioni, valutare condizioni
o passare dei parametri.

44. Environments
Attraverso l’uso di file di environments, presenti nella relativa cartella, è possibile
andare a creare un insieme di configurazioni valide per la produzione, per lo
sviluppo o altre situazioni. In fase di compilazione per la produzione, con ng
build --prod, verrà utilizzato il file environments.prod.ts che conterrà i suoi
valori, ad hoc, per il profilo di produzione.
In sostanza questo file esporta un array di valori che possono essere riutilizzati
semplicemente importando la costante environments all’interno di servizi e
componenti.
import {environment as env } from './../../environments/environment' ;

45. Service
Per generare un service si usa il
comando:
ng generate service <nomeServizio>
oppure
ng g s <nomeServizio>
Grazie al service possiamo spostare la
logica di un componente al suo esterno
e sfruttarla in più componenti
semplicemente iniettando il servizio nel
costruttore del componente.

46. Service
Il decoratore
@Injectable permette
l’attivazione
dell’auto-discovery, ci
risparmia la
dichiarazione del
service all’interno del
nodo dei providers in
app.module.ts

47. Comunicazione tra i Service
I service dovrebbero essere iniettati come dei singleton in modo tale da avere
un’unica istanza e quindi un contenitore comune di informazioni. Tuttavia a volte
può non essere così, ma in altri casi questa loro caratteristica permette di sfruttarli
per lo scambio di dati. Un service può quindi essere usato come un repository per
variabili/oggetti tra componenti, oppure può essere usato per condividere eventi.
Approfondimento a:
https://medium.com/@enriqueoriol/angular-service-component-communication-4933782af52c
https://medium.com/@mponzo/data-sharing-tra-componenti-angular-d013a866c4cd

48. Service: HttpInterceptor
Un servizio molto diffuso è l’interceptor. Nel caso particolare l’HttpInterceptor
consiste nell’implementare un interfaccia, appunto la HttpInterceptor, la quale
obbliga il servizio ad implementare il metodo intercept(request, next).
Grazie ad essa possiamo intercettare ogni chiamata ed aggiungere un payload
nell’header http, chiavi personalizzate, gestire parte dell’autenticazione e molto
altro.

49. Service: HttpInterceptor

50. Router
Il componente di router, inserito in fase di costruzione del progetto, ci permette di
sostituire il nodo <router-outlet></router-outlet> , presente in app.component.html
con un componente ad hoc assegnato sulla base della rotta/path/url presente nella
barra degli indirizzi. In sostanza ci consente di “cambiare pagina” senza
effettivamente ricaricare tutta la pagina principale.
All’avvio viene creato anche il file app-routing.module.ts che permette di esportare
un array con tutte le rotte, il relativo componente da mostrare ed eventuali altri
servizi da iniettare/controllare, come per esempio guardie per controllarne
l’accesso.
maggiori dettagli a: https://angular.io/guide/router

51. Router
Per ogni rotta bisogna
specificare, path e
component da attivare,
in aggiunta sono possibili
altre proprietà come ad
esempio canActivate, un
array di servizi che
controllino il diritto di
accedere alla rotta.

52. Router
Per capire su quale rotta siamo e assegnare la classe active al link corrispondente
ho bisogno di usare la direttiva routerLinkActive=”active” la quale mi permette di
aggiungere una classe css ad un elemento quando la corrispettiva rotta è attivata.
Siccome la direttiva controlla presenza della path nell’url, la path di home vuota
risulta sempre presente, è necessario quindi, solo per la home, specificare l’esatta
corrispondenza, e non quella parziale, per decretarne la veridicità.

53. Router
Per passare da una vista all’altra, e quindi attivare un componente piuttosto di un
altro, si può inserire una direttiva su un link o su un altro tag che informa il router
del cambiamento. I link non dovranno più avere l’attributo href, in quanto verrà
impostato dalla direttiva.
<a class="nav-link" [routerLink]="['/']" >HOME</a>
<a class="nav-link" [routerLink]="['/about']" >ABOUT</a>
altri url del tipo ...pagina/10/edit?param=value#anchor sono ottenibili con l’uso di
<a class="nav-link" [routerLink]="['/pagina','10','edit']"
[queryParams] ="{param:'value'}" fragment="anchor" >pagina</a>

54. Router
Per creare un url completo nella parte di logica del componente sarà necessario
importare il router nel costruttore e nel metodo navigate, oltre che impostare la
rotta di destinazione, si dovrà specificare un object con nodi di queryParams e
fragment.

55. Router: parametri in url
maggiori dettagli a: https://angular.io/guide/router#route-parameters
È possibile passare parametri come id o
altro nell’url, tramite la dichiarazione
:valore nella path, e recuperarli poi nella
parte di logica del componente iniettando
il servizio ActivatedRoute nel costruttore.
Il servizio ActivatedRoute ci permette di
leggere i parametri della queryUrl e altre
informazioni. Il servizio Router ci permette
invece di invocare il router dalla parte
logica di un componente.

56. Router
Per recuperare parametri, ancora o altro dalla query url all’interno della logica del
componente è necessario importare ActivatedRoute nel costruttore ed estrarre da
esso tutto il necessario.
È opportuno sottoscriversi al cambio dei parametri piuttosto che ottenerli dallo
snapshot, in quanto, se il router dovesse cambiare la rotta, andando a quella
attuale ma con parametri differenti, non verrebbe scatenato l’effettivo cambio di
rotta dato che il componente non viene ricaricato, ignorando così la lettura dei
parametri (dato che solitamente si svolge nell’init)

57. Guardia
Una guardia è un servizio in grado
di consentire o negare l’accesso ad
una rotta del router. Si realizza
semplicemente implementando
l’interfaccia CanActivate che
obbliga ad implementare il metodo
CanActivate(): boolean.
maggiori dettagli a: https://angular.io/guide/router#milestone-5-route-guards
https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3

58. @Input
Decoratore per permettere di bindare una proprietà del tag ad una variabile del
componente, se dichiarato senza nessuna stringa tra parentesi l’attributo avrà lo
stesso nome della variabile che si sta decorando.
In questo caso il componente
nxt-guida avrà una proprietà value
in ingresso che accetterà qualsiasi
oggetto nel contesto di angular.
maggiori dettagli a: https://angular.io/api/core/Input

59. @Output
Decoratore che permette ad un componente di comunicare al suo esterno, per
esempio con degli eventi. Se non si specifica alcun nome tra le parentesi tonde
l’oggetto esposto avrà il nome della variabile decorata.
L’evento potrà essere intercettato sul componente nel template con le parentesi
tonde:
La variabile $event rappresenta l’oggetto passato dall’evento emesso.
maggiori dettagli a: https://angular.io/api/core/Output e
https://angular.io/api/core/EventEmitter

60. Direttiva custom
Una direttiva serve ad aggiungere funzionalità ad un componente sul quale è
applicata. È in grado legarsi alle proprietà del componente sul quale è inserita e
può modificarne anche la sua visualizzazione. Non è opportuno applicare css o altri
stili direttamente sull’oggetto ma usare il render di angular.
Una direttiva deve essere dichiara dentro al proprio modulo (es: app.module.ts) per
far sì che possa essere usata.
Approfondimento a:
https://www.mrwebmaster.it/javascript/come-creare-direttiva-personalizzata-angular_12756.html
https://netbasal.com/understanding-angular-structural-directives-659acd0f67e

61. Direttiva custom
Per generare la direttiva con angular-cli facciamo:
ng generate directive <NomeDirettiva>
oppure
ng g d <NomeDrirettiva>

62. HttpClientModule e HttpClient
Per poter effettuare chiamate verso il back-end o ad altre API in Angular si sfrutta il
modulo HttpClient che crea un observer dei risultati.
Per poterlo utilizzare è necessario mettere a conoscenza l’applicativo del suo
utilizzo e quindi importare in app.module.ts sotto al voce imports il modulo
HttpClientModule di @angular/common/http.
Successivamente nei componenti o servizi in cui voglio effettuare una chiamata
dovrò importare il servizio HttpClient, effettuare la chiamata (GET, POST ecc … ) e
sottoscrivere la risposta col metodo .subscribe(risp, err, complete)
maggiori dettagli a: https://angular.io/guide/http

63. CD: Change Detection
Ogni volta che un dato/variabile cambia angular si occupa di aggiornare l’intero
albero di componenti che vengono influenzati da questo cambio di valore. Per
evitare di aggiornare l’intero DOM Angular, grazie all’uso di uno shadow DOM,
rigenera solo le parti HTML che sono influenzate dal cambiamento e fornisce così
la nuova view. Ci sono diverse strategie di ottimizzazione che angular offre ed è
bene approfondirle.
Approfondimento a:
https://italiancoders.it/angular-change-detection-cosa-occorre-sapere/
https://www.sitepoint.com/change-detection-angular/