Angular - [ 이벤트 바인딩2 ]

단방향 바인딩 - 이벤트(체크박스/select)

app.component.ts

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 = '이벤트 바인딩 실습';
  flag = false;
  callPhone(phonenumber: string): void {
    console.log(phonenumber);
  }
  change(fruit: string): void {
    console.log(fruit);
  }
  check(bool: boolean): void {
    console.log(bool);
    this.flag = bool;	//들어온 불리언타입을 멤버변수 변경해주기 
  }
}

app.component.html

<h1>{{ title }}</h1>
<h2>input실습</h2>

<input #phone placeholder="phonenumber" /><br /><!--id 지정 phone-->
<button (click)="callPhone(phone.value)">Call</button>
<!-- input요소에서 지정된 아이디의 값을 바로 넘긴다. -->

<h2>select 실습</h2>
<select #fruit (change)="change(fruit.value)">
  <option>바나나</option>
  <option>사과</option>
  <option>옥수수</option>
  <option>감자</option>
</select>

<h2>checked 실습</h2>
전체 <input type="checkbox" #all (click)="check(all.checked)" /><br />
<!-- true/false넘어감 -->
야구 <input type="checkbox" value="야구" [checked]="flag" /><br />
축구 <input type="checkbox" value="축구" [checked]="flag" /><br /><!--속성값에 적용-->

실행화면