How to display observable of an object in angular

It is very easy to display observable in angular using the async pipe.

For example,

If you wanna display an observable of string in angular, it will go like this =>

demo.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
  astring$: Observable<string>;

  constructor() { }

  ngOnInit() {
    this.astring$ = of("Hello Observable!!!")
  }

}

demo.component.html

  <p *ngIf="astring$">
    {{ astring$ | async }}
  </p>

Results

Hello Observable!!!

Display an observable of object

Similar way, we can display observable of the object also.

demo.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

export interface Person {
  name: string;
  place: string;
}

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  myself$: Observable<Person>;

  constructor() { }

  ngOnInit() {

    this.myself$ = of({
      name: 'Amrish',
      place: 'Bangalore'
    })
  }

}

demo.component.ts

<div *ngIf="myself$">
  <p>Name: <span>{{ (myself$ | async).name }}</span></p>
  <p>Place: <span>{{ (myself$ | async).place }}</span></p>
</div>

Result is

Name: Amrish
Place: Bangalore

---

And also the most efficient way to display it will be

demo.component.ts

<div>
  <div *ngIf="myself$ | async as myself">
    <p>Name: <span>{{ myself.name }}</span></p>
    <p>Place: <span>{{ myself.place }}</span></p>
  </div>
</div>

Comments

[Madhavan Sundararaj]

If there are any changes to the name attribute, it will be automatically reflected on the screen because of observable?

[Amrish Kushwaha]

yes!!

you can use setTimeout() to test it.

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

export interface Person {
  name: string;
  place: string;
}

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  myself$: Observable<Person>;

  constructor() { }

  ngOnInit() {

    this.myself$ = of({
      name: 'Amrish',
      place: 'Bangalore'
    })

    setTimeout(() => {
      this.myself$ = of({
        name: 'John Doe',
        place: 'Bangalore'
      })
    }, 3000)
  }

}

[Francis Rodrigues]

How can I update this data after form submission, for instance?

[Vivek Pandita]

Why you have used $ sign with observable property in above examples like astring$, myself$? Is it any convention?

[Amrish Kushwaha]

I don't know whether it is convention or not. I generally use $ sign at the end of variable to differentiate variables between regular and observable ones.

[Francis Rodrigues]

Yes, it is defined as a naming convention for Observables.
stackoverflow.com/a/37928549/3332734
angular.io/guide/rx-library#naming...