Sinyal dalam Template
Ikat nilai sinyal langsung di template komponen.
Sinyal dalam Template adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Signals dalam Templat
Salah satu keunggulan signals: Anda membacanya secara langsung dalam templat dengan memanggilnya, sama seperti dalam TypeScript. Async pipe tidak diperlukan.
Membaca dalam Interpolasi
Dalam templat, panggil signal di dalam interpolasi kurung kurawal ganda untuk menampilkan nilainya.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Async Pipe Tidak Diperlukan
Dengan Observable, Anda memerlukan async pipe untuk berlangganan dan berhenti berlangganan. Signals bersifat sinkron, jadi Anda cukup memanggilnya. Tidak ada langganan yang perlu dihentikan.
Pembaruan Tampilan Otomatis
Ketika signal yang dibaca dalam templat berubah, Angular mengetahui bahwa templat tersebut bergantung padanya dan hanya memperbarui binding tersebut. Inilah contoh reaktivitas terperinci.
Memanggil Signals dalam Penangan Peristiwa
Ikat peristiwa ke metode komponen yang memperbarui signals. Templat secara otomatis dirender ulang pada binding yang terdampak.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signals dalam Binding Properti
Anda dapat memanggil signal di dalam binding apa pun, termasuk binding properti dan atribut.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signals dengan Alur Kontrol Bawaan
Templat modern menggunakan blok alur kontrol bawaan. Anda membaca signal di dalam blok if dengan memanggilnya.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Computed Signals dalam Templat
Nilai turunan sangat berguna untuk templat. Computed signal menghitung ulang hanya ketika sumbernya berubah dan dibaca dengan cara yang sama.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Membaca Computed dalam Tampilan
Baca computed signal dalam templat seperti signal lainnya.
// template: <p>Total: {{ total() }}</p>Mengapa Ini Efisien
Karena Angular melacak dengan tepat ekspresi templat mana yang membaca signal tertentu, Angular dapat melewati pekerjaan untuk bagian tampilan yang tidak bergantung pada signal yang berubah.
Kesalahan Umum: Lupa Tanda Kurung
Jika Anda menulis count, bukan count(), dalam templat, Anda akan menampilkan fungsi signal itu sendiri, bukan nilainya. Selalu panggil signal tersebut.
Cek Singkat: Templat
Bagaimana signals digunakan dalam templat?
Ringkasan: Signals dalam Templat
Anda membaca signals dalam templat dengan memanggilnya menggunakan tanda kurung, tanpa async pipe dan tanpa langganan yang perlu dihentikan. Angular hanya memperbarui binding yang bergantung pada signal yang berubah, dan computed signals bekerja dengan cara yang sama. Anda telah menyelesaikan dasar-dasar Signals.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Sinyal dalam Template” gratis?
Ya — teks lengkap “Sinyal dalam Template” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Sinyal dalam Template”?
Ikat nilai sinyal langsung di template komponen. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Sinyal dalam Template” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Apa Itu Sinyal
- Membuat dan Membaca Sinyal
- Memperbarui Sinyal dengan set dan update
- Sinyal dalam Template