Angular - Input és Output dekorátorok

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

Bevezetés

Az @Input és @Output dekorátorok segítéségével függvényeket hívhatunk egy másik komponensben, ha a két komponens szülő-gyermek viszonyban van, és nem az AppComponet-ben van a hívandó függvény.

Szülőtől a gyermek felé

Legyen egy weboldal amely termékeket tartalmaz.

ng generate component emps
ng generate component empdet

src/app/employees/employees.components.ts

//...
export class EmployeesComponent implements OnInit {
 
  employeeName = "Erős István";
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

src/app/employees/employees.component.html

<p>employees works!</p>
<app-empldet [employeeName]="employeeName"></app-empldet>

src/app/empldet/empldet.component.ts

import { Component, Input, OnInit } from '@angular/core';
 
 
//...
export class EmpldetComponent implements OnInit {
 
  @Input() employeeName = '';
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

src/app/empldet/empldet.copmponent.html

<p>empldet works!</p>
 
Név: {{employeeName}}

Teljes:

emps.component.ts

emps.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-emps',
  templateUrl: './emps.component.html',
  styleUrls: ['./emps.component.css']
})
export class EmpsComponent implements OnInit {
 
  actName = "Erős István";
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

emps.component.html

emps.component.html

<p>emps works!</p>
 
<app-empdet [employeeName]="actName"></app-empdet>

empdet.component.ts

empdet.component.ts

import { Component, Input, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-empdet',
  templateUrl: './empdet.component.html',
  styleUrls: ['./empdet.component.css']
})
export class EmpdetComponent implements OnInit {
 
  @Input() employeeName = '';
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

empldet.component.html

empldet.component.html

<p>empdet works!</p>
 
Név: {{employeeName}}

Gyermektől a szülő felé

emps.component.ts

emps.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-emps',
  templateUrl: './emps.component.html',
  styleUrls: ['./emps.component.css']
})
export class EmpsComponent implements OnInit {
 
  employeeArray = [ 'Kerek György', 'Rendes Imre' ];
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
  addEmployee(newEmployee: string) {
    this.employeeArray.push(newEmployee);
  }  
 
}

emps.component.html

emps.component.html

<p>emps works!</p>
 
 
<app-empdet
(newEmployeeEvent)="addEmployee($event)">
</app-empdet>
 
 
 
<ul>
    <li *ngFor="let empl of employeeArray">
        {{empl}}
    </li>
</ul>

empdet.component.js

emps.component.js

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 
@Component({
  selector: 'app-empdet',
  templateUrl: './empdet.component.html',
  styleUrls: ['./empdet.component.css']
})
export class EmpdetComponent implements OnInit {
 
  @Output() newEmployeeEvent = new EventEmitter<string>();
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
  addNewEmployee(value: string) {
    this.newEmployeeEvent.emit(value);
  }
 
}

empdet.component.html

empdet.component.html

<p>empdet works!</p>
 
<label for="employee">Dolgozó</label>
<input type="text" id="employee" #newEmployee>
 
<br>
 
<button (click)="addNewEmployee(newEmployee.value)">
    Hozzáad
</button>

Forrás

https://angular.io/guide/inputs-outputs (2022)