CODEWITHSUNDEEP
angulartypescriptangular-materialangular6
vishnu prasath
vishnu prasath

Reputation: 31

How to hide a div inside a *ngFor loop

I want to add a form inside a *ngFor loop. Below is my attempt to repeat a button, like so: What I want to acheive...

html file:

<div *ngFor="let passenger of passengerForm;let i=index;">
  <form>
    <mat-form-field>
      <input matInput type="text" placeholder="Enter Name" 
        [(ngModel)]="passenger.Name">
    </mat-form-field> 

  </Form>
  <div>
    <button (click)="addFieldValue(i); ">
      Add Passenger
    </button>
  </div>

</div>

typescript file:

newAttribute ={}
addFieldValue(index)  {

  if ( index < 3) {
    this.passengerForm.push(this.newAttribute )
    this.newAttribute = {};

  }
}

Upvotes: 1

Views: 247

Answers (1)

Pasan Jayawickrama
Pasan Jayawickrama

Reputation: 320

<div *ngFor="let passenger of passengerForm;let i=index;">
   <input matInput type="text" placeholder="Enter Name" [(ngModel)]="passenger.Name">
</div>

Try this way. You need to wrap the input field only.

Upvotes: 1

Related Questions