Angular Academy · レッスン

model() Signal入力

Q: 「model() Signal入力」で何を学びますか？

model Signalで双方向バインディングを作成します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

model Signalで双方向バインディングを作成します。

「model() Signal入力」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

Signalsと双方向バインディング

現在のAngularでは、手動でInputとOutputのペアを作成しなくても双方向バインディング可能な入力を作れる、シグナルベースのmodel()が提供されています。

model Inputの宣言

model()を呼び出して、親から双方向バインディングできる書き込み可能なシグナルを作成します。

import { Component, model } from "@angular/core";

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

親からのバインディング

親では、ngModelとまったく同じように、model名に対してバナナ・イン・ア・ボックス構文を使用します。

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

modelの値の読み取り

modelはシグナルなので、関数のように呼び出して読み取ります。

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

modelへの書き込み

setまたはupdateを使ってmodelを更新します。変更は自動的に親へ伝わります。

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

必須のmodel Input

親から値を必ず渡す必要がある場合は、model.required()を使用します。

import { model } from "@angular/core";

export class FieldComponent {
  value = model.required<string>();
}

テンプレートでのmodelの使用

コンポーネント独自のテンプレートでmodelシグナルを直接バインドします。シグナルを呼び出すと現在の値を取得できます。

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

手動でOutputを用意する必要はない

model()を使う場合、別途@Outputを宣言する必要はありません。Angularが、規約に従った名前とChangeを組み合わせた名前で変更イベントを自動的に設定します。

modelとinputの違い

通常のinput()はコンポーネント内では読み取り専用ですが、model()は書き込み可能で、親への双方向バインディングをサポートします。

// read-only:
label = input("");

// two-way writable:
value = model("");

modelを使ったカウンター

ここでは、値が親と同期し続ける自己完結型のカウンターを紹介します。

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

modelを使う場面

カスタムフォームコントロール、トグル、スライダーなど、子コンポーネントが値を管理し、親もその値を読み取って更新したい場合にmodel()を使用します。

理解度チェック

modelシグナル入力についての理解度を確認しましょう。

まとめ

model()関数は、手動でInputとOutputのペアを作成しなくても双方向バインディングをサポートする書き込み可能なシグナルを作成します。呼び出して読み取り、setまたはupdateで書き込み、親からは[(name)]でバインドします。

よくある質問

「model() Signal入力」レッスンは無料ですか？

はい。「model() Signal入力」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「model() Signal入力」で何を学びますか？

model Signalで双方向バインディングを作成します。ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「model() Signal入力」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る