[[oktatas:web:angular:angular httpclient|< Angular httpclient]]

====== Angular HttpClient Típusokkal ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Employees interfész =====

  ng generate interface employee

Tartalma:

<code javascript src/app/employee.ts>
export interface Employee {
    id: number;
    name: string;
    city: string;
    salary: number;
}

</code>

===== Szükséges modul =====

<code javascript src/app/app.module.ts>
//...
import { HttpClientModule } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(HttpClientModule)
  ]
};

</code>


===== Szolgáltatás =====

  ng generate service shared/api


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

<code javascript>
import { Observable } from 'rxjs';
import { Employee } from '../employee';
</code>

Az ApiService osztály

<code javascript>
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);
  }
}
</code>

===== empl komponens =====

  ng generate component empl


Vegyük fel az empl komponenst az app komponensben:
<code html src/app/app.component.html>
<h1>Dolgozók</h1>
<app-empl></app-empl>
</code>


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

Vegyük fel a következő import sorokat:
<code javascript>
import { Employee } from '../employee';
import { ApiService } from '../shared/api.service';
</code>

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

<code javascript>
employees!: Employee[];
</code>


Injektáljuk az ApiService osztályt az EmplComponent osztályba.
<code javascript>
constructor(private api: ApiService) { }
</code>

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

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

Hívjuk meg a metódust:
<code javascript>
  ngOnInit(): void {
    this.setEmployees()
  }
</code>



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

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



===== Együtt =====


<tabbox employee.ts>

<code javascript>
export interface Employee {
    id: number;
    name: string;
    city: string;
    salary: number;
}
</code>

<tabbox api.service.ts>

<code javascript>
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);
  }
}
</code>


<tabbox app.component.html>

<code html>
<h1>Dolgozók</h1>

<app-empl></app-empl>
</code>

<tabbox empl.component.ts>

<code javascript>
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;
    })    
  }

}
</code>

<tabbox empl.component.html>

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

</tabbox>


===== Linkek =====

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