Angular Model Pattern - component state subscription

ampe-component-subscription.ts

@Component({
  selector: 'todos',
  template: `
    <!-- 
       accessing multiple properties, 
       we're better off subscribing only once in component's ngOnInit()
    -->
    Done todos: {{count.done}}
    Remaining todos: {{count.remaining}}
    All todos: {{count.all}}
    <ul>
    
      <!-- implicit subscription using | async pipe -->
      <li *ngFor="let todo of todosService.todos$ | async;">
        {{todo.name}}
      </li>
    </ul>
  `
})
export class TodosComponent implements OnInit, OnDestroy {

  subscription: Subscription;
  
  counts: TodosCounts;
  
  constructor(public todosService: TodosService) { }

  ngOnInit() {
  
    // explicit subscription using .subscribe()
    this.subscription = this.todosService.todosCounts$
      .subscribe(counts => (this.counts = counts)));
  }

  ngOnDestroy() {
    subscription.unsubscribe();
  }

}