전체 글 (522) 썸네일형 리스트형 앵귤러 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.. 드래그 앤 드랍 자바스크립트를 사용해서 드레그 앤 드랍 효과를 구현 해 보겠습니다. 구성하기 드래그하고자 하는 요소에 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)이 존재.. 이전 1 ··· 55 56 57 58 59 60 61 ··· 66 다음
