<h1>Heroes</h1>

<app-hero-filter (changed)="filterHeroes($event)"></app-hero-filter>

<div class="flex-container" fxLayout="row" fxLayoutWrap="wrap" fxLayoutGap="10px">
  <app-hero-card *ngFor="let hero of heroes | async" [hero]="hero" class="flex-item"></app-hero-card>
</div>

<h1>Heroes</h1>

<app-hero-filter (changed)="filterHeroes($event)"></app-hero-filter>

<div class="flex-container" fxLayout="row" fxLayoutWrap="wrap" fxLayoutGap="10px">
  <app-hero-card *ngFor="let hero of heroes | async" [hero]="hero" class="flex-item"></app-hero-card>
</div>

<div>
  {{(heroes | async)?.length}} hero{{(heroes | async)?.length < 2 ? '' : 'es'}} found.
</div>

Add number of hero found
Add number of hero found
