get-todos-on-push-finalize.ts

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
import { finalize } from 'rxjs/operators';
 
@Component({
  selector: 'app-todos',
  template: `
    <button (click)="loadTodos()">Load todos</button>
    <app-todo *ngFor="let todo of todos" [todo]="todo"></app-todo>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodosComponent {
  public todos: Todo[] = [];
 
  constructor(private ref: ChangeDetectorRef, private todoService: TodoService) {}
 
  public loadTodos(): void {
    this.todoService.getTodos().pipe(
      finalize(() => this.ref.detectChanges())
    ).subscribe((todos) => {
      this.todos = todos;
    });
  }
}