디렉티브 (4) 썸네일형 리스트형 앵귤러 directives - ngIf 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. If Name: {{i.name}} Pet Owner: {{i.petOwner}} Name: {{i.petName}} // ng-if1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-if1', templateUrl: './ng-if1.component.html', styleUrls: ['./ng-if1.component.css'], }) export class NgIf1Component implements OnInit { users: { .. 앵귤러 directives - ngFor 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. 일반 for 문 ID: {{i}} First Name: {{ u.firstName }} Last Name: {{ u.lastName }} Age: {{ u.age }} // ngfor1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ngfor1', templateUrl: './ngfor1.component.html', styleUrls: ['./ngfor1.component.css'], }) export class Ngfor1Component .. 앵귤러 템플릿 - 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을 통해 입력된 값을 바로 보여주는 것도 가능합니다. .. 이전 1 다음
