Angular

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
 
@Component({
  selector: 'app-ipo-list',
  template: `
    <div>
      <h1>IPO List</h1>
      <ul>
        <li *ngFor="let ipo of ipos">{{ ipo.name }}</li>
      </ul>
    </div>
  `
})
export class IpoListComponent implements OnInit {
  ipos: any[] = [];
 
  constructor(private http: HttpClient) {}
 
  ngOnInit(): void {
    this.fetchIpos();
  }
 
  fetchIpos(): void {
    const headers = new HttpHeaders({
      'x-api-key': 'your_api_key_here'
    });
 
    this.http.get('https://api.ipoalerts.in/ipos?status=open', { headers })
      .subscribe((response: any) => {
        this.ipos = response.ipos;
      }, (error) => {
        console.error('Error fetching IPO data:', error);
      });
  }
}