Angular에서 ngStyle 지시문 구현

1. Angular의 ngStyle 지시문
2. Angular에서 ngStyle 지시문을 구현하는 단계

Angular 스타일 지시문을 사용하면 HTML 요소에 스타일을 적용할 수 있습니다. ngStyle 지시문은 Angular의 style 지시문을 변형한 것입니다.

이 기사에서는 Angular에서 ngStyle 지시문을 사용하는 방법에 대해 설명합니다.

Angular의 ngStyle 지시문

ngStyle 지시문은 CSS 선택기를 사용하여 HTML 요소에 스타일을 적용합니다. 이 지시문은 Angular 템플릿 엔진과 함께 작동하므로 HTML 문서를 렌더링하는 방법을 더 많이 제어할 수 있습니다.

ngStyle 지시문은 Angular에서 가장 널리 사용되는 지시문 중 하나입니다. 커스텀 CSS 클래스 적용, 폼 요소 스타일링 등 다양한 용도로 사용할 수 있습니다.

통사론:

<element [ngStyle]="{'styleNames': styleExp}">...</element>

ngStyle 속성 지시문의 값은 조건부 이진 또는 삼항 표현식일 수 있습니다. 또한, 컨트롤러가 필요에 따라 제어할 수 있는 컨트롤러 내에 정의된 모든 메서드 호출을 처리합니다.

또한 ngStyle 지시문을 사용하여 모델 값을 기반으로 View 및 CSS 스타일을 관리하여 모델 값이 변경될 때 ngStyle이 실행되고 CSS 스타일이 업데이트되도록 할 수 있습니다.

Angular에서 ngStyle 지시문을 구현하는 단계

ngStyle 지시문은 간단하며 DOM의 모든 요소에 적용할 수 있습니다. 웹사이트에서 사용하기 전에 몇 가지 단계를 따라야 합니다.

위에서 언급한 단계를 사용하여 예를 논의해 보겠습니다.

타입스크립트 코드:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    canSave = true;
}

HTML 코드:

<h2>Example of ng-style in Angular</h2>
<button
    [ngStyle] = "{
        'backgroundColor' : canSave ? 'pink' : 'blue',
        'color' : canSave ? 'red' : 'yellow',
        'margin-left': '200px',
        'padding': '30px',
        'margin-top': '200px'
    }"
>A simple button</button>

예제에서는 ngStyle 지시문을 사용하여 간단한 버튼을 만들고 여백, 패딩, 글꼴 및 배경색을 지정했습니다.

여기를 클릭하여 위 코드의 데모를 확인하십시오.