Angular Built-in Directive
JavaScript / Angular
a minute read (About 178 words)

Angular Built-in Directive

What is Directive?

지시, 명령. View에 관련한 명령을 내리는 모든 것을 directive라고 한다.

Component의 공통된 기능을 외부로 내보낸다.

Dependency Injective

type 지정하면 Angular가 class Instance를 생성한다.

Component Directive

Component의 템플릿 표시를 위한 Directive. @Component

Attribute Directive

ngClass, ngStyle 등

ngClass

여러 개의 Class를 추가하고 제거할 때 간편하다. String, Array, Object 형태로 바인딩할 수 있다.

1
2
3
<div [ngClass] = "'active red'"></div> <!-- string -->
<div [ngClass] = ""['active', 'red']"></div> <!-- array -->
<div [ngClass] = "{'active': true, 'red': false}"></div> <!-- object -->

ngStyle

여러 개의 Inline Style을 추가하고 제거한다.

1
<div [ngStyle]="{ color: 'red', 'width.px': 100 }"></div>

Host Element

Attribute가 사용된 Element

Structural Directives

구조 디렉티브는 DOM 요소를 조건에 따라서 추가/삭제(ngIf, ngSwitch)하거나 반복 생성(ngFor)할 때 사용한다.

# Angular
190618-TIL
190617-TIL
Follow

Links

Tag Cloud

ADT Abstraction Access Modifier Ajax Algorithm Angluar Angular Array Babel C C# Call by Object Reference Call by Reference Call by Value Class Computational Thinking DOM Data Type Dependency Injection Destructuring ECMA ES6 Encapsulation Event Expression FDS12 First-class object Fisrt-class Function Function HTML, CSS Hackaton Higher Order Function Hoisting Inheritance Math Modlue Node.js Number OOP Object Observable Operater Pipe Polymorphisim Programming Promise Prototype Python Quick sort REST API React Reactive Programming Recursion RegExp Routing SPA Scope Service Single Page Application Statement String Subsequence Substring TIL TypeScript Unity Variable Web Browser Webpack Wrapper global variable immutable javaScript local variavble mutable npm object pass by reference pass by value primitive this window 실행 컨텍스트 일급 객체 자바스크립트

Categories

Recent

Archives

Tags

ADT 1
Abstraction 2
Access Modifier 1
Ajax 1
Algorithm 18
Angluar 1
Angular 10
Array 1
Babel 1
C 1
C# 1
Call by Object Reference 1
Call by Reference 1
Call by Value 1
Class 2
Computational Thinking 1
DOM 1
Data Type 1
Dependency Injection 1
Destructuring 1
ECMA 1
ES6 1
Encapsulation 2
Event 1
Expression 1
FDS12 2
First-class object 1
Fisrt-class Function 1
Function 1
HTML, CSS 5
Hackaton 2
Higher Order Function 1
Hoisting 1
Inheritance 1
Math 1
Modlue 1
Node.js 2
Number 1
OOP 3
Object 1
Observable 1
Operater 1
Pipe 1
Polymorphisim 1
Programming 1
Promise 1
Prototype 1
Python 5
Quick sort 1
REST API 1
React 1
Reactive Programming 1
Recursion 1
RegExp 1
Routing 2
SPA 1
Scope 1
Service 1
Single Page Application 1
Statement 1
String 1
Subsequence 1
Substring 1
TIL 85
TypeScript 2
Unity 1
Variable 1
Web Browser 1
Webpack 1
Wrapper 1
global variable 1
immutable 1
javaScript 2
local variavble 1
mutable 1
npm 1
object 1
pass by reference 1
pass by value 1
primitive 1
this 1
window 1
실행 컨텍스트 1
일급 객체 1
자바스크립트 39

Categories

Recent

Archives

Tags

ADT 1
Abstraction 2
Access Modifier 1
Ajax 1
Algorithm 18
Angluar 1
Angular 10
Array 1
Babel 1
C 1
C# 1
Call by Object Reference 1
Call by Reference 1
Call by Value 1
Class 2
Computational Thinking 1
DOM 1
Data Type 1
Dependency Injection 1
Destructuring 1
ECMA 1
ES6 1
Encapsulation 2
Event 1
Expression 1
FDS12 2
First-class object 1
Fisrt-class Function 1
Function 1
HTML, CSS 5
Hackaton 2
Higher Order Function 1
Hoisting 1
Inheritance 1
Math 1
Modlue 1
Node.js 2
Number 1
OOP 3
Object 1
Observable 1
Operater 1
Pipe 1
Polymorphisim 1
Programming 1
Promise 1
Prototype 1
Python 5
Quick sort 1
REST API 1
React 1
Reactive Programming 1
Recursion 1
RegExp 1
Routing 2
SPA 1
Scope 1
Service 1
Single Page Application 1
Statement 1
String 1
Subsequence 1
Substring 1
TIL 85
TypeScript 2
Unity 1
Variable 1
Web Browser 1
Webpack 1
Wrapper 1
global variable 1
immutable 1
javaScript 2
local variavble 1
mutable 1
npm 1
object 1
pass by reference 1
pass by value 1
primitive 1
this 1
window 1
실행 컨텍스트 1
일급 객체 1
자바스크립트 39
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×