전체 글 (464) 썸네일형 리스트형 앵귤러 템플릿 - 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.. 드래그 앤 드랍 자바스크립트를 사용해서 드레그 앤 드랍 효과를 구현 해 보겠습니다. 구성하기 드래그하고자 하는 요소에 draggable="true" 속성을 추가합니다. 스타일을 통해 크기과 너비 등을 지정합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; border-radius: 50%; } img { object-fit: cover; object-positi.. 앵귤러 템플릿 - template expression (statement) template expression은 interpolation과 같은 문법을 사용하지만 가치를 템플릿에서 생성한다는 차이점이 있습니다. 주의할 점은 JavaScript의 일부 표현은 템플릿에서 사용이 불가한데요. 사용할 수 없는 표현들은 아래와 같습니다. 정의 (Assignments): =, +=, -=, ... Operators: new, typeof, or instanceof ( ; ) or ( , ) 를 사용한 연계표현 (Chaining expressions) 가감식: ( ++ )이나 ( -- ) 일부 ES2015+ operators bitwise operators: ( | ), ( & ), ... 또 statement (expressiont)에는 사용된 표현이 속하는 문맥 (context)이 존재.. 앵귤러 템플릿 - property binding HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 property binding은 이러한 HTML요소의 속성과 상응하는 DOM property를 동적으로 변화시키는 기능을 합니다. 사용방법 사용하는 방법은 템플릿에서 변화를 주고자 하는 속성을 아래와 같이 다양한데요 주로 꺽쇠를 사용하는 문법을 많이 사용합니다. 변수명을 사용할 경우 해당 TypeScript 클래스에서 반드시 사용된 변수명을 제공해 주어야 합니다. // property-binding.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-proper.. 앵귤러 템플릿 - interpolation imterpolation은 TypeScript에서 동적가치를 템플릿을 가져오거나 템플릿에서 생성하여 표시하게 해 주는 기능입니다. 사용방법 1. interpolation 구현하는 방법은 아래와 같이 이중 중괄호 ( {{ }} ) 안에 표시하고자 하는 값의 이름을 넣어 주면 됩니다. 변수명을 사용할 때 주의할 점은 .ts 클래스에 반드시 해당 변수명이 존재해야 한다는 것입니다. {{ interpolation }} // interpolation.component.ts import { Component } from '@angular/core'; @Component({ selector: 'interpolation-root', templateUrl: './interpolation.component.html', s.. 이전 1 ··· 48 49 50 51 52 53 54 ··· 58 다음
