Angular doubt - ngrx

Asked

Viewed 72 times

0

Hello I was reading about Ngrx and I came across it:

<div>Current Count: {{ count$ | async }}</div>

What does this "|" mean?

angularjs angular
  • 1

    This | is a pipe.

1 answer

1


This | is called PIPE (https://angular.io/guide/pipes), it basically takes the input and "transforms" in the desired output, in your you are using the so-called "Asyncpipe impure", which is basically the pipe that accepts Promises and Observables, ie it passes the value returned by one of these directly to your "element"

You could even return an array via Promise or Observable that it would pick up the value and then yes "popular" in the template, something like:

*ngFor="let item of dados | async"

In an Observable he continues to observe and deliver these values as they arrive, an example of the documentation itself:

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 that the middle second (500ms) is for you to notice the exchange between each item, basically it will display one at a time because of the interval(500), would be interesting for a system of "status".

To make it easier to understand I created an example that you can test online:

Browser other questions tagged angularjs angular

You are not signed in. Login or sign up in order to post.