Angular multiple input field with remove options

Issue

User will be able to add multiple emails, after entering the email, will add to a list and user will be able to remove from the list.

Solution

In HTML page

<div class="parent-div">
      <mat-form-field class="example-full-width" appearance="fill">
          <mat-label>EMail</mat-label>
          <textarea matInput placeholder="Enter email" [(ngModel)]="email"
           (keyup.enter)="validateEmail()"> 
          </textarea>
      </mat-form-field>
     <div *ngFor="let email of emails" class="email-div">
         <mat-icon (click)="onDelete(email)">close</mat-icon>
         <span>{{email}}</span>
     <div>
</div>

In TS file

Declare email variable and email array and implement validation function

//declaration
email: string = "";
emailArray: string[] = [];
//validation method
validateEmail() {
//do email validation here
//if it is valid email push email to emailArray
  if(validEmail) {
     this.emailArray.push(email);
     this.email ="";
  }else{
   //show error
   }
}
onDelete(email){
 var index = this.emailArray.findIndex((x)=> x=== email);
 if(index>-1){
    this.emailArray.splice(index, 1);
 }
}

Answered By - Exception