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

Helyezzünk el egy gombot, aminek a click eseményét ¹⁾ figyeljük.

Szerkesszük az src/app/app.component.html fájlt.

Egészítsük ki a fájlt:

src/app/app.component.html

<h1>Teszt</h1>
 
<p>{{name}}</p>
 
<button (click)="valt()">Vált</button>

Írjuk meg hozzá, a függvényt az src/app/app.component.ts fájlban:

src/app/app.component.ts

export class AppComponent {
    title= 'Teszt';
    name = 'János';
    valt(): void {
        this.name = 'Béla';
    }    
}

Nézzük meg a böngészőben az eredményt.

Az $event egy speciális változó, ami információkat tartalmaz egy eseményről, annak kiváltójáról.

Példa:

<select (change)="selectFruit($event)">
  <option value="1">alma</option>
  <option value="2">körte</option>
  <option value="3">barack</option>
  <option value="4">szilva</option>
</select>

//...
export class AppComponent {
  selectFruit(event: any) {
    console.log(event.target.value);
  }
}

A konzolon, a kiválasztott gyümölcstől függően 1, 2, 3 vagy 4 érték jelenik meg.

src/app/app.component.html

<label for="name">Név</label>
<input type="text" name="name" 
[(ngModel)]="name" #nameCtrl="ngModel">
 
<button (click)="goButton($event, nameCtrl.value)">
  Mehet
</button>

src/app/app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name !: string;
  goButton(event: Event, name: string) {
    console.log('Név: ', name);
    console.log(event);
  }
}

src/app/app.component.ts

<input type="text"
(keyup.enter)="addEmployee()"
>

src/app/app.component.ts

//...
export class AppComponent {
 
  addEmployee() {
    console.log('működik')
  }
}