Adding a where condition to an ngFor

Completely from the view, you can filter out content as follows

<ng-container *ngFor="let p of (active | keys)">
    <div *ngIf="p.age > 18">
        {{ p.name }}
    </div>
</ng-container>

Usually as a good practice you should reduce as much as you can having logic on the view. Having this I would filter the array on the component and then iterate it on the view.

If you want you can keep the original array and then create a getter for the filtered array

get filterByAge() {
  return active.filter( x => x.age > 18);
}

And then in your loop just do

<div *ngFor="let p of filterByAge">
{{ p.name }}

Tags:

Angular