API

Ez a komponens:

Lekéri a Chuck Norris viccet az API-ból.
Mentésre kerül a vicc az joke változóban.
A sablonban a {{ joke }} kifejezéssel jeleníti meg a viccet.

Ha már hozzáadtad az HttpClientModule-t az alkalmazásodhoz (ahogy a korábbi példában is láttad), akkor most már működnie kell. Indítsd el az Angular alkalmazásodat, és látnod kellene a lekért Chuck Norris viccet.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <h1>Chuck Norris vicc:</h1>
    <p>{{ joke }}</p>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  joke: string;

  constructor(private http: HttpClient) {
    this.fetchJoke();
  }

  fetchJoke() {
    const endpoint = 'https://api.chucknorris.io/jokes/random';
    this.http.get(endpoint).subscribe(
      (data: any) => this.joke = data.value,
      (error) => console.error('Error:', error)
    );
  }
}

JSON