テンプレート内のSignal
コンポーネントテンプレートでSignalの値を直接バインドします。
「テンプレート内のSignal」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
テンプレート内のシグナル
シグナルの優れた点の1つは、TypeScriptと同じように、呼び出してテンプレートから直接読み取れることです。async pipeは必要ありません。
補間での読み取り
テンプレートでは、二重波括弧の補間内でシグナルを呼び出して、その値を表示します。
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Async Pipeは不要
Observableでは、購読と購読解除のためにasync pipeが必要でした。シグナルは同期的に動作するため、単に呼び出すだけで済みます。購読解除も必要ありません。
ビューの自動更新
テンプレートで読み取ったシグナルが変化すると、Angularはそのテンプレートがシグナルに依存していることを認識し、そのバインディングだけを更新します。これが、きめ細かなリアクティビティの実例です。
イベントハンドラーでのシグナル呼び出し
シグナルを更新するコンポーネントのメソッドにイベントをバインドします。テンプレートでは、影響を受けるバインディングが自動的に再レンダリングされます。
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}プロパティバインディングでのシグナル
プロパティバインディングや属性バインディングなど、あらゆるバインディング内でシグナルを呼び出せます。
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>組み込み制御フローとシグナル
現在のテンプレートでは、組み込みの制御フローブロックを使用します。ifブロック内でシグナルを読み取るには、シグナルを呼び出します。
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }テンプレート内のcomputedシグナル
導出値はテンプレートに適しています。computedシグナルは、ソースが変化した場合にのみ再計算され、同じ方法で読み取れます。
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}ビューでのcomputedの読み取り
テンプレートでは、他のシグナルと同じようにcomputedシグナルを読み取ります。
// template: <p>Total: {{ total() }}</p>効率的な理由
Angularは、どのテンプレート式がどのシグナルを読み取るかを正確に追跡します。そのため、変更されたシグナルに依存していないビューの部分の処理をスキップできます。
よくある落とし穴：括弧の付け忘れ
テンプレートで count() ではなく count と書くと、値ではなくシグナル関数自体が表示されます。シグナルは必ず呼び出してください。
クイックチェック：テンプレート
テンプレートではシグナルをどのように記述しますか。
まとめ：テンプレート内のシグナル
テンプレートでは、括弧を付けてシグナルを呼び出して読み取ります。async pipeは不要で、購読解除も必要ありません。Angularは、変更されたシグナルに依存するバインディングだけを更新し、computedシグナルも同じ方法で機能します。これでシグナルの基礎を修了しました。
よくある質問
「テンプレート内のSignal」レッスンは無料ですか？
はい。「テンプレート内のSignal」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「テンプレート内のSignal」で何を学びますか？
コンポーネントテンプレートでSignalの値を直接バインドします。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「テンプレート内のSignal」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Signalとは
- Signalの作成と読み取り
- setとupdateによるSignalの更新
- テンプレート内のSignal