Angular Observable Array Examples

Angular Observable Array Examples

This tutorial shows an example for

  • Declare an observable array
  • How to create an observable array in the Angular application?
  • Convert Observable Array to Array
  • Display Observable Array to HTML
  • Length of an observable Array.

Observable are objects in RXJS for asynchronous operations in Angular applications.

How to declare and initialize an observable Array of Objects in Angular

  • Create an observable array

Like a normal array declaration in Angular,

public observableUsers$: Observable<User>[]=[];

User is a class or interfaces in Typescript. $ symbol is a notation for the declaration of an observable and is not compulsory. Create an empty observable of the type User object.

  • Initialize an Observable array

Let’s create an observable array of strings.

public observableUsers$: Observable<String>[]=[];

And initialize a string of data using Observable type.

public observableUsers$: Observable<String>[]=of(["test", "test2", "test3"]);

Observable and of are types imported from the rxjs module

import { Observable, of } from "rxjs";

Here is a component code for Create Observable Array in Angular

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private strings$: Observable<string[]> = of(["test", "test2", "test3"]);

  constructor() { }

}

Convert Observable Array to/from Array

Sometimes, We need to convert Observable to/from an array.

Let’s see how to do this.

Convert Observable to An Array with an example

usually, We have a subscribe method for API consumption, inside this method, we have observable data that convert straightway to an array without any API.

Another way using, the Pipe and Take methods from rxjs.

this.strings$.pipe(tap((res) => (this.result = res)));

here is a code example to get an array from an observable in Angular.

import { Component } from '@angular/core';
import { from, Observable, of, take, tap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
   strings$: Observable<string[]> = of(["test", "test2", "test3"]);
  private result: string[] = [];
  constructor() {
    this.strings$.pipe(tap(res => this.result = res));
  }

}

How to convert array to observable in Angular

We can use Observable. ofmethod to convert an array to observable.

Declare and initialized an array Pass this array to the of method

  private myarray: string[] = ["test", "test2", "test3"]
  private strings: Observable<string[]> = of(this.myarray);

Here is a complete code in Angular.

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private myarray: string[] = ["test", "test2", "test3"]
  private strings$: Observable<string[]> = of(this.myarray);

  constructor() { }

}

Length of an observable array in Angular

Sometimes, We want to find the length of an array to check an empty length.

We have to use async for the ngIf directive to check the length of an observable array.

Here is a code snippet

<div *ngIf="(strings$ | async)?.length==0">No Strings found.</div>

Angular uses ngFor directives to display enumerable data.

To display observables, use an async pipe with ngFor directive as seen below.

<div *ngFor="let str of strings$ | async">{{str}}</div>

You can also use the same syntax to display an array of object types.