How do I use async pipe instead of using subscribe?

Question

I would like to use the async pipe "| async" instead of subscribing. This is what my subscription code currently looks like:

ngOnInit(): void {
  this.activatedRoute.url
    .pipe(takeUntil(this.unsubscribe$))
      .subscribe(segments => {
        this.quizName = segments[1].toString();
      });
}

and in my template I have: <mat-card *ngIf="quiz.quizId === quizName">

Emilien · Accepted Answer · 2020-09-10 13:37:14Z

3

Let's try this :

quizName$: Observable<any>;

ngOnInit(): void {
  this.quizName$ = this.activatedRoute.url
    .pipe(
      takeUntil(this.unsubscribe$),
      map(segments => segments[1].toString()); // Not sure about this part
    );
}

<mat-card *ngIf="(quizName$ | async) === quiz.quizId">

Be careful, everytime you will use async pipe in your template, it will make a subscribe.

answered Sep 10, 2020 at 13:37

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andriishupta · Accepted Answer · 2020-09-10 14:02:55Z

3

Add variable:

quizName$ = this.activatedRoute.url.pipe(map(segments => segments[1].toString()));

no need for takeUntil such as "| async" does it
optional(your IDE would know about it by itself)

quizName$: Observable<string> ...

in HTML:

*ngIf="(quizName$ | async) === quiz.quizId"

more "robust" solution

showQuiz$: Observable<boolean> = this.activatedRoute.url.pipe(
  map(segments => segments[1].toString()),
  map(quizName => quizName === this.quiz && this.quiz.id)
);

*ngIf="showQuiz$ | async"

edited Sep 10, 2020 at 14:02

answered Sep 10, 2020 at 13:45

andriishupta

5875 silver badges10 bronze badges

4 Comments

integral100x Over a year ago

Thank you, but I'm going the previous solution because it's simpler and I'm retrieving quizId from a for loop in the template.

andriishupta Over a year ago

np ;) tip: loops, ifs, etc - it is mixing imperative and reactive(rx)/functional programming. it is possible to arrange streams with different operators(and creational observables).

andriishupta Over a year ago

about quiz - though it was Input

Emilien Over a year ago

@andriishupta Thanks for your answer ! I didn't know async pipe could manage takeUntil :)

Collectives™ on Stack Overflow

How do I use async pipe instead of using subscribe?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related