7 form e *ngIf

aggiungiamo un nuovo componente user-detail che conterrà un form per la creazione lettura modifica dei dati dell’array,

ng g c user-detail

aggiungiamo un form html nel template di user-detail

<form>
<div class="form-group">
<label for="firstname">Nome</label>
<input name="firstname" id="firstname">
</div>
<div class="form-group">
<label for="lastname">Cognome</label>
<input name="lasttname" id="lasttname">
</div>
<div class="form-group">
<label for="fiscalcode">Codice fiscale</label>
<input name="fiscalcode" id="fiscalcode">
</div>
<div class="form-group">
<label for="phone">Telefono</label>
<input name="phone" id="phone">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="age">Età</label>
<input name="age" id="age">
</div>
<div class="form-group form-footer">
<button class="btn-save">SALVA</button>
</div>
</form>

adesso sopra il bottone CANCELLA ne aggiungiamo uno per la modifica

<button (click)="updateUser()">MODIFICA</button>

al click del mouse verrà chiamata la funzione updateUser() che andremo a creare. Allo stesso modo come abbiamo creato il decoratore di @output() per onDeleteUser ne aggiungiamo un altro per l’utente selezionato

@Output() onSelectUser = new EventEmitter();

completiamo la funzione updateUser()

updateUser() {
  this.onSelectUser.emit(this.user);
}

adesso non resta che ascoltare questo evento nel componente users

(onSelectUser)="onSelectUsers($event)"

aggiungiamo la funzione onSelectUsers nella classe del componente users che riceverà un parametro di tipo User e facciamo un controllo se tutto funziona con un alert

onSelectUsers(user: User) {
  alert(user.cognome);
}

e ascoltiamo l’evento onSelectUser come per il delete

(onSelectUser)="onSelectUsers($event)"

assodato che la funzione restituisca l’alert, dobbiamo fare in modo che un utente è stato selezionato da app.component e mostrare o nascondere la tabella user-detail.

Come users ha accesso alla proprietà user-data del componente figlio user e ascolta eventi da esso, allo stesso modo app.component che è padre di users, potrà accedere alla stessa proprietà (solo per capire, la proprietà del nipote user). Quindi il componente figlio lancia un evento e il componente padre users lo ascolta e users potrà lanciare lo stesso evento che il componente padre app.component ascolterà.

Quindi aggiungiamo un evento updateUser in uscita in users.component

@Output() updateUser = new EventEmitter();

Tale evento di classe EventEmetter avrà come parametro in ingresso un utente e questo può essere fatto racchiudendolo tra maggiore e minore l’interfaccia User

@Output() updateUser = new EventEmitter<User>();

completiamo la funzione onSelectUser() sostituendo all’alert l’evento updateUser creato nell’ @output che chiamerà il metodo emit() a cui passeremo come parametro user

onSelectUsers(user: User) {
 this.updateUser.emit(user);
}

a questo punto l’evento updateUser viene rilanciato col click del pulsante modifica e andremo ad ascoltare l’evento nell’app principale app.component tramite il tag <app-users>

<app-users (updateUser)="updateUser($event)"></app-users>

Quando l’evento è scatenato, lancierà un metodo che si chiamerà updateUser() che creiamo nella classe principale di app.component definendo anche una proprietà userSelected di tipo User (questo ci farà importare anche l’interface User in app.component)

userSelected: User;
updateUser(user: User) {
 this.userSelected = user;
}

*ngIf

Come *ngFor, esiste in angular anche una direttiva che si chiama *ngIf che crea una condizione true o false simile all’ if di molti altri linguaggi di programmazione, per cui esegue o meglio integra e quindi visualizza componenti o meno a seconda della condizione.

Testiamola subito sul componente <user-detail> per non visualizzarlo

<div *ngIf="false">
 <app-users-detail></app-users-detail>
</div>

Con false il componente user-detail non sarà visualizzato, quindi tutta la tabella con i label e gli input non verranno caricati nel DOM.

Con la stessa logica sostituiamo il false con la proprietà userSelected che se cliccato il pulsante modifica diventerà true, altrimenti sarà false

<div *ngIf="userSelected">
<app-users-detail></app-users-detail>
</div>