Passare dati ad un componente

Gli esempi di componenti che abbiamo visto finora sono piuttosto statici, cioè le informazioni visualizzate non cambiano durante l'esecuzione dell'applicazione. Questo tipo di componente non è poi così interessante, in fondo. Sarebbe invece interessante vedere come un componente visualizzi dati che vengono passati dall'esterno, da un altro componente ad esempio, e che quindi possono potenzialmente variare durante l'esecuzione dell'applicazione.

Modifichiamo il codice scritto in precedenza per ottenere questa implementazione. Faremo in modo che il root component della nostra applicazione definisca il contenuto dell'articolo e lo passi all'ArticoloComponent per visualizzarlo.

Quindi per prima cosa aggiungiamo una proprietà myArticolo al root component e la inizializziamo nel suo costruttore:

import { Component} from '@angular/core';
import { ArticoloComponent } from './articolo'; 
@Component({
	selector: 'app-root',
	templateUrl: 'app.component.html',
	styleUrls: ['app.component.css']
})
export class AppComponent {
	title = 'app works!';
	myArticolo;
	constructor() {
		this.myArticolo = {
			titolo: "Creare componenti Angular 2",
			autore: "Mario Rossi",
			testo: "Creare componenti con Angular 2 è molto semplice."
		};
	}
}

Modifichiamo quindi il codice di ArticoloComponent eliminando l'inizializzazione dei dati dell'articolo che abbiamo ora spostato nel root component:

import { Component, Input} from '@angular/core';
import { Articolo } from './articolo'
@Component({
	selector: 'articolo',
	templateUrl: 'articolo.component.html',
	styleUrls: ['articolo.component.css']
})
export class ArticoloComponent implements OnInit {
	@Input() articolo: Articolo;
	constructor() {}
}

Oltre all'assenza dell'inizializzazione dei dati dell'articolo, possiamo notare un nuovo decoratore @Input a fianco della dichiarazione della proprietà articolo. Questo decoratore, opportunamente importato dal modulo core di Angular, indica che l'assegnamento di valori a questa proprietà può avvenire dall'esterno del componente. In altre parole, stiamo informando Angular che articolo è una proprietà di input, cioè una proprietà tramite cui altri componenti possono passare dati.

Vediamo allora come il root component può passare i dati dell'articolo al componente ArticoloComponent. È sufficiente modificare il markup del suo template nel seguente modo:

<h1>
  {{title}}
</h1> 
<articolo [articolo]="myArticolo"></articolo>

Come possiamo vedere, l'aver dichiarato la proprietà articolo del componente ArticoloComponent come proprietà di input, ci consente di poterla utilizzare come attributo speciale nel markup del componente.

Un attributo tra parentesi quadre, infatti, indica ad Angular che intendiamo assegnare un valore all'omonima proprietà del componente.