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_komponensek_kommunikacioja|< Angular komponensek kommunikációja]]

====== Angular - Input és Output dekorátorok ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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. 

<code>
ng generate component emps
ng generate component empdet
</code>


<code javascript src/app/employees/employees.components.ts>
//...
export class EmployeesComponent implements OnInit {

  employeeName = "Erős István";

  constructor() { }

  ngOnInit(): void {
  }

}
</code>



<code html  src/app/employees/employees.component.html>
<p>employees works!</p>
<app-empldet [employeeName]="employeeName"></app-empldet>
</code>




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


//...
export class EmpldetComponent implements OnInit {

  @Input() employeeName = '';

  constructor() { }

  ngOnInit(): void {
  }

}

</code>


<code html src/app/empldet/empldet.copmponent.html>
<p>empldet works!</p>

Név: {{employeeName}} 
</code>




Teljes:


<tabbox emps.component.ts>

<code javascript 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 {
  }

}

</code>



<tabbox emps.component.html>

<code html emps.component.html>
<p>emps works!</p>

<app-empdet [employeeName]="actName"></app-empdet>
</code>



<tabbox empdet.component.ts>

<code javascript 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 {
  }

}

</code>




<tabbox empldet.component.html>

<code html empldet.component.html>
<p>empdet works!</p>

Név: {{employeeName}}
</code>


</tabbox>

===== Gyermektől a szülő felé =====


<tabbox emps.component.ts>

<code javascript 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);
  }  

}

</code>



<tabbox emps.component.html>

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




<tabbox empdet.component.js>

<code javascript 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);
  }

}

</code>





<tabbox empdet.component.html>

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



</tabbox>



===== Forrás =====

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