바인딩 (4) 썸네일형 리스트형 앵귤러 템플릿 - style binding & ngStyle 앵귤러 style 바인딩은 특정 요소에 동적으로 스타일을 추가하거나 제거하는 기능입니다. style 바인딩과 ngStyle 디렉티브는 기능이 동일하고 사용법이 유사하기 때문에 같이 설명하도록 하겠습니다. 사용방법 1. style binding 한 가지의 스타일을 추가하는 경우 아래와 같이 해당 속성을 지정 style. 뒤에 지정해 줍니다. 이때, 문법은 html 스타일 문법과 camelCase문법 둘 다 사용가능합니다. 단위를 가지는 스타일의 경우 아래와 같이 두 가지 방법으로 단위 지정이 가능합니다. 복수의 스타일을 적용하는 경우 아래와 같이 구현가능합니다. // class.componet.ts import { Component } from '@angular/core'; @Component({ sele.. 앵귤러 템플릿 - class binding & ngClass 앵귤러 class 바인딩은 특정요소에 동적으로 클래스를 추가하거나 제거하는 기능입니다. 클래스를 사용하여 상태에 따라 스타일 변경할 때 유용한 기능입니다. class 바인딩과 ngClass 디렉티브는 기능이 동일하고 사용법이 유사하기 때문에 같이 설명하도록 하겠습니다. 사용문법 사용문법은 아래와 같이 클래스 속성에 클래스명을 지정하거나 (class binding) [class.bg-dark]="boolean" ngClass 디렉티브로 지정할 표현과 요건을 지정하는 방법으로 사용합니다 (이 방법의 경우 각 클래스를 ' , '로 분리하여 여러 클래스를 사용할 수 있는 장점이 있습니다. [ngClass]="{className: boolean}" 사용예시 Class binding Author Lorem ipsu.. 앵귤러 템플릿 - two-way binding 이벤트바인딩은 화면에서 일어나는 이벤트만 감지하여 데이터소스로, property 바인딩은 데이터소스에서 일어나는 데이터의 변화만 감지하여 화면으로 보내줍니다. 따라서, 이벤트바인딩은 데이터소스의 변화를, property 바인딩은 화면의 변화를 감지하지 못하는데 요. two-way 바인딩은 화면과 데이터소스의 데이터 변화를 동시에 감지하고 양방으로 보낼 수 있게 해 줍니다. 한 가지 주의할 점은 해당하는 대상이 이벤트와 값을 모두 가져야 하기 때문에 단일 요소에 대한 two-way 바인딩은 사용할 수 있는 범위가 상대적으로 줄어든다는 점입니다. 사용방법 예시를 위해 ngModel directive를 사용해 보겠습니다. /* app.modules.ts */ import { AppComponent } from.. 앵귤러 템플릿 - event binding 이벤트 바인딩은 화면에 입력된 유저의 행동을 감지하고 해당 정보를 데이터 소스로 보내주는 역할을 합니다. 사용방법 앵귤러이벤트는 HTML에서 제공하는 이벤트 명 (on 제외)을 괄호로 감싸서 이벤트바인딩에 사용되는 이벤트임을 표시하는데요. 문법은 아래와 같이 템플릿에서 이벤트 지정 후 큰따옴표 안에 원하는 행동이나 값을 넣으면 됩니다. event.component.html Click 위와 같이 function을 사용한 경우 해당 function을 TypeScript class 파일에 만들어 주어야 제대로 작동합니다. event.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-event', template.. 이전 1 다음
