Angular　データバインディングの基礎と使い方

コンポーネントファイル
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  //string型の変数を宣言する
name= "Ichiro TANAKA";
}

HTMLファイル
<!-- 要素内テキストの代わりに入れる -->
<div>{{ name }}</div>
<!-- 要素のプロパティの値として入れる -->
<input type="text" value="{{ name }}">

コンポーネントファイル
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
})
export class AppComponent {
//boolean型の変数を宣言する
btnAbled= false;
btnDisabled= true;
} 

HTMLファイル
<!-- ボタンのdisabledというプロパティを角括弧で囲み
コンポーネントで宣言したboolean変数btnDisabledを代入する -->
<button [disabled]="btnAbled">Disabled button</button>
<hr>
<!-- ボタンのdisabledというプロパティを角括弧で囲み
コンポーネントで宣言したboolean変数btnDisabledを代入する -->
<button [disabled]="btnDisabled">Disabled button</button>

コンポーネントファイル
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
})
export class AppComponent {
//colspanVal変数を宣言する
colspanVal=2;
} 

HTMLファイル
<table>
  <th>1行目</th>
  <th>2行目</th>
  <th>3行目</th>
  <tr>
    <td>データ１</td>
    <td>データ２</td>
    <td>データ３</td>
  </tr>
  <tr>
    <!-- ここをプロパティバインディング[colspan]="colspanVal"にすると
    エラーが出る -->
    <td [attr.colspan]="colspanVal">データ４</td>
    <td>データ５</td>
  </tr>
</table>

SASS（CSS）
@charset "utf-8" 
.myClass
background-color: yellowgreen 

div
margin: 5px 

コンポーネントファイル
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
})
export class AppComponent {
//SASSで作ったクラス（myClass）を変数に代入する
myClassVal= 'myClass'
//classActiveというboolean変数を宣言する
classActive=true;
//classNotActiveというboolean変数を宣言する
classNotActive=false;
} 

HTMLファイル
<div class="myClass">普通のSASSの文です</div>
<div [class]="myClassVal">クラスをプロパティバインディングした文です</div>
<div [class.myClass]="classActive">クラスバインディングActiveの文です</div>
<div [class.myClass]="classNotActive">クラスバインディングNotActiveの文です</div>

コンポーネントファイル
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
})
export class AppComponent {
//fontColorという変数を宣言し、値redを代入します。
fontColor="red"
} 

HTMLファイル
<div style="color: green">通常のStyleの設定です</div>
<div [style.color]="'blue'">スタイルバインディンの値に直接blueを入れた文です</div>
<div [style.color]="fontColor">スタイルバインディンの値に変数fontColorを入れた文です</div>

コンポーネントファイル
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
})
export class AppComponent {
//fontColorという変数を宣言し、値redを代入します。
fontColor="red";
backgroundColor="lightgreen";
//フォントカラーを変更するファンクション
changeFontColor(){
this.fontColor="green";
}
//バックグラウンドカラーを黄色にするファンクション
backgroundColorToYellow(){
this.backgroundColor="yellow"
}
//バックグラウンドカラーを緑にするファンクション
backgroundColorToGreen(){
this.backgroundColor="lightgreen"
}
} 

HTMLファイル
<div 
<!-- フォントカラーを設定するスタイルバインディング -->
[style.color]="fontColor" 
<!-- バックグラウンドカラーを設定するスタイルバインディング -->
[style.backgroundColor]="backgroundColor" 
<!-- マウスを要素の上に置いた時、発生するファンクション -->
(mouseover)="backgroundColorToYellow()"
<!-- マウスを要素の上から離した時、発生するファンクション -->
(mouseout)="backgroundColorToGreen()">
  フォントカラーとバックグラウンドカラーを変更できます。
</div>
<!-- ボタンクリックで発生するファンクション -->
<button (click)="changeFontColor()">フォントカラー変更</button>

Errorメッセージ
Error: src/app/app.component.html:11:20 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.
11 <input type="text" [(ngModel)]="userName">
  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
    Error occurs in the template of component AppComponent.

App moduleファイル
import { NgModule } from '@angular/core';
//ここにFormsModuleを追加
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; @NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
//ここにFormsModuleを追加
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } 

コンポーネントファイル
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'],
})
export class AppComponent {
userName1: string="Taro"
userName2: string="Hanako" updateValue(event: any){
this.userName1= event.target.value;
}
} 

HTMLファイル
<p>プロパティバインディングとイベントバインディングの両方を使った場合 </p>
<input type="text" [value]="userName1" (input)="updateValue($event)">
<div> {{userName1}} </div>
<hr>
<p>ngModelを使った場合 </p>
<input type="text" [(ngModel)]="userName2">
<div> {{userName2}} </div>