2. in collaborazione conComponents 2
È una classe Angular responsabile di esporre dei dati su una
view, e di gestire tutte le interazioni dell'utente.
Il componente è uno dei più importanti elementi costitutivi di
Angular. Rappresenta, di fatto, una direttiva con un template.
3. in collaborazione conComponents 3
<!DOCTYPE html>
<html lang="it">
<head>
<title>La mia pagina HTML</title>
</head>
<body>
<h2>This is a simple title</h2>
<p><a href="other-page.html">Go to other page</a></p>
<button type="button">Send now!</button>
</body>
</html>
8. in collaborazione conComponents
Tutti i componenti risiedono
all'interno della cartella src/app,
ognuno all'interno della propria
cartella.
L'unica eccezione è app-root.
8
-src
--app
---app.component.ts
---message
----...
9. in collaborazione conComponents
Il nome del file deve rispecchiare
il seguente pattern:
comp-name.component.ts
9
-src
--app
---message
----message.component.ts
10. in collaborazione conComponents
Un componente, per essere tale,
ha bisogno anche di una view
(.html).
Lo standard per il nome del file è
il medesimo del componente:
comp-name.component.html
10
-src
--app
---message
----message.component.ts
----message.component.html
11. in collaborazione conComponents 11
/* src/app/message/message.component.ts */
import { Component } from '@angular/core';
@Component({
selector: 'app-message',
templateUrl: './message.component.html'
})
export class AppComponent {
}
12. in collaborazione conComponents
Prima di utilizzare un
componente, bisogna registrarlo
all'interno del modulo.
12
/* src/app/app.module.ts */
import { MessageComponent } from
'./message/message.component';
@NgModule({
declarations: [
AppComponent,
MessageComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
13. in collaborazione conComponents
Una volta registrato, il
componente può essere
utilizzato all'interno di qualsiasi
altro componente.
13
/* src/app/app.component.html */
<app-message></app-message>
<hr />
<app-message></app-message>
15. in collaborazione conComponents 15
È una funzione che aggiunge dei meta-dati ad una classe, ai suoi
membri (proprietà e metodi) o agli argomenti di una funzione.
I decorator sono una funzionalità sperimentale introdotta in
JavaScript: TypeScript ne permette l'utilizzo fin da subito.
Un decorator va inserito immediatamente sopra o sulla sinistra
dell'oggetto da decorare.
16. in collaborazione conComponents 16
All'interno di Angular, ogni cosa è una classe: moduli,
componenti, service, pipe, ecc, sono tutte delle semplici classi.
Grazie ai decorator, possiamo decidere che cosa rappresenta
quella classe e farla agire come un componente, piuttosto che
come un modulo, ecc.
17. in collaborazione conComponents
@NgModule()
Un classe viene decorata come
un modulo.
17
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
18. in collaborazione conComponents
declarations
Un array contenente tutti i
componenti da utilizzare per
questo modulo.
18
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
19. in collaborazione conComponents
imports
Un array contenente tutti i
moduli richiesti per questo
modulo.
BrowserModule è il modulo
necessario per far funzionare
l'applicazione su un browser.
19
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
20. in collaborazione conComponents
providers
Un array contenente tutti i service
condivisi da tutti i componenti.
Non per forza di cose, un service
deve essere riportato su un
modulo.
20
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
21. in collaborazione conComponents
bootstrap
Un array contenente il
componente di root, ossia il
componente che viene
inizializzato al primo avvio e che
contiene tutti gli altri
componenti.
21
/* src/app/app.module.ts */
import { NgModule } from '@angular/
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
22. in collaborazione conComponents
@Component()
Un classe viene decorata come
un componente.
22
/* src/app/app.component.ts */
import { Component } from
'@angular/core';
@Component({
selector: 'app-root',
templateUrl: './
app.component.html',
styleUrls: ['./
app.component.css']
})
export class AppComponent {
}
23. in collaborazione conComponents
selector
Il nome del tag HTML del
componente.
Può essere utilizzato anche come
attributo o come classe
(entrambi utilizzati molto di
rado)
23
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
@Component({
selector: 'app-root',
...
})
export class AppComponent {
}
24. in collaborazione conComponents
templateUrl
L'url della view associata a
questo componente (sempre
relativa alla posizione del
file .ts)
24
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
@Component({
templateUrl: './app.component.html',
...
})
export class AppComponent {
}
25. in collaborazione conComponents
template
La view può essere definita
anche inline, utilizzando le string
interpolation (back-tick)
25
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
@Component({
template: `<p>My Comp</p>`,
...
})
export class AppComponent {
}
26. in collaborazione conComponents
styleUrls
Array contenente tutti i file CSS
associati a questo componente.
26
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
@Component({
styleUrls: ['./app.component.css'],
...
})
export class AppComponent {
}
27. in collaborazione conComponents
styles
Array contenente gli stili CSS
associati a questo componente,
scritti direttamente all'interno
del componente.
27
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
@Component({
styles: [`p{color:red;}`],
...
})
export class AppComponent {
}
28. in collaborazione conComponents
encapsulation
Specifica come template e stili
vengono incapsulati all'interno
del componente.
I tre possibili valori sono:
Emulated, Native e None.
28
/* src/app/app.component.ts */
import { Component } from '@angular/
core';
@Component({
encapsulation:
ViewEncapsulation.Emulated,
...
})
export class AppComponent {
}
30. in collaborazione conComponents 30
Solitamente è riferito al binding dei dati e al "legare" una
proprietà di un oggetto HTML ad una proprietà di un oggetto
JavaScript.
31. in collaborazione conComponents
String Binding
Tutto ciò che sta all'interno
di {{ }} viene valutato e
convertito in una stringa
text e path provengono dalla
classe (componente) associata
alla view.
31
/* src/app/app.component.html */
<p>{{ text }}</p>
<img src="{{ path }}" />
32. in collaborazione conComponents
Property Binding
Tutte le proprietà di un oggetto
HTML possono essere messe in
binding, tra [ ], con una
proprietà del componente.
La direzione è dall'esterno
all'interno.
32
/* src/app/app.component.html */
<p [hidden]="true">{{ text }}</p>
<img [src]="path" />
33. in collaborazione conComponents
Event Binding
Tutti gli eventi definiti da HTML
possono essere messi in binding, tra
( ), con un metodo del
componente.
È possibili accedere all'oggetto
evento passando $event al metodo.
La direzione è dall'interno
all'esterno.
33
/* src/app/app.component.html */
<p (click)="onClick()">{{ text }}</p>
<img
[src]="path" (dblclick)="onDbClick($ev
ent)" />
34. in collaborazione conComponents
Two-Way Binding
Combina la possibilità di
specificare una proprietà di un
elemento e allo stesso tempo di
restare in ascolto di un evento di
modifica.
È sempre meglio usare con
cautela ngModel.
34
/* src/app/app.component.html */
<app-message
[(msg)]="msgString">{{ text }}</app-
message>
<input [(ngModel)]="myInput" />
36. in collaborazione conComponents 36
È un decorator da applicare ad una proprietà di un componente,
per permettere il passaggio di dati dall'esterno verso l'interno.
37. in collaborazione conComponents
@Input()
Il valore della proprietà message
verrà passato dal genitore di
questo elemento.
37
/* src/app/message.component.ts */
import { Component, Input } from
'@angular/core';
@Component({
...
})
export class MessageComponent {
@Input() message: string;
}
38. in collaborazione conComponents
Per valorizzare la proprietà si può
utilizzare sia lo string binding, che
l'attribute binding.
38
/* src/app/message.component.html */
<app-message message="This is a
message"></app-message>
<app-message [message]="message"></
app-message>
40. in collaborazione conComponents 40
È un decorator da applicare ad un metodo di un componente,
per permettere il passaggio di dati dall'interno verso l'esterno.
41. in collaborazione conComponents
@Output()
Il decorator viene utilizzato su un
EventEmitter che, di fatto,
emette un nuovo evento al quale
può restare in ascolto il genitore
del componente.
La classe EventEmitter è un
Subject (RxJS)
41
/* src/app/message.component.ts */
import { Component, Output } from
'@angular/core';
@Component({
...
})
export class MessageComponent {
@Output() onClose: EventEmitter<any>
= new EventEmitter();
handleClose() {
this.onClose.emit();
}
}
42. in collaborazione conComponents
Per catturare l'evento va
utilizzata la dicitura event binding.
42
/* src/app/message.component.html */
<app-message
[message]="message" (onClose)="close
()"></app-message>
44. in collaborazione conComponents 44
È una classe Angular responsabile della creazione, modifica e
interazioni con gli elementi del DOM.
Una direttiva è solitamente associata ad un elemento HTML o ad
un attributo.
45. in collaborazione conComponents 45
Esistono tre diverse tipologie di direttive:
components, attribute directives e structural directives
46. in collaborazione conComponents
NgClass
È una attibute directive che
interagisce con le classi CSS.
46
/* src/app/message.component.html */
<p [ngClass]="first second"></p>
<p [ngClass]="{'first': true,
'second': false}"></p>
47. in collaborazione conComponents
NgStyle
È una attibute directive che
interagisce con gli stili (inline) di
un elemento HTML.
47
/* src/app/message.component.html */
<p [ngStyle]="{'font-size': exp}"></
p>
48. in collaborazione conComponents
NgStyle
In alternativa, può essere usato
direttamente un binding alla
proprietà del DOM.
48
/* src/app/message.component.html */
<p [style.fontSize]="exp"></p>
49. in collaborazione conComponents
*ngIf
È una structural directive che
valuta un'espressione e, se vera,
renderizza l'HTML al quale è
collegata.
Se l'espressione è falsa rimuove
l'elemento dal DOM.
49
/* src/app/message.component.html */
<p *ngIf="isVisibile"></p>
50. in collaborazione conComponents
*ngIf; else
È possibile utilizzare anche la
forma else, nel caso si voglia
dare un ripiego.
50
/* src/app/message.component.html */
<p *ngIf="isVisibile; else other"></
p>
<ng-template #other>
<p>Other text</p>
</ng-template>
51. in collaborazione conComponents
*ngFor
È una structural directive che
itera un elemento tante volte
quanti sono gli elementi
all'interno di un array.
51
/* src/app/message.component.html */
<p *ngFor="let item of items">
{{ item }}
</p>
52. in collaborazione conComponents
*ngFor
È possibile utilizzare anche gli
indici di ogni iterazione.
52
/* src/app/message.component.html */
<p *ngFor="let item of items; let i
= index">
{{ i }}: {{ item }}
</p>