VEILLE TECHNOLOGIQUE – ANGULAR MARS#1

Table des matières

Utilisation d'api avec Angular

Aujourd’hui nous allons voir comment utiliser et récupérer les données d’une API sur Angular.

Tout d’abord, il faut importer les bibliothèque suivantes dans le component où l’on souhaite faire les requêtes. Personnellement je vais me rendre dans le fichier champions.component.ts.

Ensuite en haut de page j’importe :

import { CommonModule } from ‘@angular/common’;

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

import { Component, OnInit, inject } from ‘@angular/core’;

puis dans component({}) :

@Component({

selector: ‘app-champions’,

standalone: true,

imports: [CommonModule, HttpClientModule],

templateUrl: ‘./champions.component.html’,

styleUrl: ‘./champions.component.css’

})

Ensuite dans la class ChampionsComponent juste en dessous nous allons pouvoir faire nos appels d’api :

export class ChampionsComponent implements OnInit {

httpClient = inject(HttpClient);

champions: any[] = [];

ngOnInit(): void {

this.fetchData();

}

fetchData() {

this.httpClient.get(‘https://ddragon.leagueoflegends.com/cdn/13.24.1/data/fr_FR/champion.json’).subs

cribe((data: any) => {

console.log(data);

this.champions = Object.values(data.data);

});

}

Nous avons créé une liste vide nommée « champions », ensuite nous avons la fonction ngOnInit() qui se lance automatiquement dès qu’on se rend sur la page Champions. Cette fonction lance la fonction fecthData().

Et donc c’est dans la fonction fetchData() que l’on récupère les données. Nous faisons l’appel avec le httpClient.get, suivis du chemin de l’api, à la suite de ça on imprime dans les logs le résultat et on stock toutes les datas dans « champions ».
L’avantage d’Angular est que l’on peut désormais récupérer « champions » directement dans nos templates HTML :

<h1 class= »text-4xl font-semibold text-gray-300″>Liste des champions</h1>

<p class= »text-gray-300″>Découvrez tous les personnages de League of Legends</p>

@for (champion of champions; track $index) {

<p class= »text-center »>{{ champion.name }}</p>

</div>

}

</div>

Ainsi nous obtenons ce rendu final :

Utilisation d'api avec Angular

puis dans component({}) :

Laisser un commentaire Annuler la réponse