In questa parte vedremo l’utilizzo di @output, un altro decorator che offre la possibilità di trasmettere le informazioni, i dati, da un contenitor ad un altro.
A differenza del precedente articolo, in cui si è visto il decorator @Input, in questo caso la direzione sarà dal Child al parent, dando così la possibilità di gestire le informazioni.
Anche in questa parte utilizzeremo l’ambiente di sviluppo Visual Studio Code ed il linguaggio Html e TypeScript, che sono parte fondamentale del framework Angular.
Creazione del progetto
Si crea un nuovo progetto, dal prompt dei comandi digitiamo il comando per la creazione di un progetto, seguito da nome a vostro piacimento, nel nostro caso, sarà di tipo “esempiooutput”.
Di seguito l’istruzione per la creazione di un nuovo progetto.
ng new esempiooutput
Alla domanda vogliamo aggiungere un routing, questa volta diciamo di “no” digitando n e poi fare invio, e confermare il foglio di stile css.
Apriamo Visual Studio Code, e tramite la voce di menu apri cartella selezioniamo la cartella che abbiamo creato, nel nostro caso “esempiooutput”.
A questo punto il progetto sarà creato con tutti i vari file, non resta che scrivere il codice per l’utilizzo di @output
Stesura del codice
Apriamo il file html di component, in questo caso “app-component.html” e cancelliamo il contenuto che viene creato automaticamente, a questo punto scriviamo un titolo. Di seguito si riporta il codice HTML per un titolo.
HTML
<b>Esempio output</b>
Apriamo il file TypeScript quello denominato “app-component.ts” e scriviamo una variabile di array string passando alcuni valori che utilizzeremo nel file html.
Di seguito si riporta il codice delle suddette operazioni da inserire nella class di TypeScript
TypeScript
export class AppComponent {
title = 'esempiooutput';
regioni = ['Lazio', 'Lombardia', 'Toscana', 'Sicilia'];
}
Ritorniamo nel file html, e scriviamo un codice utilizzando i tag html per visualizzare un elenco tramite la direttiva *NgFor nello scorrere i dati della variabile array.
Di seguito il frammento di codice html delle suddette operazioni per il file “app-component.html”.
HTML
<br>
Elenco Regioni
<ul>
<li *ngFor="let regione of regioni">{{regione}}</li>
</ul>
Il risultato sarà come quello mostrato in figura 1.
Figura 1 – Il risultato finale nel browser
Ora non resta che aggiungere un nuovo component, dal prompt dei comandi, scriviamo il comando per la generazione di un nuovo component. Di seguito l’istruzione per la creazione del nuovo component.
ng g c aggiungiRegione
A questo punto verrà aggiunto al progetto una nuova cartella denominata aggiungi-regione con all’interno tutti file per gestire un component, come visto negli articoli precedenti.
Dopo aver creato il component, andiamo ad impostare nel file html di “app-component.html” che è quello principale, il riferimento html al nuovo component aggiunto, aggiungendo il nodo relativo al selettore di questo nuovo componente.
In basso, sotto al tag contenente il ciclo “*NgFor” inseriamo il tag relativo al selettore del nuovo componente.
Di seguito si riporta il codice completo html del file HTML “app-component.html”
HTML
<b>Esempio output</b>
<br>
Elenco Regioni
<ul>
<li *ngFor="let regione of regioni">{{regione}}</li>
</ul>
<app-aggiungi-regione></app-aggiungi-regione>
Terminata la modifica nel component principale, dobbiamo aggiungere nel component child, quello relativo all’inserimento dei dati, dei tag per l’inserimento dei dati da parte dell’utente che verranno aggiunti all’array che viene a sua volta visualizzato a video nel component “app-component”.
Nel file html denominato “app-aggiungi-regione” inseriamo i tag per visualizzare un titolo, una casella di testo per inserire i dati ed un pulsante che andrà ad aggiungere il dato nell’array.
Di seguito il codice html completo del file “app-aggiungi-regione.html”.
HTML
<p>Aggiungi una regione</p>
<input type="text" id="AddRegione" #NuovaRegione>
<button type="button" (click)="aggiungiRegione(NuovaRegione.value)">Aggiungi</button>
Come si è visto dal codice precedente, il tag “Input” che è la casella ha un selettore denominato “#NuovaRegione”, questo attributo ci permette tramite la proprietà “value”, di prendere il valore nella casella di testo che l’utente ha inserito e passarlo ad una funzione presente nel tag <button>.
Nel tag button, viene effettato il binding, ossia la relazione tra l’evento click del pulsante ed il codice presente nel file di tipo TypeScript, nel quale è presente la funzione.
La funzione accetta un valore, che è il testo inserito nella casella di testo.
La parte html per il component “Child” è terminata, non resta che scrivere il codice TypeScript, per trasferire questo valore. Nel file “app-aggiungi-regione.ts” scriviamo la funzione che accetterà il valore che gli passiamo per poterlo a sua volta trasferire al component parenti.
Di seguito si riporta il codice TypeScript del file “app-aggiungi-regione.ts”.
TypeScript
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-aggiungi-regione',
templateUrl: './aggiungi-regione.component.html',
styleUrls: ['./aggiungi-regione.component.css']
})
export class AggiungiRegioneComponent {
@Output() nuovaRegione = new EventEmitter();
aggiungiRegione(value:string): void{
this.nuovaRegione.emit(value);
}
}
Come si è visto dal codice precedente, tramite la direttiva @output si crea una variabile, che sarà tipo “eventEmitter permettendo di restituire il valore.
La funzione che viene richiamata dal pulsante, accetta un parametro di tipo string, questo valore viene aggiunto tramite il metodo “emit” della variabile di tipo EventEmitter.
La parte della gestione del Child è terminata, ora non resta che scrivere il codice per la parte parent, ossia nel file “app-component” visualizzare i dati che sono presenti nell’array e che di volta in volta vengono aggiunti tramite il pulsante.
Modifichiamo il file html denominato “app-component.html” aggiungendo nel selettore aggiunto in precedenza, il riferimento alla variabile agganciandola ad un metodo di caricamento.
Di seguito si riporta il tag HTML modificato.
HTML
<app-aggiungi-regione (nuovaRegione)="getElemento($event)" ></app-aggiungi-regione>
Di seguito si riporta il codice completo del file “app-component.html”.
HTML
<b>Esempio output</b>
<br>
Elenco Regioni
<ul>
<li *ngFor="let regione of regioni">{{regione}}</li>
</ul>
<app-aggiungi-regione (nuovaRegione)="getElemento($event)" ></app-aggiungi-regione>
Dopo aver modificato la parte html, non resta che creare nel file TypeScript la funzione che restituisce i valori che verranno aggiunti dal component chil.
Passiamo nel file typescript denominato “app-component.ts” e scriviamo la funzione che riceverà il valore del component child per aggiungerlo tramite il metodo “Push” dell’array creato in precedenza.
Di seguito si riporta tutto il codice completo del file TypeScript di “app-component.ts”
TypeScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'esempiooutput';
regioni = ['Lazio', 'Lombardia', 'Toscana', 'Sicilia'];
getElemento(regione: string)
{
this.regioni.push(regione);
}
}
Ora non resta che salvare il file e vedere in tempo reale le modifiche apportate oppure eseguire l’applicativo nel caso che non è stato ancora avviato.
Noteremo come ad ogni click sul pulsante verrà aggiunto nella lista il testo digitato nella casella di testo, il tutto come riportato in figura 2.
Figura 2 – l’aggiunta di nuovi elementi
Conclusioni
In questa nuova parte, si è visto come utilizzare il decoratore di tipo @output per una comunicazione tra component di tipo child to parent, permettendo di avvicinare il lettore nell’architettura e gestione dello scambio dei dati tra due componenti.
Tecnica che può tornare utile in quei contesti in cui si fa uso di diversi component.