Introduzione ai componenti in Angular 4

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.

<!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>

<app-root>
</app-root>
<app-message>
<app-projects>
</app-projects>
<app-project>
<app-badge>
AppModule

1.
CREARE UN COMPONENTE

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
----...

Il nome del ﬁle deve rispecchiare
il seguente pattern:
comp-name.component.ts
9
-src
--app
---message
----message.component.ts

Un componente, per essere tale,
ha bisogno anche di una view
(.html).
Lo standard per il nome del ﬁle è
il medesimo del componente:
comp-name.component.html
10
-src
--app
---message
----message.component.ts
----message.component.html

/* src/app/message/message.component.ts */
import { Component } from '@angular/core';
@Component({
selector: 'app-message',
templateUrl: './message.component.html'
})
export class AppComponent {
}

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]
})

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>

2.
DECORATOR

È 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 ﬁn da subito.
Un decorator va inserito immediatamente sopra o sulla sinistra
dell'oggetto da decorare.

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.

@NgModule()
Un classe viene decorata come
un modulo.
17
import { NgModule } from '@angular/
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
})

declarations
Un array contenente tutti i
componenti da utilizzare per
questo modulo.
18
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
})

imports
Un array contenente tutti i
moduli richiesti per questo
modulo.
BrowserModule è il modulo
necessario per far funzionare
l'applicazione su un browser.
19
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
})

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
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
})

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
core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
})

@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']
})
}

selector
Il nome del tag HTML del
componente.
Può essere utilizzato anche come
attributo o come classe
(entrambi utilizzati molto di
rado)
23
import { Component } from '@angular/
core';
@Component({
selector: 'app-root',
...
})
}

templateUrl
L'url della view associata a
questo componente (sempre
relativa alla posizione del
ﬁle .ts)
24
core';
@Component({
templateUrl: './app.component.html',
...
})
}

template
La view può essere deﬁnita
anche inline, utilizzando le string
interpolation (back-tick)
25
core';
@Component({
template: `<p>My Comp</p>`,
...
})
}

styleUrls
Array contenente tutti i ﬁle CSS
associati a questo componente.
26
core';
@Component({
styleUrls: ['./app.component.css'],
...
})
}

styles
Array contenente gli stili CSS
associati a questo componente,
scritti direttamente all'interno
del componente.
27
core';
@Component({
styles: [`p{color:red;}`],
...
})
}

encapsulation
Speciﬁca come template e stili
vengono incapsulati all'interno
del componente.
I tre possibili valori sono:
Emulated, Native e None.
28
core';
@Component({
encapsulation:
ViewEncapsulation.Emulated,
...
})
}

3.
BINDINGS

Solitamente è riferito al binding dei dati e al "legare" una
proprietà di un oggetto HTML ad una proprietà di un oggetto
JavaScript.

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
<p>{{ text }}</p>
<img src="{{ path }}" />

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
<p [hidden]="true">{{ text }}</p>
<img [src]="path" />

Event Binding
Tutti gli eventi deﬁniti 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
<p (click)="onClick()">{{ text }}</p>
<img
[src]="path" (dblclick)="onDbClick($ev
ent)" />

Two-Way Binding
Combina la possibilità di
speciﬁcare una proprietà di un
elemento e allo stesso tempo di
restare in ascolto di un evento di
modiﬁca.
È sempre meglio usare con
cautela ngModel.
34
<app-message
[(msg)]="msgString">{{ text }}</app-
message>
<input [(ngModel)]="myInput" />

4.
@Input

È un decorator da applicare ad una proprietà di un componente,
per permettere il passaggio di dati dall'esterno verso l'interno.

@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;
}

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>

5.
@Output

È un decorator da applicare ad un metodo di un componente,
per permettere il passaggio di dati dall'interno verso l'esterno.

@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();
}
}

Per catturare l'evento va
utilizzata la dicitura event binding.
42
<app-message
[message]="message" (onClose)="close
()"></app-message>

6.
DIRETTIVE BUILT-IN

È una classe Angular responsabile della creazione, modiﬁca e
interazioni con gli elementi del DOM.
Una direttiva è solitamente associata ad un elemento HTML o ad
un attributo.

Esistono tre diverse tipologie di direttive: 
components, attribute directives e structural directives

NgClass
È una attibute directive che
interagisce con le classi CSS.
46
<p [ngClass]="first second"></p>
<p [ngClass]="{'first': true,
'second': false}"></p>

NgStyle
È una attibute directive che
interagisce con gli stili (inline) di
un elemento HTML.
47
<p [ngStyle]="{'font-size': exp}"></
p>

NgStyle
In alternativa, può essere usato
direttamente un binding alla
proprietà del DOM.
48
<p [style.fontSize]="exp"></p>

*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
<p *ngIf="isVisibile"></p>

*ngIf; else
È possibile utilizzare anche la
forma else, nel caso si voglia
dare un ripiego.
50
<p *ngIf="isVisibile; else other"></
p>
<ng-template #other>
<p>Other text</p>
</ng-template>

*ngFor
È una structural directive che
itera un elemento tante volte
quanti sono gli elementi
all'interno di un array.
51
<p *ngFor="let item of items">
{{ item }}
</p>

*ngFor
È possibile utilizzare anche gli
indici di ogni iterazione.
52
<p *ngFor="let item of items; let i
= index">
{{ i }}: {{ item }}
</p>

Introduzione ai componenti in Angular 4

More Related Content

What's hot (17)

Similar to Introduzione ai componenti in Angular 4 (11)

More from Giovanni Buffa (19)

Introduzione ai componenti in Angular 4