디렉티브는 DOM의 모양이나 동작을 지시하기위한 명령입니다
HTML Element형태로 사용되거나 Element의 속석으로 사용되게 됩니다
예를들면 전장에서 사용했던 nfFor같은 속성입니다 routing에서사용한 <router-outlet>엘리먼트도 디렉티브입니다
Directive는 크게 다음과 같은 4가지 종류로 구분 할 수 있습니다.
Component Directive
계속 봐왔던 컴포넌트입니다 selector에서 directive를 지정해 사용하게 됩니다.
Attribute Directive
HTML Element의 속성으로 사용됩니다.
Structural Directive
DOM의 구성을 제어하기 위해 사용합니다
Custom Directive
직접 만들어서 사용하는 디렉티브입니다
우선 컴포넌트를 만들고 라우팅에등록시키고 메뉴에 추가하겠습니다
명령프롬프트 ng g c directive/ngClass
명령프롬프트 ng g c directive/ngFor
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DemoComponent} from './demo/demo.component';
import {Demo2Component} from './demo2/demo2.component';
import {OnewayComponent} from './bind/oneway/oneway.component';
import {TwowayComponent} from './bind/twoway/twoway.component';
import {NgClassComponent} from './directive/ng-class/ng-class.component';
import {NgIfComponent} from './directive/ng-if/ng-if.component';
import {NgForComponent} from './directive/ng-for/ng-for.component';
const routes: Routes = [
{path: 'demo', component: DemoComponent},
{path: 'demo2', component: Demo2Component},
{path: 'oneway', component: OnewayComponent},
{path: 'twoway', component: TwowayComponent},
{path: 'ngClass', component: NgClassComponent},
{path: 'ngIf', component: NgIfComponent},
{path: 'ngFor', component: NgForComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts
import { Component } from '@angular/core';
import {NbMenuItem} from '@nebular/theme';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app';
items = [
{
title: 'demo',
link: ['demo'],
},
{
title: 'demo2',
link: ['demo2'],
},
{
title: 'Binding',
expanded: true,
children: [
{
title: 'One-way',
link: ['oneway'],
},
{
title: 'Two-way',
link: ['twoway'],
},
],
},
{
title: 'Directive',
expanded: true,
children: [
{
title: 'ngClass',
link: ['ngClass'],
},
{
title: 'ngIf',
link: ['ngIf'],
},
{
title: 'ngFor',
link: ['ngFor'],
},
],
},
];
}
먼저 ngClass입니다 태그에 속성형태로 사용하며
[ngClass]="자바스크립트코드" 와같이 동적으로 엘리먼트의 클래스를 추가할수있습니다
ng-class.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ng-class',
templateUrl: './ng-class.component.html',
styleUrls: ['./ng-class.component.scss']
})
export class NgClassComponent implements OnInit {
className: string = 'red';
isFlag: boolean = false;
constructor() { }
ngOnInit() {
}
}
클래스명을담을변수 className과 불린값을담을변수 isFlag를 만들었습니다
ng-class.component.html
<nb-card>
<nb-card-body>
<div [ngClass]="className">[ngClass] = "컴포넌트의변수값"</div>
<button [ngClass]="{ red: isFlag }" (click)="isFlag = !isFlag">클릭</button>
</nb-card-body>
</nb-card>
첫번째사용은 클래스명이담긴 변수를 직접추가했고
두번째사용은 객체로묶어 클래스(키): 불린변수(밸류) 이런식으로 isFlag가 true일때만 클래스를 추가하겠다는겁니다
※{ red: isFlag } 여기서 red는 문자열입니다, 자바스크립트 객체의 키는 항상 문자열입니다
버튼에 클릭이벤트바인딩을걸어 토글형식으로 red 클래스를 넣었다뺐다합니다
클래스가 추가되었는지확인하기위해서 css에 스타일을만듭니다
ng-class.component.scss
.red{
background-color: red;
color: white;
}
브라우저에서 확인해보면
div에 red클래스가 추가되었고 버튼클릭시 토글로 red클래스가 추가됬다삭제됬다 합니다
ngIf입니다 태그에 속성형태로 사용하며 *ngIf="불린값"
ngIf가 true면 태그를만들고 false면 만들지않습니다
ng-if.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ng-if',
templateUrl: './ng-if.component.html',
styleUrls: ['./ng-if.component.scss']
})
export class NgIfComponent implements OnInit {
str: string = 'hello';
isFlag: boolean = false;
num: number = 0;
constructor() { }
ngOnInit() {
}
}
문자형 불린형 숫자형 변수를만들었습니다
ng-if.component.html
<nb-card>
<nb-card-body>
<h1 *ngIf="str">str이 있다면 출력 str: {{ str }}</h1>
<h1 *ngIf="str == 'hello'">비교연산도 가능</h1>
<input type="checkbox" [(ngModel)]="isFlag"> 체크해야만 버튼이보임<br>
<button *ngIf="isFlag">전송</button><br>
<input [(ngModel)]="num" type="number"><br>
숫자를 올리면
<h3 *ngIf="num">보입니다.</h3>
</nb-card-body>
</nb-card>
여러형태로 테스트유형을 만들었습니다
브라우저로 확인해보면
빈문자열 "", null, undefined, 0은 false로 처리합니다
-미완-
'DEV > Angular' 카테고리의 다른 글
| Angular 앵귤러 배우기 - 6 데이터바인딩 DataBinding (0) | 2018.12.26 |
|---|---|
| Angular 앵귤러 배우기 - 5 라우팅 Routing (0) | 2018.12.24 |
| Angular 앵귤러 배우기 - 4 네뷸라모듈설치 NebularModule (0) | 2018.12.24 |
| Angular 앵귤러 배우기 - 3 컴포넌트 Component (0) | 2018.12.24 |
| Angular 앵귤러 ngx-admin 관리자 키트 (0) | 2018.11.08 |
