Compressing View Logic with Facades

books-page.component.ts

/**
 *
 * Snippet from blog article:  https://auth0.com/blog/ngrx-facades-pros-and-cons/
 *
 */

@Component({
  selector: 'abl-books-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <mat-card>
      <mat-card-title>My Collection</mat-card-title>
      <mat-card-actions>
        <button mat-button raised color="accent" (click)="logout()">Logout</button>
      </mat-card-actions>
    </mat-card>
    <abl-book-preview-list [books]="books$ | async"></abl-book-preview-list>
})
export class BooksPageComponent implements OnInit {
  books$: Observable<Book[]>;

  constructor(private booksFacade: BooksFacadeService) {
    this.books$ = booksFacade.allBooks$;
  }

  ngOnInit() {
    this.booksFacade.dispatch(new BooksPageActions.Load());
  }
}
    
    
    

I would've done

export class BooksPageComponent {
  constructor(public facade: BooksFacadeService) {  }
}

and

<abl-book-preview-list [books]="facade.allBooks$ | async"></abl-book-preview-list>

Even simpler! Thanks for bringing us this awesome pattern, Thomas!