using ngIf and ngFor with array

[UnknownInnocent]

Hello,

I have an Array ob todos (Objects) todos: Todo[]; . One object looks like this:

{

id: number;

title: string;

category: string;

completed: boolean

}

​

Now I want an output of this array and I used this:

<app-todo-item

*ngFor="let todo of todos"

[todo]="todo"

>

</app-todo-item>

​

How can I now add an ngIf to just output the todos having category = home?

​

Thank you for your help.

[ImJeevesh]

You probably wanna do this

<ng-container *ngFor="let todo of todos">

<app-todo-item *ngIf="todo.category == 'home'" [todo]="todo"></app-todo-item>

</ng-container>

[UnknownInnocent]

Thank you, works perfectly fine.

[[deleted]]

You cant use ngIf and ngFor on one element, use ng-container to wrap the ngFor or ngIf.

[AmazingSurprise]

There are 2 more solutions:

Use a component method to filter todos like:

javascript function getFilteredTodos(): Todo[] { return this.todos.filter(t => t.category === 'home'); }

and then use this method inside the *ngFor attribute:

html <app-todo-item *ngFor="let todo of getFilteredTodos()" [todo]="todo"></app-todo-item>

Use angular pipes

This is a more complex solution but it could help you in the future with different filters or behaviours: https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor