An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other. It defines the methods and data formats that applications can use to request and exchange information.
API-vs-SDK
Hi, I’m Vijay Chauhan, a web developer from India in love with all things internet. Online since 2015.
ExhaustMap in Angular using RxJS with example
Example of exhaustMap
Let’s consider a simple example where we want to make an HTTP request to fetch user data whenever a button is clicked. If the button is clicked again before the previous request completes, we want to ignore the new click.
Step 1: Install HttpClient
Make sure you have the HttpClientModule
imported in your app module:
typescripimport { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [/* your components */],
imports: [
HttpClientModule,
/* other imports */
],
bootstrap: [/* your bootstrap component */]
})
export class AppModule { }
Step 2: Create a Service
Create a service that fetches user data from an API:
typescriimport { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = 'https://jsonplaceholder.typicode.com/users';
constructor(private http: HttpClient) { }
getUsers(): Observable<any> {
return this.http.get<any>(this.apiUrl);
}
}
Step 3: Create a Component
In your component, use exhaustMap
to handle the button clicks:
typescriptimport { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { exhaustMap } from 'rxjs/operators';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
template: `
<button (click)="loadUsers()">Load Users</button>
<ul>
<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
`
})
export class UserComponent {
users: any[] = [];
private loadUsersSubject = new Subject<void>();
constructor(private userService: UserService) {
this.loadUsersSubject.pipe(
exhaustMap(() => this.userService.getUsers())
).subscribe(data => {
this.users = data;
});
}
loadUsers() {
this.loadUsersSubject.next();
}
}
Explanation
Service (
UserService
): Defines a method to fetch user data from an API.Component (
UserComponent
):- Subject: A
Subject
(loadUsersSubject
) is created to emit events when the button is clicked. - exhaustMap: The
loadUsersSubject
is piped withexhaustMap
, which subscribes to thegetUsers()
observable when an event is emitted. If another event is emitted before the request completes, it ignores it. - Template: A button to load users and a list to display the fetched user data.
- Subject: A
Summary
exhaustMap
is a powerful operator for controlling the flow of observables and managing concurrency in Angular applications. In this example, it ensures that only the first button click's request is processed while subsequent clicks are ignored until the first request completed.
Hi, I’m Vijay Chauhan, a web developer from India in love with all things internet. Online since 2015.
Subscribe to:
Posts (Atom)
SQL Commands - essentials
SELECT # Retrieve data from the database FROM # Specify the table to select data from WHERE # Filter rows based on a condition AS # Rename...
Best for you
-
Example of exhaustMap Let’s consider a simple example where we want to make an HTTP request to fetch user data whenever a button is clicke...
-
An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with...
-
SELECT # Retrieve data from the database FROM # Specify the table to select data from WHERE # Filter rows based on a condition AS # Rename...
-
ChatG Integrating multiple languages in an Angular application can be achieved using the @angular/localize package or by using libraries...
-
1. Encapsulation Encapsulation is the bundling of data and methods that operate on that data within a single unit (class). It restricts dire...
-
Still no luck, I’ve deleted the empty line. Actually, if I use AGP 8.0.0-beta01 it works, but I consider not upgrading to AGP 8 yet and wa...
-
JWT (JSON Web Tokens) in a .NET Framework 4.5 application, you can use the System.IdentityModel.Tokens.Jwt Install the JWT Library : Use Nu...
-
In Angular, the OnChanges lifecycle hook is typically used to respond to changes in input properties. However, you can avoid using it by l...
-
the context of JWT (JSON Web Tokens) and token-based authentication, the term "both parties shared secret key" refers to a symmet...