Angular-[アクティブバインド練習例1]

イベントバインドの練習をしましょう

結果画面

<h1>{{ title }}</h1>
<button (click)="click($event)">Angular</button>
<button (click)="click($event)">jQuery</button>
<button (click)="click($event)">Angular</button>
선택한 버튼 라벨 값:
<span>{{ result }}</span><!-- 클래스 변수를 가져와 꽂아준다. -->

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

@Component({
  selector: 'app-root', // 이 컴포넌트를 쓰기위한 명칭 app-root -> index.html 에서 사용
  templateUrl: './app.component.html', // 화면 구성
  styleUrls: ['./app.component.css'], // 스타일 지정
})
export class AppComponent {
  title = '이벤트 바인딩 실습예제1';
  result = null;
  click(event: any): void {
    console.log(event.target.innerText);
    this.result = event.target.innerText;	// 멤버변수에 버튼에 들어있는 innerText를 가져와서 꽂아준다. 
  }
}