style 스타일링

다이나믹하게 표현하는 방법 입니다.

클래스를 이용한 방법. (css, html)

[ngClass]를 이용하여 스타일을 적용 시킬 수 있습니다.

CSS

.even {

color: #0000FF;

}

HTML

<li

class="list-group-item"

[ngClass]="{even: number %2 == 0}"

*ngFor="let number of Numbers">

{{number}}

</li>

{className: operation}

연산된 값은 false | ture 입니다.

스타일을 이용한 방법. (html)

[ngStyle]을 사용한 방법

HTML

<li

class="list-group-item"

[ngClass]="{even: number %2 == 0}"

[ngStyle]="{backgroundColor: number %2 === 0 ? 'yellow' : 'transparent'}"

*ngFor="let number of Numbers">

{{number}}

</li>

{propertyName: operation}

연산된 값은 #FFFF00와 같이 입력되어야 합니다.

 .even-bg {

background-color: #FFFF00;

}

Attribute Directive 를 이용한 방법. (ts, html)

ts파일을 생성하여 간편하게 사용할 수 있습니다.

HTML 태그의 속성 처럼 사용이 가능합니다.

ts

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({

selector: '[appBasicHighlight]'

})

export class BasicHighlightDirective implements OnInit {

constructor(private elementRef: ElementRef) {

}

ngOnInit() {

this.elementRef.nativeElement.style.backgroundColor = 'green';

}

}

HTML

<p appBasicHighlight>Style me with basic directive!</p>

하지만 이 방법은 native 엘레먼트에 직접적으로 상호작용(interact)할 수 없으므로 renderer2를 사용을 권장합니다.

import { Directive, Renderer2, OnInit, ElementRef } from '@angular/core';

@Directive({

selector: '[appBetterHighlight]'

})

export class BetterHighlightDirective implements OnInit {

constructor(private elRef: ElementRef, private renderer: Renderer2) { }

ngOnInit() {

this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue')

}

}