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>
Oldest comments (6)
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...
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?