Travailler avec RxJS et Angular

Dans ce chapitre, nous verrons comment utiliser RxJs avec Angular. Nous n'entrerons pas dans le processus d'installation pour Angular ici, pour en savoir plus sur l'installation angulaire, reportez-vous à ce lien -

Nous travaillerons directement sur un exemple, où utilisera Ajax de RxJS pour charger des données.

Exemple

app.component.ts

import { Component } from '@angular/core';
import { environment } from './../environments/environment';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators'

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   data;
   constructor() {
      this.data = "";
      this.title = "Using RxJs with Angular";
      let a = this.getData();
   }
   getData() {
      const response =
      ajax('https://jsonplaceholder.typicode.com/users')
         .pipe(map(e => e.response));
      response.subscribe(res => {
         console.log(res);
         this.data = res;
      });
   }
}

app.component.html

<div>
   <h3>{{title}}</h3>
   <ul *ngFor="let i of data">
      <li>{{i.id}}: {{i.name}}</li>
   </ul>
</div>

<router-outlet></router-outlet>

Nous avons utilisé ajax de RxJS qui chargera les données à partir de cette url -https://jsonplaceholder.typicode.com/users.

Lorsque vous compilez, l'affichage est comme indiqué ci-dessous -