angular7 *ngFor with filter

Question

How can i achieve this ?

ngFor listing item should change based on button click , which item status should be true

*ngFor="let project of projects | conditionListTrueItem "

Json example

projects :
 { name:'name one', status: {
    ongoing: true,
    completed: false,
    incomplete: false,
} 
},
 { name:'name two', status: {
    ongoing: false,
    completed: true,
    incomplete: false,
} 
},
 { name:'name three', status: {
    ongoing: false,
    completed: false,
    incomplete: true,
} 
}

html

<button>Ongoing </button> 
<button>completed</button> 
<button>incomplete</button>

<div class="table" *ngFor="let project of projects">
<p>{{project.name}}</p>
</div>

project.ts

ngOnInit() {
    this.projectsService.getAllProjects().subscribe( response => {
      this.projects = response;
    })
  }

Possible duplicate of [How to apply filters to \*ngFor?](https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor) — porgo, Apr 18 '19 at 09:54
Based on the button you need to set a value and you should filter through standard filter functions without pipes. for loop should only be for displaying. the above article is not a current recommendation. — jcuypers, Apr 18 '19 at 11:56

score 0 · Answer 1 · answered Apr 18 '19 at 09:59

Your json model is not very efficient. Rather store the value of the status.

Use ng-container with ngIf directive

You will also need to create the variable for selectedStatus in your .ts file.

projects :
 { name:'name one', status: 'ongoing'
},
 { name:'name two', status: 'completed'
},
 { name:'name three', status: 'incomplete'
}

<button (click)="selectedStatus = 'ongoing'">Ongoing </button> 
<button (click)="selectedStatus = 'completed'">completed</button> 
<button (click)="selectedStatus = 'incomplete'">incomplete</button>

<ng-container class="table" *ngFor="let project of projects">
  <p *ngIf="project.status === selectedStatus">{{project.name}}</p>
</ng-container>

angular7 *ngFor with filter

1 Answers1