How to consume single Observable property in view from Angular2 component using async pipe?

Question

If I have a component with a property of:

import { Component, OnInit } from 'angular2/core';
import { CarService } from 'someservice';

@Component({
    selector: 'car-detail',
    templateUrl: './app/cars/car.component.html'
})

export class CarComponent implements OnInit {

    model: Observable<Car>;

    constructor(
        private _carService: CarService
    ) { }

    ngOnInit() {
        // begin benefit setup
        this.model = this._carService.get(5);
    }
}

for instance, and I want to in my view use an async pipe to subscribe to that and use the properties as text, how can you actually subscribe to it? For instance:

<template #mycar = "model | async" >
    <p>{{ myCar?.make }}</p> 
</template>

I am new to Angular2 and not sure if I am doing something wrong or not.

Your question doesn't show how `model` gets a value assigned. With the code above alone it's no surprise that nothing is happening. — Günter Zöchbauer, May 05 '16 at 18:48
I do not think you can do it this way, this person: https://github.com/escardin pointed me to the following plunker he created: http://plnkr.co/edit/YMdm2dqUvMEJgeLeftwK?p=preview. — Tomasz Iniewicz, May 05 '16 at 19:11
May be this can help.. http://stackoverflow.com/questions/36803389/angular2-async-pipe-not-does-not-fill-object-data-into-template — Sanjay Maharjan, Jul 21 '16 at 10:53

score 2 · Accepted Answer · answered May 21 '19 at 07:03

2

I believe you were close to a good solution.

<template *ngIf = "model | async as mycar" >
    <p>{{ mycar.make }}</p> 
</template>

answered May 21 '19 at 07:03

Dariusz Mozgowoj

46
5

score 0 · Answer 2 · answered Oct 23 '16 at 12:50

0

Try:

<template #mycar = "model | async" >
    <p>{{ (myCar | async).make }}</p> 
</template>

answered Oct 23 '16 at 12:50

Meir

14,081
4
39
47

wouldn't this create two subscriptions? – Tomasz Iniewicz Dec 04 '20 at 19:14

How to consume single Observable property in view from Angular2 component using async pipe?

2 Answers2