Async pipe for template subscriptions in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the observable value using async pipe in the template.

Angular

<p>{{ dataObservable[1] }}</p>

Drag options to blanks, or click blank then click option'

A| map

B| subscribe

C| then

D| async

Attempts:

3 left

💡 Hint

Common Mistakes

Using '| subscribe' which is not a valid Angular template pipe.

Trying to manually subscribe in the template.

The async pipe subscribes to the observable and displays its latest value automatically.

2fill in blank

medium

Complete the code to assign the observable value to a template variable using async pipe.

Angular

<ng-container *ngIf="userObservable[1] as user">
  <p>{{ user.name }}</p>
</ng-container>

Drag options to blanks, or click blank then click option'

A| async

B| filter

C| map

D| subscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using '| subscribe' which is invalid in templates.

Not using 'as' to assign the variable.

The async pipe allows assigning the emitted value to a template variable with as.

3fill in blank

hard

Fix the error in the template to correctly display the observable's emitted value.

Angular

<div>{{ messageObservable[1] }}</div>

Drag options to blanks, or click blank then click option'

A| async

B| subscribe

C.subscribe()

D| then

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call '.subscribe()' in the template.

Using '| subscribe' which is not a valid pipe.

The async pipe is the correct way to unwrap observables in Angular templates. Using '.subscribe()' or '| subscribe' causes errors.

4fill in blank

hard

Fill both blanks to correctly use async pipe with ngIf and assign the value to a variable.

Angular

<div *ngIf="profileObservable[1][2]profile">
  <p>{{ profile.email }}</p>
</div>

Drag options to blanks, or click blank then click option'

A| async

B| subscribe

C as

D let

Attempts:

3 left

💡 Hint

Common Mistakes

Using '| subscribe' instead of '| async'.

Using 'let' instead of 'as' in ngIf.

Use | async to unwrap the observable and as to assign the value to a template variable.

5fill in blank

hard

Fill all three blanks to unwrap the observable, filter items with price greater than 20, and transform the price in the template.

Angular

<div *ngIf="itemsObservable[1] as items">
  <ul>
    <ng-container *ngFor="let item of items">
      <li *ngIf="item.price [2] 20">
        {{ item.name }} - {{ item.price [3] 1.2 | number:'1.2-2' }}
      </li>
    </ng-container>
  </ul>
</div>

Drag options to blanks, or click blank then click option'

A| async

B>

C*

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '| subscribe' instead of '| async'.

Using '<' instead of '>' in the price filter.

Forgetting to multiply price before formatting.

Use | async to unwrap the observable, filter items with price greater than 20, and multiply price by 1.2 for display.