I have a parent collection that has a collection of children components.
[parent]
[child]
[child]
[parent]
[child]
I have a filter on the ngFor for the children,
When I filter, it filters the data but my view ends up looking like this:
[parent]
[parent]
[child]
Is there anyway to filter out the parent if the child has no items? Or, have it do something like this:
[parent]
No Items Found!
[parent]
[child]
Thanks for any assistance, just learning Angular 7.
html:
<div style="margin-top: 30px;">
<div *ngFor="let organization of column.boardColumnWorkItems">
<div class="row">
<div class="col-sm-4 organization-row">
{{organization.name}}
</div>
</div>
<app-board-column-tile *ngFor="let workItem of organization.workItems | workItemFilter:filterTerm"
[boardColumnWorkItem]="workItem">
</app-board-column-tile>
</div>
</div>
filter/pipe:
transform(workItems: any, filterTerm: any): any {
console.log("WorkItemFilterPipe: " + filterTerm);
//Check if filter term is undefined
if (filterTerm === undefined)
return workItems;
//Return the filtered list of workitems
this.filteredWorkItems = workItems.filter(function (workItem) {
return workItem.filterData.includes(filterTerm.toLowerCase());
})
console.log(this.filteredWorkItems.length);
return this.filteredWorkItems;
}
You could try as follows:
<ng-container *ngIf="organization.workItems | workItemFilter:filterTerm as filteredWorkItems">
<app-board-column-tile *ngFor="let workItem of filteredWorkItems"
[boardColumnWorkItem]="workItem">
</app-board-column-tile>
<h3 *ngIf="filteredWorkItems.length === 0">No filtered results!</h3>
</ng-container>