DEV Community

loading...

How to display observable of an object in angular

isamrish profile image Amrish Kushwaha ・1 min read

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

Discussion (6)

pic
Editor guide
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 Author • 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 Author • 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