Angular + Observable Example

By Arvind Rai, February 28, 2018

This page will walk through how to use Observable in our Angular application. Observable belongs to RxJS library. To perform asynchronous programming in Angular application we can use either Observable or Promise. When we send and receive data over HTTP, we need to deal it asynchronously because fetching data over HTTP may take time. Observable is subscribed by using async pipe or by using subscribe method.
Observable is a class of RxJS library. RxJS is ReactiveX library for JavaScript that performs reactive programming. Observable represents any set of values over any amount of time. Observable plays most basic role in reactive programming with RxJS. Some methods of Observable class are subscribe, map, mergeMap, switchMap, exhaustMap, debounceTime, of, retry, catch, throw etc.
To use RxJS library in Angular programming we need to ensure that we have installed RxJS. In case we are using Angular CLI, it installs RxJS by default. We can ensure it by checking package.json. If RxJS is not there in package.json, we can install it as following.

npm install rxjs --save

To use Observable in our Angular application, we need to import it as following.

import { Observable } from 'rxjs/Observable';

Now we will discuss using Observable in our Angular application step by step with complete example.

1. Technologies Used
2. Angular HttpClient and Observable
3. Observable + Async Pipe + NgFor
4. Observable + Async Pipe + NgIf
5. Observable subscribe
6. Observable map
7. Observable mergeMap
8. Observable switchMap
9. Observable of
10. Observable Error Handling
11. Angular In-Memory Web API to Test Application
12. Complete Example
13. Run Application
14. References
15. Download Source Code

1. Technologies Used

Find the technologies being used in our example.
1. Angular 5.2.0
2. Angular CLI 1.7.1
3. TypeScript 2.5.3
4. Node.js 6.11.0
5. NPM 3.10.10
6. In-Memory Web API 0.5.3

2. Angular HttpClient and Observable

Angular HttpClient performs HTTP requests for the given URL. HttpClient works with Observable. Find some of its methods.

get(url: string, options: {...}): Observable<any>
post(url: string, body: any | null, options: {...}): Observable<any>
put(url: string, body: any | null, options: {...}): Observable<any>
delete(url: string, options: {...}): Observable<any>

Look into return types of the above methods, each and every method of HttpClient returns instance of Observable. When we subscribe to the Observable instance, then actual HTTP operation is performed. The Observable instances can also be executed using Async Pipe. Find the sample code to use HttpClient to perform HTTP GET operations.

getBooksFromStore(): Observable<Book[]> {
   return this.http.get<Book[]>(this.bookUrl);
}

HttpClient.get returns Observable<any> but we can generalize it by our required data type, for example we are returning here Observable<Book[]> .

3. Observable + Async Pipe + NgFor

Angular async pipe subscribes to Observable and returns its last emitted value. Here we will provide code snippets to use Observable using async pipe with ngFor.
Step-1: We will create a method to fetch data over HTTP using Angular HttpClient in our service, suppose in BookService, as following.

getBooksFromStore(): Observable<Book[]> {
   return this.http.get<Book[]>(this.bookUrl);
}

The above method will return Observable<Book[]>.
Step-2: In our component we will create a property.

allBooks$: Observable<Book[]>

Using $ at the end of property name is customary to define an Observable variable. Now we will call the service method and assign value to the allBooks$ property in our component.

getBooks() {
   this.allBooks$ = this.bookService.getBooksFromStore();
}

In our demo, we are calling the above method in ngOnInit.

ngOnInit() {
  this.getBooks();	
}

Step-3: Now we will subscribe our Observable variable i.e. allBooks$ using async pipe. We need to keep in mind that HTTP hit will take place only when we subscribe our Observable variable. In our HTML template we will subscribe our Observable variable i.e. allBooks$ using async pipe with ngFor.

<ul>
  <li *ngFor="let book of allBooks$ | async" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

4. Observable + Async Pipe + NgIf

Here we will provide how to use Observable using async pipe with ngIf. We will fetch data over HTTP and will display it. We will show loading image while data is being fetched over HTTP.
Step-1: We have created a method in service, suppose in BookService, to fetch data over HTTP for the demo.

getFavBookFromStore(id: number): Observable<Book> {
   return this.http.get<Book>(this.bookUrl + "/" + id);
}

The above method will return Observable<Book>.
Step-2: In component we have created a property of Observable type.

favBook$: Observable<Book>

We will assign value to favBook$ as following.

getFavBook() {
   this.favBook$ = this.bookService.getFavBookFromStore(101); 
}

We are calling the above method in ngOnInit for demo.

ngOnInit() {
   this.getFavBook();
}

Step-3: Now we will display data in HTML template. We will subscribe Observable variable favBook$ using async pipe.

<div *ngIf="favBook$ | async as book; else loading">
   Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
</div>
<ng-template #loading>
   <img src="assets/images/loading.gif">
</ng-template>

A loading image will be displayed until we get response from HTTP request. After getting HTTP response, the book array will be iterated.

subscribe is a method of Observable class. subscribe is used to invoke Observable to execute and then it emits the result. If we have an Observable variable that fetches data over an HTTP then actual hit to server takes place only when we subscribe to Observable using subscribe method or async pipe. Here we will discuss subscribe method to subscribe to Observable.
Step-1: We have created a method in service, suppose in BookService, to fetch data over HTTP.

getBooksFromStore(): Observable<Book[]> {
   return this.http.get<Book[]>(this.bookUrl);
}

The above method will return Observable<Book[]>
Step-2: We will create a component property as following.

softBooks: Book[];

Now in component we will subscribe to the Observable result of getBooksFromStore() as following.

getsoftBooks() {
   this.bookService.getBooksFromStore().subscribe(books => this.softBooks = books);
}

For the demo we are calling the above method in ngOnInit.

ngOnInit() {
    this.getsoftBooks();
}

Step-3: Now we will display our array softBooks in HTML template using ngFor.

<ul>
  <li *ngFor="let book of softBooks" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

6. Observable map

map is a method of Observable class. map applies a given function to the value of its source Observable and then returns result as Observable. map is imported as following.

import 'rxjs/add/operator/map';

Find the code snippet how to use map in our Angular application.

favBookName$: Observable<string>
getBookName() {
   this.favBookName$ = this.bookService.getFavBookFromStore(101).map(book=> book.name);  
}

In the above code getFavBookFromStore service method is returning Observable<Book>. Using map we have converted it into Observable<string>. The component property favBookName$ will now only emit book name. getFavBookFromStore is defined in BookService as follows.

getFavBookFromStore(id: number): Observable<Book> {
   return this.http.get<Book>(this.bookUrl + "/" + id);
}

favBookName$ can be displayed in HTML template as following.

<div *ngIf="favBookName$ | async as bookName">
  Name: {{bookName}}
</div>

Find the code snippet to use map with subscribe.

favBookName: string;
getBookName() {
   this.bookService.getFavBookFromStore(101).map(book=> book.name).subscribe(name=> {
       this.favBookName = name;
       console.log(name);
   });
}

7. Observable mergeMap

mergeMap is a method of Observable class. mergeMap emits Observable based on the given function. If inner functions returns Observable then final output will be the result of inner Observable emitted data. If it gets multiple request before completing one, then mergeMap maps values by combining those multiple inner Observable into one by merging their emissions. mergeMap is imported as following.

import 'rxjs/add/operator/mergeMap';

Here we will create a sample example how to use mergeMap in our Angular application.

myAllfavBooks$: Observable<Book[]>
getAllFavBooks() {
   this.myAllfavBooks$ = this.bookService.getFavBookFromStore(101)
      .mergeMap(book => this.bookService.getBooksByCategoryFromStore(book.category));
}

In the above code snippet, first we are fetching a favorite book using getFavBookFromStore method then by using this book's category we are fetching all books of same category using getBooksByCategoryFromStore method. Our service methods are defined in BookService as follows.

getFavBookFromStore(id: number): Observable<Book> {
   return this.http.get<Book>(this.bookUrl + "/" + id);
}    
getBooksByCategoryFromStore(category: string): Observable<Book[]> {
   return this.http.get<Book[]>(this.bookUrl + "?category=" + category);
}

myAllfavBooks$ can be displayed in HTML template as following.

<ul>
  <li *ngFor="let book of myAllfavBooks$ | async" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

If we want to use subscribe with mergeMap we can do it as given below.

allFavBooks: Book[];
getAllFavBooks() {
   this.bookService.getFavBookFromStore(101).mergeMap(book => { 
        let category = book.category;
        return this.bookService.getBooksByCategoryFromStore(category);
   }).subscribe(books => {
        this.allFavBooks = books;
   });
}

8. Observable switchMap

switchMap is a method of Observable class. switchMap returns an Observable that emits data by applying the given function. If we have provided an inner Observable to our switchMap function then the final output will be emitted data by inner Observable. If switchMap receives multiple requests to execute inner Observable before completing the existing inner Observable, then it stops the existing execution and starts executing only the latest inner Observable execution request and keeps on doing so. The use case for switchMap could be search functionality where user keeps on changing search keyword before getting result and requires only result for latest search keyword. switchMap is imported in Angular application as following.

import 'rxjs/add/operator/switchMap';

Find the code snippet to use switchMap.

similarBooks$: Observable<Book[]> 
searchSimilarBooks(id: number) {
   this.similarBooks$ = this.bookService.getFavBookFromStore(id)
	.switchMap(book => {
		let category = book.category;
		return this.bookService.getBooksByCategoryFromStore(category);
	})
	.catch(err => of([]));
}

In the above code getFavBookFromStore is returning Observable<Book> and on the basis of book category we are fetching all books of same category by using getBooksByCategoryFromStore that returns Observable<Book[]>. Our final output is the output of inner Observable and hence the final output will be of Observable<Book[]> type. In our BookService these methods are defined as following.

getFavBookFromStore(id: number): Observable<Book> {
    return this.http.get<Book>(this.bookUrl + "/" + id);
}
getBooksByCategoryFromStore(category: string): Observable<Book[]> {
    return this.http.get<Book[]>(this.bookUrl + "?category=" + category);
}

Find the code to use switchMap with subscribe.

similarFavBooks: Book[];
searchSimilarBooks(id: number) {
   this.bookService.getFavBookFromStore(id)
	.switchMap(book => {
		let category = book.category;
		return this.bookService.getBooksByCategoryFromStore(category);
	})
	.catch(err => of([]))
	.subscribe(books => {
		this.similarFavBooks = books;
		console.log(books);
	});
}

9. Observable of

of is a static method of Observable. of is used to create a simple Observable using data passed as argument. of is imported as following.

import { of } from 'rxjs/observable/of';

For the demo, suppose we have a const value as following.

const bookDetails: Book[] = [
    { id: 101, name: 'Angular by Krishna', category: 'Angular' },
    { id: 102, name: 'Core Java by Vishnu', category: 'Java' },
    { id: 103, name: 'NgRx by Rama', category: 'Angular' }
];

We can convert bookDetails into Observable by calling of(bookDetails) . We can create a method to get this result as following.

getBooksFromStore(): Observable<Book[]> {
     return of(bookDetails);
}

If we import Observable as following

import { Observable } from 'rxjs/Rx';

Or if we import Observable and of both as following

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

Then we can call of as Observable.of and we can write our method as below.

getBooksFromStore(): Observable<Book[]> {
     return Observable.of(bookDetails);
}

10. Observable Error Handling

To handle error in Observable, it provides methods such as throw, catch, retry. The method throw can throw custom error. catch method caches the error thrown by Observable and then it can either return new Observable value or can throw custom error using throw. The method retry just retries executing Observable for the given number of times. To handle error in subscribe method, the second argument of subscribe caches the error. Here we will describe all these error handling in detail.

10.1 Observable throw

throw creates an Observable that immediately emits error. throw is a static method of Observable. It is used to conditionally throw error from map, mergeMap, switchMap etc. We can import throw as following.

import 'rxjs/add/Observable/throw';

Find the sample code snippet to use throw in our Angular application.

return this.bookService.getFavBookFromStore(101)
     .map(book=> {
         if(book.name.length < 15) {
             return book.name;
         } else {
             throw('Length less than 15');
         }
     });

getFavBookFromStore returns Observable<Book>.
If we want to call throw using Observable, we need to import Observable as given below.

import { Observable } from 'rxjs/Rx';

Now we can call throw as Observable.throw.

10.2 Observable catch

catch is a method of Observable class. catch method catches errors in the Observable to handle it by returning a new Observable or throwing an error. We can import catch in our Angular application as following.

import 'rxjs/add/operator/catch';

Find the code snippet to use catch.

return this.bookService.getFavBookFromStore(101)
  .map(book=> {
	 if(book.name.length < 15) {
	   return book.name;
	 } else {
	   throw('Length less than 15');
	 }
  })
  .catch(error => {
	 console.log(error);
	 //return of("Default Name");
	 throw(error.message || error);
  });

From catch block, we can return any new value or can throw error.
a. Returning a value: If from catch block we want to return a value, we can do it by returning any Observable instance.

.catch(error => {
   console.log(error);
   return of("Default Name");
});

b. Throwing error: If from catch block we want to throw error, we can throw error as following.

.catch(error => {
   console.log(error);
   throw(error.message || error);
});

In the subscribe method of Observable, second argument is to catch error. We can catch error in subscribe method while subscribing to Observable as following.

this.bookService.getFavBookFromStore(101)
  .map(book=> {
	if(book.name.length < 15) {
	   return book.name;
	} else {
	   throw('Length less than 15');
	}
  })
  .catch(error => {
	console.log(error);
	//return of("Default Name");
	throw(error.message || error);
  })
  .subscribe(name=> {
	  this.bookName = name;
	  console.log(name);
	},
	err => {
	  console.log(err);
	}
  );

Using HttpErrorResponse with subscribe:

When we have an Observable instance obtained from HttpClient methods, there could be scenario as following.

a. If backend returns unsuccessful response codes such as 404, 500 etc then HttpClient will throw error with backend response code.
b. If something goes wrong client-side, for example, an exception is thrown by RxJS operators or if network error prevents the request from completing successfully then actual Error object is thrown by HttpClient.

We can check if error is of Error type or not by using HttpErrorResponse and accordingly log the error messages. HttpErrorResponse can be imported from @angular/common/http library as following.

import { HttpErrorResponse } from '@angular/common/http';

Now find the sample code to log error.

this.bookService.getBooksFromStore().subscribe(books => {
   this.softBooks = books
},
(err: HttpErrorResponse) => {
   if (err.error instanceof Error) {
	//A client-side or network error occurred.
	console.log('An error occurred:', err.error.message);
   } else {
	//Backend returns unsuccessful response codes such as 404, 500 etc.
	console.log('Backend returned status code: ', err.status);
	console.log('Response body:', err.error);
   }
 }
);

10.4 Observable retry

retry is the method of Observable class. Some errors can be handled by just retrying request such as if errors are transient and unlikely to repeat. For example if we have slow network error and our request could not become successful then there are the chances to make request successful if request is retried.
We can retry request automatically by using retry operator. It accepts number argument. Suppose we pass argument as retry(3) then the request will be retried for 3 times. retry is imported from RxJS as following.

import 'rxjs/add/operator/retry';

Find the sample example to use retry.

this.bookService.getBooksFromStore().retry(3).subscribe(books => {
   this.softBooks = books
},
(err: HttpErrorResponse) => {
   if (err.error instanceof Error) {
      //A client-side or network error occurred.
      console.log('An error occurred:', err.error.message);
   } else {
     //Backend returns unsuccessful response codes such as 404, 500 etc.
     console.log('Backend returned status code: ', err.status);
     console.log('Response body:', err.error);
   }
 }
);

11. Angular In-Memory Web API to Test Application

To test our application we need Web Service URL. Angular provides In-Memory Web API that will provide Web Service URL. We can configure URLs with dummy data using In-Memory Web API. Find the steps to use Angular In-Memory Web API.
1. To install Angular In-Memory Web API, run following command.

npm i angular-in-memory-web-api@0.5.3 --save

2. Create a class that will implement InMemoryDbService. Define createDb() method with some dummy data.
test-data.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class TestData implements InMemoryDbService {
  createDb() {
    let bookDetails = [
      { id: 101, name: 'Angular by Krishna', category: 'Angular' },
      { id: 102, name: 'Core Java by Vishnu', category: 'Java' },
      { id: 103, name: 'NgRx by Rama', category: 'Angular' }
    ];
    return { books: bookDetails };
  }
}

We will get following Web Service URL.

/api/books

3. Before using In-Memory Web API we need to import InMemoryWebApiModule in application module and configure TestData class as following.

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

@NgModule({
  imports: [     
      ------
      InMemoryWebApiModule.forRoot(TestData)		
  ],
  ------
})
export class AppModule { }

Find the link for more information on In-Memory Web API.

12. Complete Example

Find the project structure.

my-app
|
|--src
|   |
|   |--app 
|   |   |
|   |   |--book.ts
|   |   |--book.service.ts
|   |   |--book.component.ts
|   |   |--book.component.html
|   |   |
|   |   |--test-data.ts
|   |   |
|   |   |--app.component.ts
|   |   |--app.module.ts 
|   | 
|   |--main.ts
|   |--index.html
|   |--styles.css
|
|   |--assets
|   |   |
|   |   |--images 
|   |   |     |
|   |   |     |--loading.gif 
|   |   |
|   
|--node_modules
|--package.json

Now find the complete code.
book.ts

export interface Book {
   id: number;
   name: string;
   category: string;
}

book.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Book } from './book';

@Injectable()
export class BookService {
    bookUrl = "/api/books";	

    constructor(private http: HttpClient) { }

    getBooksFromStore(): Observable<Book[]> {
        return this.http.get<Book[]>(this.bookUrl);
    }
    getFavBookFromStore(id: number): Observable<Book> {
        return this.http.get<Book>(this.bookUrl + "/" + id);
    }    
    getBooksByCategoryFromStore(category: string): Observable<Book[]> {
        return this.http.get<Book[]>(this.bookUrl + "?category=" + category);
    }        
}

book.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/Observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/retry';
import { HttpErrorResponse } from '@angular/common/http';
import { BookService } from './book.service';
import { Book } from './book';

@Component({
   selector: 'app-book',
   templateUrl: './book.component.html'
})
export class BookComponent implements OnInit { 
   allBooks$: Observable<Book[]>
   favBook$: Observable<Book>
   myAllfavBooks$: Observable<Book[]>
   favBookName$: Observable<string> 
   similarBooks$: Observable<Book[]> 
   softBooks: Book[];
   allFavBooks: Book[];
   bookName: string | {};
   similarFavBooks: Book[];

   constructor(private bookService: BookService) { }
   
   ngOnInit() {
        this.getBooks();	
        this.getFavBook();
        this.getsoftBooks();
        this.getAllFavBooks();
        this.getBookName();
   }
   getBooks() {
        this.allBooks$ = this.bookService.getBooksFromStore();
   }
   getFavBook() {
        this.favBook$ = this.bookService.getFavBookFromStore(101); 
   }
   getsoftBooks() {
        this.bookService.getBooksFromStore().retry(3).subscribe(books => {
           this.softBooks = books
        },
        (err: HttpErrorResponse) => {
            if (err.error instanceof Error) {
                //A client-side or network error occurred.
                console.log('An error occurred:', err.error.message);
            } else {
                //Backend returns unsuccessful response codes such as 404, 500 etc.
                console.log('Backend returned status code: ', err.status);
                console.log('Response body:', err.error);
            }
         }
        );
   }
   getAllFavBooks() {
        this.myAllfavBooks$ = this.bookService.getFavBookFromStore(101)
            .mergeMap(book => this.bookService.getBooksByCategoryFromStore(book.category));

        // Using subscribe
        this.bookService.getFavBookFromStore(101).mergeMap(book => { 
             let category = book.category;
             return this.bookService.getBooksByCategoryFromStore(category);
        }).subscribe(books => {
             this.allFavBooks = books;
        });
   }   
   getBookName() {
        this.favBookName$ = this.bookService.getFavBookFromStore(101).map(book=> book.name);  

        // Using subscribe
        this.bookService.getFavBookFromStore(101)
          .map(book=> {
            if(book.name.length < 15) {
               return book.name;
            } else {
               throw('Length less than 15');
            }
          })
          .catch(error => {
            console.log(error);
            //return of("Default Name");
            throw(error.message || error);
          })
          .subscribe(name=> {
              this.bookName = name;
              console.log(name);
            },
            err => {
              console.log(err);
            }
          );
   }
   searchSimilarBooks(id: number) {
        this.similarBooks$ = this.bookService.getFavBookFromStore(id)
            .switchMap(book => {
                let category = book.category;
                return this.bookService.getBooksByCategoryFromStore(category);
            })
            .catch(err => of([]));

        // Using subscribe
        this.bookService.getFavBookFromStore(id)
            .switchMap(book => {
                let category = book.category;
                return this.bookService.getBooksByCategoryFromStore(category);
            })
            .catch(err => of([]))
            .subscribe(books => {
                this.similarFavBooks = books;
                console.log(books);
            });
   }
}

book.component.html

<h2>Data using Async Pipe</h2>

<b>Book Details</b><br/>

<ul>
  <li *ngFor="let book of allBooks$ | async" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

<br/><b>Favorite Book Detail</b><br/>

<div *ngIf="favBook$ | async as book; else loading">
   Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
</div>
<ng-template #loading>
  <img src="assets/images/loading.gif">
</ng-template>

<br/><b>Favorite Book Name</b>

<div *ngIf="favBookName$ | async as bookName">
  Name: {{bookName}}
</div>

<br/><b>My All Favorite Books</b><br/>

<ul>
  <li *ngFor="let book of myAllfavBooks$ | async" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

<br/><b>Search Similar Books for Id</b><br/><br/>

<input [(ngModel)]="bookId" (input)="searchSimilarBooks(bookId)">

<ul>
  <li *ngFor="let book of similarBooks$ | async" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

<h2>Data using subscribe</h2>

<b>Software Books</b><br/>

<ul>
  <li *ngFor="let book of softBooks" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

<br/><b>All Favorite Books</b><br/>

<ul>
  <li *ngFor="let book of allFavBooks" >
    Id: {{book.id}}, Name: {{book.name}}, Category: {{book.category}}
  </li>
</ul>

app.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   template: `
		<app-book></app-book>
    `
})
export class AppComponent { 
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent }  from './app.component';
import { BookComponent }  from './book.component';
import { BookService } from './book.service';

//For InMemory testing
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

@NgModule({
  imports: [     
      BrowserModule,
      HttpClientModule,
      FormsModule,
      InMemoryWebApiModule.forRoot(TestData)		
  ],
  declarations: [
      AppComponent,
      BookComponent
  ],
  providers: [
      BookService
  ],
  bootstrap: [
      AppComponent
  ]
})
export class AppModule { }

13. Run Application

To run the application, find the steps.
1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Install angular-in-memory-web-api@0.5.3
4. Run ng serve using command prompt.
5. Access the URL http://localhost:4200
Find the print screen of the output.

Note: NgRx is used for reactive programming in Angular applications. NgRx uses Angular with RxJS Observable. Find the link for NgRx examples.

NgRx Tutorials