CODEWITHSUNDEEP
angulartypescriptpipengforangular12
oescc
oescc

Reputation: 47

ngFor doesn't display correct data Angular

I have a variable forms where I save some forms that will be displayed inside a for loop.

forms: UserForm[] = [
        {   
            id: 1
            name: 'experience',
            show: true
        },
        {
            id: 2,
            name: 'work',
            show: true
        },
        ....
    ]

Here when I load the data on the template I filter forms based on the show :

<div *ngFor="let tab of (filterForms | generalPipe:forms)" class="form-container">
 // some code 
</div>

And this is the filter function

    filterForms(tabs: UserForm[]): UserForm[] {
        return forms.filter((item) => item.show);
    }

I have another function that changes the show for a specific form inside form with id experience

   hideExperienceForm(){ 
      forms[0].show = false;
   }

The problem is that on Html the form is still being displayed even though I call the hideExperienceForm() and the show is set to false for the first item. Also if I show on the HTML template the show is false too but the loop is not getting the update and it doesn't call filterForms again. How can I trigger filterForms inside *ngFor to be triggered?

Upvotes: 0

Views: 173

Answers (1)

Matthijs
Matthijs

Reputation: 31

What if you use *ngIf instead of the filter?

<div *ngFor="let form of forms" class="form-container">
    <div *ngIf="form.show">
        // Some code
    </div>
</div>

If a form is changed to show = false it should become hidden.

Upvotes: 3

Related Questions