Web
Analytics
angular 4 caching using local storage and rxjs | Tutorial

For Consultation : +91 9887575540

Stay Connected :

Spread the love

angular 4 caching using localstorage and rxjs operator

In this blog , I am discussing a very important feature implementation in angular that may improve the performance of angular application. For example if we are getting data from web api using httpclient module repeatedly which increase server round trips that may cause of performance downgrade.

Caching in angular may be implemented by various techniques for example.

  • local storage
  • session storage
  • startWith rxjs operator

In this example I will use localstorage and startWith operator and github api repository.

github repository URL :https://api.github.com/search/repositories?q=angular

Step1: Create new component and pass reference of it into app.component.html

ng g c cachingex

Step2: Write following code into cachingex component.

cachingex.component.html

Step 3: Pass reference of HttpClient into cachingex component.ts and app.module.ts

import { HttpClient } from ‘@angular/common/http’;

app.module.ts

imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(AppRoutes),
HttpModule
],

Step 4: Run program.

ng serve –open
Output:
Caching in angular using localstorage and rxjs operator

Caching in angular using localstorage and rxjs operator

 

 

 

 

Select your currency