프론트엔드/앵귤러 (41) 썸네일형 리스트형 앵귤러 템플릿 - directives 디렉티브는 앵귤러 앱에 추가기능을 더해주는 기능을 합니다. 디렉티브는 크게 아래와 같이 나누어지는데요. 컴포넌트 (Components) 속성 (Attribute) 구조 (Structural) 속성 (Attribute) 디렉티브 스타일이나 기능추가 등에 사용되는 디렉티브입니다. 1. ngClass 앵귤러 템플릿 - class binding & ngClass 앵귤러 class 바인딩은 특정요소에 동적으로 클래스를 추가하거나 제거하는 기능입니다. 클래스를 사용하여 상태에 따라 스타일 변경할 때 유용한 기능입니다. 사용문법 사용문법은 아래와 같이 jin-co.tistory.com 요소에 클래스를 추가하거나 없애는 기능을 합니다. 2. ngStyle 앵귤러 템플릿 - style binding & ngStyle 앵.. 앵귤러 directive - ngModel ngModel은 앵귤러 디렉티브의 하나로 폼컨트롤을 생성하고 폼 안에 사용된 개개의 필드를 폼과 연결하는 역할을 합니다. 사용법 연결은 해당 필드에 name 속성을 추가하고 'ngModel' 디렉티브를 사용하여 폼과 연결하여 사용합니다. 요소에 name 속성으로 지정된 이름 외 다른 이름을 사용하고 싶은 경우 아래와 같이 'ngModelOptions' 속성에 property binding 형식으로 옵션추가가 가능합니다. 폼 안에 특정 필드를 폼 데이터에서 제외하고 싶은 경우 'strandalone' 옵션을 추가하면 됩니다. ngModel을 활용한 template-driven-form 보러 가기 이외에도 특정 요소와 연결하여 two-way binding을 통해 입력된 값을 바로 보여주는 것도 가능합니다. .. 앵귤러 템플릿 - 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.. 앵귤러 템플릿 - attribute binding HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 attribute binding은 이러한 HTML요소의 속성을 동적으로 바꿀 수 있게 해 줍니다. 사용방법 템플릿에서 변화를 주고자 하는 속성을 아래와 같이 ( [ ] ) 꺽쇠로 감싸줍니다. property 바인딩과 차이점은 꺽쇠 안에 'attr'라는 이름으로 해당 요소가 가진 속성들을 부른 뒤 마침표로 속성 (HTML 속성이름과 정확하게 일치)을 특정하여 그 값을 변화시킨다는 점입니다. 변수명을 사용할 경우 해당 TypeScript 클래스에서 반드시 사용된 변수명을 제공해 주어야 합니다. import { Component } from '@angular/core'; @Co.. 앵귤러 템플릿 - 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.. 앵귤러 템플릿 - template expression (statement) template expression은 interpolation과 같은 문법을 사용하지만 가치를 템플릿에서 생성한다는 차이점이 있습니다. 주의할 점은 JavaScript의 일부 표현은 템플릿에서 사용이 불가한데요. 사용할 수 없는 표현들은 아래와 같습니다. 정의 (Assignments): =, +=, -=, ... Operators: new, typeof, or instanceof ( ; ) or ( , ) 를 사용한 연계표현 (Chaining expressions) 가감식: ( ++ )이나 ( -- ) 일부 ES2015+ operators bitwise operators: ( | ), ( & ), ... 또 statement (expressiont)에는 사용된 표현이 속하는 문맥 (context)이 존재.. 이전 1 2 3 4 5 6 다음
