Introduction

The async pipe can subscribe to a promise or an observable, returning the latest value that has been emitted. The unsubscription happens automatically after the component is destroyed for reducing the memory leak. It marks the component to be checked for the changes whenever a new value is emitted.

Here in this blog, we will see a manual search of the items listed using the async pipe, by using one of the Rxjs operators.

Service

First, to display the data we will get data from the HTTP call, creating the reusable service and injecting them into the constructor of the component. This makes the code more reusable, generic, and easier to refactor.

import { Injectable } from ‘@angular/core’;

import { Country } from ‘./data’;

import { Observable } from ‘rxjs’;

import { HttpClient } from ‘selenium-webdriver/http’;

import { map } from ‘rxjs/operators’;

@Injectable({

providedIn: ‘root’

})

export class CountryService {

constructor(private http: HttpClient) { }

getCountryNames(): Observable<Country[]> {

const requestUrl = “https://jsonplaceholder.typicode.com/posts”;

return this.http.get<Country[]>(requestUrl)

.pipe(map(response => response[‘data’]));

}

}

The service is reusable and can be injected into the components of the application wherever needed as

mentioned above.

App Component

Every time on coding the component.ts, make sure you have added all the import statements properly.

First, we will display the data from the service call with the subscribe method.

#angular #rxjs #async pipe #amp