Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_17_toemb_lapozasa [2024/04/12 23:37] – [Szolgáltatás] admin
+++ oktatas:web:angular:angular_17_toemb_lapozasa [2025/03/02 16:04] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:angular|< Angular]]
-====== Angular - Tömb lapozása ======
-  * **Szerző:** Sallai András
-  * Copyright (c) 2024, Sallai András
-  * Szerkesztve: 2024
-  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
-  * Web: https://szit.hu
-===== Szolgáltatás =====
-Az src/app/app.config.ts fájlban regisztrálni kell a HttpClientModule modult, amit nem másoltam ide.
-<code javascript 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);
-  }
-}
-</code>
-===== HTML =====
-<code 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>
-</code>
-===== TypeScript =====
-<code javascript 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++;
-  }
-}
-</code>