DEV Community

Amrish Kushwaha
Amrish Kushwaha

Posted on

How to display observable of an object in angular

#observable #rxjs #typescript #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...

Read next

marcuskohlberg profile image

Advanced value-based validation in Rust for Node.js apps

Marcus Kohlberg -

michalina_graczyk profile image

From Cypress to Playwright - Saleor’s Voyage

Michalina Graczyk -

alexsergey profile image

Mastering the Dependency Inversion Principle: Best Practices for Clean Code with DI

Sergey -

jps27cse profile image

Angular 19 introduces Incremental Hydration for better performance, the linkedSignal API for easier state management, a new Resource API for async handling, standalone components by default, and a strictStandalone flag for enforcing best practices.

Jack Pritom Soren -