Intégration API : Angular + Polygon.io

Étape 1 : Créer l'application Angular

Commencez par créer une nouvelle application Angular en ligne de commande :

ng new polygon-app --standalone --style=css --routing=false
cd polygon-app

Étape 2 : Installer Bootstrap

Ajoutez Bootstrap pour améliorer l'affichage :

npm install bootstrap

Ensuite, ouvrez angular.json et ajoutez :

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

Étape 3 : Créer un service pour appeler l’API Polygon

Générez un service Angular :

ng generate service polygon

Ouvrez src/app/polygon.service.ts et copiez :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PolygonService {
  private apiKey = "r6r54SkzNjCK2bBi1iQQ2gAom6q1BOmK";
  private baseUrl = "https://api.polygon.io/v3/reference/tickers";

  constructor(private http: HttpClient) {}

  getTickers(limit = 20): Observable {
    return this.http.get(`${this.baseUrl}?market=stocks&active=true&limit=${limit}&apiKey=${this.apiKey}`);
  }
}

Étape 4 : Modifier AppComponent

Ouvrez src/app/app.component.ts et copiez :

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { PolygonService } from './polygon.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stocks: any[] = [];
  loading = false;

  constructor(private polygon: PolygonService) {}

  loadData() {
    this.loading = true;
    this.polygon.getTickers(50).subscribe({
      next: (data: any) => {
        this.stocks = data.results || [];
        this.loading = false;
      },
      error: () => {
        this.stocks = [];
        this.loading = false;
      }
    });
  }
}

Étape 5 : Interface utilisateur

Ouvrez src/app/app.component.html et copiez :

<div class="container py-4">
  <h1 class="mb-3">📊 Données boursières</h1>
  <button class="btn btn-primary mb-3" (click)="loadData()">
    Charger les données
  </button>

  <div *ngIf="loading" class="alert alert-info">Chargement...</div>

  <table class="table table-striped" *ngIf="stocks.length">
    <thead>
      <tr>
        <th>#</th>
        <th>Symbole</th>
        <th>Nom</th>
        <th>Marché</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let stock of stocks; let i = index">
        <td>{{ i+1 }}</td>
        <td>{{ stock.ticker }}</td>
        <td>{{ stock.name }}</td>
        <td>{{ stock.market }}</td>
      </tr>
    </tbody>
  </table>

  <div *ngIf="!loading && !stocks.length" class="alert alert-warning">
    Aucune donnée chargée
  </div>
</div>

Étape 6 : Lancer l'application

Exécutez la commande suivante pour lancer l’application :

ng serve -o

Bravo ! Vous avez maintenant une application Angular qui affiche des données boursières via Polygon.io 🎉