Observables in Angular

Angular uses observables as an interface to handle many common asynchronous operations. Observables provide support for sharing data between the publishers and subscribers in an Angular application.

It is a better technique for handling multiple values than techniques like event handling, asynchronous programming, and promises.

A special feature of Observables is as it can access by a subscriber that subscribes to it. A function is defined to publish values, but the subscribed consumer does not execute it. An observable can provide any number of values at a time.

The API for getting the value is the same in either case, and both setup and logic are handled by the observable. The best part is about subscribing and unsubscribing only for the necessary information.

For example:

You have to define custom events that send observable output data from the child to the parent component.

The HTTP module uses the observables to handle AJAX requests and responses.

Routers and forms modules use observables to listen and respond to user-input events.

Transmitting Data between Components

Angular provides an event emitting class used when publishing values from a component via the @Output() decorator. The event emitter extends RxJSSubject, adding an emit() method to send arbitrary values. When you call to emit(), it passes the emitted value to any subscribed observer’s next() method.

Here is example component that listens for open and close events:

Below is the component definition:

EventEmitter  content_copy@Component({    selector: ‘app-zippy’,    template: `      <div class=”zippy”>        <div (click)=”toggle()”>Toggle</div>        <div [hidden]=”!visible”>          <ng-content></ng-content>        </div>      </div>    `,  })  export class ZippyComponent {    visible = true;    @Output() open = new EventEmitter<any>();    @Output() close = new EventEmitter<any>();    toggle() {      this.visible = !this.visible;      if (this.visible) {        this.open.emit(null);      } else {        this.close.emit(null);      }    }  }  

HTTP

Angular’s HttpClient returns the observable from the HTTP method call.

For example, http.get(‘/API) returns an observable. It provides several advantages over Promises-based HTTP APIs:

Observables do not change the server response. You can use a series of operators to change the values as needed.

HTTP requests are cancellable via the unsubscribe () method.
Requests can be configured to receive progress event updates.
Failed requests can be easily retried.

Async Pipe

AsyncPipe subscribes to an observable and returns the latest value emitted by it. The pipe marks the component to be checked for changes when a new value is emitted.

The following example binds the observable time to the component’s view. The observable updates the view with the current time.

  Using async pipe  content_copy@Component({    selector: ‘async-observable-pipe’,    template: `<div><code>observable|async</code>:         Time: {{ time | async }}</div>`  })  export class AsyncObservablePipeComponent {    time = new Observable<string>(observer => {      setInterval(() => observer.next(new Date().toString()), 1000);    });  }  

Router

The router provides events as observables. We can use the filter() operator from RxJS to look for events of interest and subscribe them to make decisions based on the sequence of events in the navigation process. Below is the example:

Router events

  content_copyimport { Router, NavigationStart } from ‘@angular/router’;  import { filter } from ‘rxjs/operators’;  @Component({    selector: ‘app-routable’,    template: ‘Routable1Component template’  })  export class Routable1Component implements OnInit {    navStart: Observable;    constructor(router: Router) {      // Create a new Observable that publishes only the NavigationStart event      this.navStart = router.events.pipe(        filter(evt => evt instanceof NavigationStart)      ) as Observable;    }    ngOnInit() {      this.navStart.subscribe(() => console.log(‘Navigation Started!’));    }  }  

Dynamic routing is an injected router service that uses observables to obtain information about route paths and parameters.

For example, ActivatedRoute.url has an observable that reports a route path or paths.

ActivatedRoute

  content_copyimport { ActivatedRoute } from ‘@angular/router’;  @Component({    selector: ‘app-routable’,    template: ‘Routable2Component template’  })  export class Routable2Component implements OnInit {    constructor(private activatedRoute: ActivatedRoute) {}    ngOnInit() {      this.activatedRoute.url        .subscribe(url => console.log(‘The URL changed to: ‘ + url));    }  }  

Reactive forms

Reactive forms use observables to monitor form control values. FormControl properties value change and state change have observables that raise change events.

Subscribing to an observable form-control property is a way to trigger application logic within a component class.

  content_copyimport { FormGroup } from ‘@angular/forms’;  @Component({    selector: ‘my-component’,    template: ‘MyComponent Template’  })  export class MyComponent implements OnInit {    nameChangeLog: string[] = [];    heroForm!: FormGroup;    ngOnInit() {      this.logNameChange();    }    logNameChange() {      const nameControl = this.heroForm.get(‘name’);      nameControl?.valueChanges.forEach(        (value: string) => this.nameChangeLog.push(value)      );    }  }  

Error Handling:

Observables generate values asynchronously, and thus there is no error in try/catch because it can stop the code regardless of other tasks running at the time.
Instead, we handle errors by specifying an error callback on the observer. An observable can either produce a value (calling the next callback) or call the complete, complete, or error callbacks. When an error occurs, it clears the observable subscription and stops producing that subscription value.

Syntax:

  observable.subscribe({      next(val) { console.log(‘Next: ‘ + val)},      error(err) { console.log(‘Error: ‘ + err)}  });  

Next TopicAngular Lifecycle

Observables in Angular

Observables in Angular

Transmitting Data between Components

HTTP

Async Pipe

Router

Router events

Reactive forms

Error Handling:

AngularJS AJAX

Cordova App Templates

You may also like