[Angular] Event Binding 1 이벤트 바인딩

코드로 보는게 이해가 빠르다

 

test.component.html

<button (click)="printName()">Btn</button>

무슨 뜻 이냐 하면

button에 있는 click 이벤트가 발생 했을때 test.component.ts

코드에 있는 printName 이란 함수를 실행 시키라는 뜻 이다.

 

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  name = 'zizn';
  constructor() {

  }

  ngOnInit() {
  }

  printName() {
    console.log(this.name);
  }

}

 실행시 콘솔창에 zizn 이 찍히는 걸 볼 수 있다.

 

나중에 컴포넌트 간의 통신에서도 사용된다.

 

 

그리고 이 예제에서 사용한 이벤트인 click 의 경우 button에 이미 내장된 이벤트이다. 이벤트를 임의로 만들어 원하는 이벤트를 발생하고 그에 따른 행동도 정의 할 수도 있다. 이 부분은 나중에 다루기로 하고

 

그렇다면 내장된 이벤트 혹은 프로퍼티는 어떻게 알 수 있을까?

button 을 예로 들어 살펴 보겠다.

 

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  name = 'zizn';
  @ViewChild('btn', {static: false}) btn;
  constructor() {

  }

  ngOnInit() {
  }

  printName() {
    console.log(this.name);
    console.log(this.btn);
  }

}

test.component.ts

 

<button (click)="printName()" #btn>Btn</button>

 

이부분에서는 간단히 설명하지만 엘리먼트에 #을 이용하여 아이디로 지정할 수 있다.

그리고 해당하는 아이디를 component 코드에서 ViewChild라는 것을 이용하여 참조할 수 있게 된다.

그려면 btn 변수로 #btn으로 지정된 엘리먼트를 다룰 수 있게 된다.

 

printName 함수에 이 변수인 this.btn을 콘솔로 찍도록 해봤다.

 

이런식으로 프로퍼티와 이벤트를 확인 할 수 있다. 

 

각 해당하는 이벤트에 대해 알고싶으면 구글링 하면 대부분 잘 설명이 되어있다.