Angular JavaScript

• Szerző: Sallai András
• Copyright © 2023, Sallai András
• Szerkesztve: 2023, 2025
• 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

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

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

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