Tartalomjegyzék

< Angular

Angular - Tömb lapozása

Szolgáltatás

Az src/app/app.config.ts fájlban regisztrálni kell a HttpClientModule modult, amit nem másoltam ide.

src/app/shared/api.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class ApiService {
 
  host = 'http://localhost:8000/'
 
  constructor(private http: HttpClient) { }
 
  getEmployees() {
    let endpoint = 'employees';
    let url = this.host + endpoint;
    return this.http.get<any>(url);
  }
}

HTML

src/app/employee/employee.component.html
<p>Dolgozók</p>
 
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Név</th>
            <th>Település</th>
            <th>Fizetés</th>
        </tr>
    </thead>
    <tbody>
        @for(emp of pagedEmployees; track emp) {
            <tr>
                <td>{{emp.id}}</td>
                <td>{{emp.name}}</td>
                <td>{{emp.city}}</td>
                <td>{{emp.salary}}</td>
            </tr>
        }
    </tbody>
</table>
 
 
<div>
    <button (click)="previousPage()" [disabled]="currentPage === 1">Előző</button>
    <button (click)="nextPage()" [disabled]="currentPage === totalPages">Következő</button>
</div>

TypeScript

src/app/employee/employee.component.ts
import { Component } from '@angular/core';
import { ApiService } from '../shared/api.service';
 
@Component({
  selector: 'app-employee',
  standalone: true,
  imports: [],
  templateUrl: './employee.component.html',
  styleUrl: './employee.component.css'
})
export class EmployeeComponent {
 
  employees : any = []
  pageSize = 5;
  currentPage = 1;
 
  constructor(private api: ApiService){
 
    api.getEmployees().subscribe({
      next: data => {
        console.log(data);
        this.employees = data;
      },
      error: err => {
        console.error('Hiba! A letöltés sikertelen!');
      }
    })
  }
 
  get totalPages(): number {
    return Math.ceil(this.employees.length / this.pageSize);
  }
 
  get pagedEmployees(): any {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    return this.employees.slice(startIndex, startIndex + this.pageSize);
  }
 
  previousPage() {
    this.currentPage--;
  }
 
  nextPage() {
    this.currentPage++;
  }
}