욱'S 노트

유저가 링크를 클릭하거나 버튼을 눌렀을때 혹은 텍스트를 입력했을때, 우리는 그것에 대해 알고 싶을때가 있다. 이러한 유저 액션은 DOM 이벤트로서 일어난다. 이번 챕터에서는 Angular 이벤트 바인딩 문법을 활용해 이러한 이벤트를 처리하는 방법에 대해서 알아보자. 유저 입력 이벤트 바인딩우리는 DOM 이벤트에 응답하는 Angular 이벤트 바인딩을 사용할 수 있다.문법은 간단하다. DOM 이벤트명을 괄호로 둘러싸고 템플릿 문장으로 할당하면 된다. 다음 예는 click hander를 구현하기 위해 이벤트 바인딩을 한 예이다.Click me! (click)은 바인딩의 타겟을 의미한다. 따옴표안의 문자는 오른편은 컴포넌트 이벤트의 응답으로 컴포넌트 메소드 onClickMe를 할당했다는 것을 의미한다. 바인딩..

우리는 Angular 컴포넌트의 프로퍼티들을 HTML template에 표현하기 데이터를 바인딩할 수 있다. 이 예제를 따라하기 위해서는 먼저 quick-start를 설치해야 한다. angular 공식 사이트를 방문하여 quick-start를 먼저 설치하기를 바란다. 히어로 리스트들을 출력하는 페이지를 만들어 볼 것이다. 최종 UI는 다음과 같다. 보여지는 컴포넌트에 프로퍼티 삽입하기컴포넌트 프로퍼티를 출력하기 위한 가장 쉬운 방법은 삽입을 이용해서 프로퍼티 이름을 주입하는 방법이다. 삽입을 위해 view 템플릿에 프로퍼티 이름을 명시하자. {{myHero}}app.component.ts 파일을 아래와 같이 변경해보자.import { Component } from '@angular/core';@Compo..