A very simple example usecase in an angular component file – accessControl.component.ts – which is using reselect package – I have the following
@select(currentRolesListDataSelector)
accessControl$: Observable<Role[]>;
accessControl: Role[];
In the above,
accessControl$ is name for observable , and
accessControl is name for the variable
And below is the way I access it inside ngOnInit()
ngOnInit() {
this.accessControl$.subscribe(hello => {
console.log("accessControl ", hello);
this.accessControl = hello;
});
}
Example-2 – Http’s Observable
Angular 7 Http Service now returns an Observable by default instead of a Promise. Let’s see how we can handle this. First adding the HttpModule in the app.module.ts:
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
.
.
HttpModule
]
.
.
})
export class AppModule {}
import { Http } from '@angular/http';
export class AppComponent {
constructor(private http: Http) { }
}
extractData(response) {
const body = response.json();
return body || { };
}
// Now we make a request to a cool API service:
ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/posts')
.pipe(map(this.extractData))
.subscribe(this.handleData, this.handleError, this.handleComplete);
}
The subscribe method allows us to handle three cases:
When it’s all good and there are data (we will call a method named handleData) When it’s very bad and there is an error (we will call a method named handleError) When the flow gets closed (we will call a method named handleComplete)
Map
Map’s job is to transform things.
map is a pretty simple operator. It takes a projection function (here its the extractData function), and applies it to each value that comes from the source observable.
Observables compared to promises Observables are often compared to promises. Here are some key differences:
Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.
Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.
Observables differentiate between chaining and subscription. Promises only have .then() clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.
Observables subscribe() is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.
