Filter array in template Angular2

Question

I'm trying to make simple template but I came across little issue. I want to print the number of uncompleted task in my todo list, but can't filter them inside template. I have this:

<span class="todo-count"><strong>{{todos.length}}</strong> left</span>

But I want to filter this todos to count just ones that have status completed set to false:

<span class="todo-count"><strong>{{todos.filter(t => !t.complete).length}}</strong> left</span>

But this isn't working. How can I achieve that?

Answer 1

The most correct way to do this is with an Angular pipe:

template

<span class="todo-count"><strong>{{ (todos | filter : filterFunction).length }}</strong> left</span>

pipe

import {
    Injector,
    Pipe,
    PipeTransform
} from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

    public constructor(private readonly injector: Injector) {
    }

    transform(value: Array<any>, callback: any): any {
        return value.filter(callback);
    }
}

filterFunction in the component controller

filterFunction(t): boolean {
  return !t.complete;
}

you can see why not use methods in angular templates here Don't Use Functions Inside Angular Templates and What to Use Instead. For short This is because of the change detection mechanism in Angular. Angular cannot detect whether the result of a function is changed until it runs the function function.

The thing to consider is that the function will be run even though we have the same input data