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>
Top comments (6)
If there are any changes to the name attribute, it will be automatically reflected on the screen because of observable?
yes!!
you can use setTimeout() to test it.
How can I update this data after form submission, for instance?
Why you have used $ sign with observable property in above examples like astring$, myself$? Is it any convention?
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.
Yes, it is defined as a naming convention for Observables.
stackoverflow.com/a/37928549/3332734
angular.io/guide/rx-library#naming...