【Angular】プロパティバインディングを設定しよう!【HTML属性の操作】

  <div [バインドする属性名]="TypeScriptの変数名"></div>

<タグ名　(イベント名)="処理"></タグ名>

<タグ名　[属性名]="変数名"></タグ名>

<input [(ngModel)]="変数名" />

<タグ名　[属性名]="変数名"></タグ名>

<div>
  <!-- style属性にmyStyleの文字列を渡す -->
  <p [style]="myStyle">はじめまして、こんにちは</p>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  //　属性値
  myStyle: string = 'color:red';
}

<div>
  <!-- 単方向バインディングのため、文字入力しても
       実データは変更されない   -->
  <input [value]="myText" />
  {{ myText }}
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  //　属性値
  myText: string = 'テキスト';
}

<タグ名　[class.付与したいクラス名]="boolean値"></タグ名>

<div>
  <!-- チェックすると、isCheckedがtrueになり、
       black-colorというクラス名が付与される -->
  <span [class.black-color]="isChecked">チェックされると色が反転するよ！</span>
  <input type="checkbox" [(ngModel)]="isChecked" />
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  //　属性値
  isChecked: boolean = false;
}

.black-color {
  background-color: black;
  color: white;
}