Angular 2의 스타일 바인딩 및 NgStyle

Angular 2 템플릿에서 인라인 스타일을 쉽게 바인딩할 수 있습니다. 예를 들어 단일 스타일 값을 바인딩하는 방법은 다음과 같습니다.

<p [style.background-color]="'darkorchid'">
  Quite something!
</p>

단위를 지정할 수도 있습니다. 예를 들어 여기서는 단위를 em으로 설정했지만 px, % 또는 rem 다음도 사용할 수 있습니다.

<p [style.font-size.em]="'3'">
  A paragraph at 3em!
</p>

다음은 구성 요소의 속성에 따라 스타일 값을 조건부로 설정하는 방법입니다.

<p [style.font-size.px]="isImportant ? '30' : '16'">
  Some text that may be important.
</p>

여러 값에 대한 NgStyle

간단한 스타일 바인딩은 단일 값에 적합하지만 여러 스타일을 적용하는 가장 쉬운 방법은 NgStyle을 사용하는 것입니다.

<p [ngStyle]="myStyles">
  You say tomato, I say tomato
</p>

그런 다음 myStyles는 다음과 같이 css 속성 이름을 키로 사용하는 객체를 포함하는 구성 요소의 속성이 됩니다.

myStyles = {
'background-color': 'lime',
'font-size': '20px',
'font-weight': 'bold'
}

또는 다음과 같이 인라인으로 제공될 수 있습니다.

<p [ngStyle]="{'background-color': 'lime',
    'font-size': '20px',
    'font-weight': 'bold'}">
  You say tomato, I say tomato
</p>

또는 객체가 메서드의 반환 값일 수 있습니다.

<p [ngStyle]="setMyStyles()">
  You say tomato, I say tomato
</p>

관련 구성 요소 클래스에서

setMyStyles() {
  let styles = {
    'background-color': this.user.isExpired ? 'red' : 'transparent',
    'font-weight': this.isImportant ? 'bold' : 'normal'
  };
  return styles;
}

또한보십시오

• 클래스 바인딩 + NgClass