title: Alternative for impure pipes in Angular 6?
body: <p>I'm trying to write a simple todo app to learn Angular 6. In my app, todos can be completed or uncompleted and I want to display the number of uncompleted todos in footer component.</p>
  
  <p>I have a todos component that shows the list of todos:</p>
  
  <p><strong>todos.component.ts</strong></p>
  
  <pre><code>export class TodosComponent implements OnInit {
    todos: Todo[];
    constructor(private todoService: TodoService) { 
      this.todos = todoService.GetAll();
    }
    ngOnInit() {}
    ToggleTodoCompleted(id: number): void{
      this.todoService.Toggle(id);
    }
  }
  </code></pre>
  
  <p>another component to add todo:</p>
  
  <p><strong>todo-add.component.ts</strong></p>
  
  <pre><code>export class TodoAddComponent implements OnInit {
    constructor(private todoService: TodoService) { }
    ngOnInit() {}
    AddTodo(todoTitle){
      let todo = new Todo();
      todo.title = todoTitle;
      this.todoService.Add(todo);
    }
  }
  </code></pre>
  
  <p>a footer component that I use an impure pipe to show the number of uncompleted todos in it:</p>
  
  <p><strong>footer.component.ts</strong></p>
  
  <pre><code>export class FooterComponent implements OnInit {
    todos: Todo[] = [];
    constructor(private todoService: TodoService) { 
      this.todos = todoService.GetAll();
    }
    ngOnInit() {}
  }
  </code></pre>
  
  <p><strong>uncompleted-todos.pipe.ts</strong></p>
  
  <pre><code>@Pipe({
    name: 'uncompletedTodos',
    pure: false
  })
  export class UncompletedTodosPipe implements PipeTransform {
  
    transform(todos: Todo[]): any {
      return todos.filter(t=&gt;t.completed===false);
    }
  }
  </code></pre>
  
  <p><strong>footer.component.html</strong></p>
  
  <pre><code>{{(todos|uncompletedTodos).length}} items left
  </code></pre>
  
  <p>and a simple service:</p>
  
  <p><strong>todo.service.ts</strong></p>
  
  <pre><code>export class TodoService {
    private todos: Todo[] = [];
    GetAll(): Todo[]{
      return this.todos;
    }
    Add(todo: Todo): void{
      todo.id = this.todos.length + 1;
      todo.completed = false;
      this.todos.push(todo);
    }
    Toggle(id: number): void{
      let todo = this.todos.find(t =&gt; t.id === id); 
      todo.completed = !todo.completed;
    }
  }
  </code></pre>
  
  <p>But I read in the Angular documentation that impure pipes can cause performance issues. So what is the alternative for that? How can I write my code without this impure pipe?</p>