Angular JavaScript

• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

src/app/app.component.html

<h1>Dolgozók</h1>
<app-comp1></app-comp1>

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>

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;    
  }
}

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>

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; 
  }
}