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

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

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * 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>

===== 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>