DEV Community

How to display observable of an object in angular

Amrish Kushwaha on September 08, 2019

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 w...
Read full post
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...