Compléter le code afin de rendre l'application fonctionnelle.

Voici un exemple dez fonctionnement de l'application : (2 captures ci-dessous)

• Capture 1 :

• Capture 2 :

| 

• Code app.component.ts

• import { Component } from '@angular/core';

• @Component({
•   selector: 'my-app',
•   templateUrl: './app.component.html',
•   styleUrls: [ './app.component.css' ]
• })
• export class AppComponent  {
•   username = '';
•   nomvalide = '';
•   listenoms = [];
•   valider() {
•     this.nomvalide = this.username;
•     (this.username);
•   }
• }
• Code app.component.html :

• <div>
•      <!-- Le nom est déjà saisi ET validé --> 
•      <p>Le nom validé saisi est :{{
  nomvalide

  username
  }}
•           <span *ngIf="
  nomvalide

  username
  === 'Z'">(Yeah !)</span>,
•      </p>
•      <p>Valider un autre nom ?
•           <!-- Un nouveau username est saisi -->
•           <input type="text" [()]="username"/><br/>
•           Vous avez indiqué :
  {{username}}

  {{nomvalide}}

  nomvalide

  username
  <br/>
•           Nombre de caractères = {{username.
  length

  size

  taill
  }}}<br/>
•           <button ()="">Saisir !</button>
•      </p>
•      <p>Rappel des noms saisis :</p>
•      <!-- Filtrage sur nom recherché -->
•      <ul><li *ngFor="let nom of ">{{nom}}</li></ul>
• </div>