Angular HttpClient Típusokkal

Szerző: Sallai András
Copyright © Sallai András, 2022
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Employees interfész

ng generate interface employee

Tartalma:

src/app/employee.ts

export interface Employee {
    id: number;
    name: string;
    city: string;
    salary: number;
}

Szükséges modul

src/app/app.module.ts

//...
import { HttpClientModule } from '@angular/common/http';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(HttpClientModule)
  ]
};

Szolgáltatás

ng generate service shared/api

Importáljuk az app.component.ts fájlban:

import { Observable } from 'rxjs';
import { Employee } from '../employee';

Az ApiService osztály

export class ApiService {
  host = 'http://localhost:3000/'
 
  constructor(private http: HttpClient ) { }
 
  getEmployees(): Observable<Employee[]> {
    let endpoint = 'employees';
    let url = this.host + endpoint;
    return this.http.get<Employee[]>(url);
  }
}

empl komponens

ng generate component empl

Vegyük fel az empl komponenst az app komponensben:

src/app/app.component.html

<h1>Dolgozók</h1>
<app-empl></app-empl>

Szerkesszük az src/app/empl/empl.component.ts fájlt.

Vegyük fel a következő import sorokat:

import { Employee } from '../employee';
import { ApiService } from '../shared/api.service';

Készítsünk egy adattagot employees néven, Employee[] típussal:

employees!: Employee[];

Injektáljuk az ApiService osztályt az EmplComponent osztályba.

constructor(private api: ApiService) { }

Készítsünk egy setEmployees() metódust:

  setEmployees() {
    this.api.getEmployees().subscribe(result => {
      console.log(JSON.stringify(result));
      this.employees = result;
    })    
  }

Hívjuk meg a metódust:

  ngOnInit(): void {
    this.setEmployees()
  }

Szerkesszük az src/app/empl/empl.component.html sablonfájlt.

<table>
    <tr *ngFor="let employee of employees">
      <td>{{employee.name}}</td>
      <td>{{employee.city}}</td>
      <td>{{employee.salary}}</td>
    </tr>
</table>

Együtt

employee.ts

export interface Employee {
    id: number;
    name: string;
    city: string;
    salary: number;
}

api.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from '../employee';
 
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  host = 'http://localhost:3000/'
 
  constructor(private http: HttpClient ) { }
 
  getEmployees(): Observable<Employee[]> {
    let endpoint = 'employees';
    let url = this.host + endpoint;
    return this.http.get<Employee[]>(url);
  }
}

app.component.html

<h1>Dolgozók</h1>
 
<app-empl></app-empl>

empl.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { ApiService } from '../shared/api.service';
 
@Component({
  selector: 'app-empl',
  templateUrl: './empl.component.html',
  styleUrls: ['./empl.component.css']
})
export class EmplComponent implements OnInit {
 
  employees!: Employee[];
 
  constructor(private api: ApiService) { }
 
  ngOnInit(): void {
    this.setEmployees()
  }
 
  setEmployees() {
    this.api.getEmployees().subscribe(result => {
      console.log(JSON.stringify(result))
      this.employees = result;
    })    
  }
 
}

empl.component.html

<table>
    <tr *ngFor="let employee of employees">
      <td>{{employee.name}}</td>
      <td>{{employee.city}}</td>
      <td>{{employee.salary}}</td>
    </tr>
</table>

Linkek

https://angular.io/guide/http (2022)
https://angular.io/guide/example-apps-list (2022)