[Angular] 버튼 이벤트 적용해보기 (Button Event)

 

app.component.html

 

1. on-click뒤에 실행시키고 싶은 함수 이름을 적으면 된다.

 

<button on-click="함수이름"></button>

 

2. (click) 뒤에 실행시키고 싶은 함수 이름을 적으면 된다.

 

<button (click)="함수이름"></button>

---

ShowHi() 메서드 적용 시켜보기

 

app.component.ts

 

간단하게 알러트 창에 인사를 출력하는 함수를 만들어 준다.

 

export class AppComponent {
  public showHi(): void {
    alert('안녕하세요');
  }
}

 

app.component.html

 

<button (click)="showHi()">하이</button>

 

 

버튼을 누르면

 

 

 

아래와 같이 알럴트 창이 뜨게 된다.