text: Q:
  
  Dúvida angular - ngrx
  
  Olá
  Estava lendo sobre NgRx e me deparei com isso:
  <div>Current Count: {{ count$ | async }}</div>
  
  O que esse "|" quer dizer?
  
  A:
  
  Isto | se chama PIPE (https://angular.io/guide/pipes), ele basicamente pega o input e "transforma" na saída desejada, no seu você está usando o chamado "AsyncPipe
   impuro", que basicamente é o pipe que aceita Promises e Observables, ou seja ele passa o valor retornado por um destes diretamente ao teu "elemento"
  Você poderia até mesmo retornar um array via Promise ou Observable que ele iria pegar o valor e então sim "popular" no template, algo como:
  *ngFor="let item of dados | async"
  
  Em um Observable ele continua observando e entregando esses valores a medida que eles vão chegando, um exemplo da propria documentação:
  import { Component } from '@angular/core';
  
  import { Observable, interval } from 'rxjs';
  import { map, take } from 'rxjs/operators';
  
  @Component({
    selector: 'app-hero-message',
    template: `
      <h2>Async Hero Message and AsyncPipe</h2>
      <p>Message: {{ message$ | async }}</p>
      <button (click)="resend()">Resend</button>`,
  })
  export class HeroAsyncMessageComponent {
    message$: Observable<string>;
  
    private messages = [
      'You are my hero!',
      'You are the best hero!',
      'Will you be my hero?'
    ];
  
    constructor() { this.resend(); }
  
    resend() {
      this.message$ = interval(500).pipe(
        map(i => this.messages[i]),
        take(this.messages.length)
      );
    }
  }
  
  Note que o meio segundo (500ms) é para você notar a troca entre cada item, basicamente ele vai exibindo um de cada vez por causa do interval(500), seria interessante para um sistema de "status".
  Para ficar mais fácil de entender criei um exemplo que você pode testar online:
  
  https://stackblitz.com/edit/angular-6-playground-15djzg?file=src/app/app.component.html
  
  