GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

<code javascript>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-pb',
  template: `
    <h2>
      Welcome {{name}}
    </h2>
    <h2 class="text-success">Codevolution</h2>
    <h2 [class]="successClass">Codevolution</h2>

    <h2 class="text-success" [class]="successClass">Codevolution</h2>
    <h2 [class.text-danger]="hasError">Codevolution</h2>


    <h2 [ngClass]="messageClasses">Codevolution</h2>

  `,
  styles: [`
    .text-success {
      color: green;
    }
    .text-danger {
      color: red;
    }
    .text-special {
      font-style: italic;
    }
  `]
})
export class TestPbComponent implements OnInit {
  public name = "Codevolution";
  public myId = "testId";
  public isDisabled = false;

  public successClass = "text-success";
  public hasError = true;
  public isSpecial = true;

  public messageClasses = {
    "text-success": !this.hasError,
    "text-danger": this.hasError,
    "text-special": this.isSpecial
  }

  constructor() { }

  ngOnInit() {
  }

}

</code>

GaramX

사용자 도구

사이트 도구

문서 도구