szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular:angular_filter|< Angular]]

====== Angular JavaScript ======

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

===== Projekt =====

<code>
ng new app01
cd app01
ng generate component comp1
code .
ng serve -o
</code>

===== Angular 16 után =====

<code html>
<input type="text" (keyup)="changeFilter(filterInput.value)" #filterInput>
<table>
    <thead>
        <tr>
            <th>Az</th>
            <th>Név</th>
            <th>Település</th>
        </tr>
    </thead>
    <tbody>
        @for(emp of filteredEmps; track emp.id) {
          <tr>
              <td>{{emp.id}}</td>
              <td>{{emp.name}}</td>
              <td>{{emp.city}}</td>
          </tr>
        }
    </tbody>
</table>
</code>

<code javascript>
  filteredEmps: any[] = [];

  employees = [
    {id: 1, name: "Peres Béla", city: "Pécs", salary:395 },
    {id: 2, name: "Energia Árpád", city: "Szeged", salary: 397 },
    {id: 3, name: "Gyenge Valér", city: "Miskolc", salary: 398 },
    {id: 4, name: "Pásztó László", city: "Pécs", salary: 399 },
    {id: 5, name: "Trombita Béla", city: "Debrecen", salary: 400 },
    {id: 6, name: "Rendes Lajos", city: "Szeged", salary: 401 },
 
  ];

  ngOnInit() {
    this.filteredEmps = this.employees;
  }

  changeFilter(city: string) {
    console.log(city)
    let a = this.employees.filter((emp: any) => { 
      if(emp.city.indexOf(city) > -1) {
        return emp
      }
    });
    console.log("a: ",a)
    this.filteredEmps = a;
  }

</code>


===== Angular 16 és előtte =====

==== Egy keresőmező ====
=== Az app.component.html ===

<code javascript src/app/app.component.html>
<h1>Dolgozók</h1>
<app-comp1></app-comp1>
</code>

=== A comp1 komponens ===

<code javascript src/app/comp1/comp1.component.html>
<input type="text" (keyup)="changeFilter(filterInput.value)" #filterInput>
<table>
    <thead>
        <tr>
            <th>Az</th>
            <th>Név</th>
            <th>Település</th>
        </tr>
    </thead>
    <tbody *ngFor='let emp of employees'>
        <tr>
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
        </tr>
    </tbody>
</table>
</code>

<code javascript src/app/comp1/comp1.component.ts>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.scss']
})
export class Comp1Component implements OnInit {
  employees: any;
  employeeList: any;
  constructor() { }

  ngOnInit(): void {
    this.employeeList = [
      { "id": 1, "name": "Csendes Irén", "city": "Szeged" },
      { "id": 2, "name": "Csendes Borbála", "city": "Pécs" },
      { "id": 3, "name": "Felhős Béla", "city": "Szeged" },
      { "id": 4, "name": "Lind Evelin", "city": "Pécs" },
      { "id": 5, "name": "Csendes Lajos", "city": "Szegi" },
      { "id": 6, "name": "Csendes Ágnes", "city": "Szegi" },
      { "id": 7, "name": "Arany Tamás", "city": "Szegi" },
      { "id": 8, "name": "Rendes Valér", "city": "Szerencs" },
      { "id": 9, "name": "Éles Gábor", "city": "Szerencs" },
      { "id": 10, "name": "Remek Imre", "city": "Szegi" },
      { "id": 11, "name": "Vilka Lajos", "city": "Szegi" },
    ]
    this.employees = this.employeeList; 
  }
  changeFilter(value: string) {
    console.log(value)
    let a = this.employeeList.filter( (emp:any) => {
      if(emp.city.indexOf(value)>-1) {        
        return emp;
      }      
    })
    this.employees = a;    
  }
}

</code>

==== Két keresőmező ====

<code javascript src/app/comp1/comp1.component.html>
<input type="text" 
(keyup)="changeNameFilter(nameInputFilter.value)" 
#nameInputFilter
placeholder="név"
>


<input type="text" 
(keyup)="changeCityFilter(cityInputFilter.value)" 
#cityInputFilter
placeholder="település"
>

<table>
    <thead>
        <tr>
            <th>Az</th>
            <th>Név</th>
            <th>Település</th>
        </tr>
    </thead>
    <tbody *ngFor='let emp of employees'>
        <tr>
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td>{{emp.city}}</td>
        </tr>
    </tbody>
</table>
</code>


<code javascript src/app/comp1/comp1.component.html>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.scss']
})
export class Comp1Component implements OnInit {
  employees: any;
  employeeList: any;
  nameFilter: string = '';
  cityFilter: string = '';
  constructor() { }

  ngOnInit(): void {
    this.employeeList = [
      { "id": 1, "name": "Csendes Irén", "city": "Szeged" },
      { "id": 2, "name": "Csendes Borbála", "city": "Pécs" },
      { "id": 3, "name": "Felhős Béla", "city": "Szeged" },
      { "id": 4, "name": "Lind Evelin", "city": "Pécs" },
      { "id": 5, "name": "Csendes Lajos", "city": "Szegi" },
      { "id": 6, "name": "Csendes Ágnes", "city": "Szegi" },
      { "id": 7, "name": "Arany Tamás", "city": "Szegi" },
      { "id": 8, "name": "Rendes Valér", "city": "Szerencs" },
      { "id": 9, "name": "Éles Gábor", "city": "Szerencs" },
      { "id": 10, "name": "Remek Imre", "city": "Szegi" },
      { "id": 11, "name": "Vilka Lajos", "city": "Szegi" },
    ]
    this.employees = this.employeeList; 
  }

  changeNameFilter(content: string) {
    this.nameFilter = content;
    this.changeFilter();
  }
  changeCityFilter(content: string) {
    this.cityFilter = content;
    this.changeFilter();
    console.log('vmi')
  }
  changeFilter() {    
    let a = this.employeeList.filter( (emp:any) => {      
      if(
        emp.name.indexOf(this.nameFilter)>-1 && 
         emp.city.indexOf(this.cityFilter)>-1) 
         {        
        return emp;
      }   
    })
    this.employees = a; 
  }
}

</code>