DEV Community

Amrish Kushwaha
Amrish Kushwaha

Posted on

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!!!")
  }

}
Enter fullscreen mode Exit fullscreen mode

demo.component.html

  <p *ngIf="astring$">
    {{ astring$ | async }}
  </p>
Enter fullscreen mode Exit fullscreen mode

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'
    })
  }

}

Enter fullscreen mode Exit fullscreen mode

demo.component.ts

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

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (6)

Collapse
 
maddy2894 profile image
Madhavan Sundararaj

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

Collapse
 
isamrish profile image
Amrish Kushwaha • Edited

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)
  }

}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
francisrod01 profile image
Francis Rodrigues

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

Collapse
 
vivekpandita profile image
Vivek Pandita

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

Collapse
 
isamrish profile image
Amrish Kushwaha • Edited

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.

Collapse
 
francisrod01 profile image
Francis Rodrigues

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