Angular Academy · Pelajaran

Pipe async

Berlangganan di template tanpa pembersihan manual.

Pipe async 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.

Fungsi pipa async

Pipa async melakukan subscribe ke Observable (atau Promise) di dalam templat, menampilkan nilai terbaru yang dipancarkan, dan secara otomatis berhenti berlangganan saat komponen dihancurkan.

Penggunaan dasar

Ikat observable secara langsung di dalam templat dan salurkan melalui async.

@Component({
  template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
  message$ = of('Hello from RxJS');
}

Menampilkan objek dengan async

Pipa ini berfungsi dengan jenis nilai apa pun yang dipancarkan. Gabungkan dengan pipa lain seperti json atau date.

user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>

Hindari beberapa langganan

Setiap penggunaan async membuat satu langganan. Menggunakannya berkali-kali pada observable yang sama akan memicu beberapa panggilan HTTP. Gunakan sintaks as untuk melakukan subscribe satu kali.

<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
</div>

Dengan alur kontrol baru

Dalam Angular modern, gunakan @if bersama as untuk pola satu langganan yang sama.

@if (user$ | async; as user) {
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
}

Null saat menunggu

Sebelum emisi pertama, async menghasilkan null. Tangani state pemuatan secara eksplisit.

@if (data$ | async; as data) {
  <list [items]="data" />
} @else {
  <p>Loading...</p>
}

Tidak perlu berhenti berlangganan secara manual

Pipa ini secara otomatis berhenti berlangganan saat penghancuran, sehingga menghilangkan seluruh kategori kebocoran memori. Karena itu, pipa ini menjadi cara yang disarankan untuk menggunakan observable dalam templat.

Beralih antar-observable

Jika referensi observable yang diikat berubah, pipa async secara otomatis berhenti berlangganan dari observable lama dan melakukan subscribe ke observable baru.

search(term: string) {
  this.results$ = this.http.get('/api/search?q=' + term);
  // async pipe swaps subscriptions for you
}

Pipa async dengan BehaviorSubject

Menggabungkan layanan BehaviorSubject dengan pipa async menghasilkan UI reaktif yang rapi tanpa kode langganan manual.

// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>

Pipa async vs toSignal

Keduanya mengelola langganan secara otomatis. Pipa async berada di dalam templat; toSignal() membawa nilainya ke kode komponen sebagai signal. Pilih berdasarkan tempat Anda memerlukan nilai tersebut.

import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}

Ringkasan praktik terbaik

Utamakan pipa async (atau toSignal) daripada langganan manual dalam komponen. Gunakan as untuk menghindari langganan ganda, dan selalu tangani state awal null/pemuatan.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pipa async.

Ringkasan: Pipa Async

Pipa async melakukan subscribe di dalam templat dan membersihkan dirinya saat penghancuran.

Gunakan as (bersama @if atau *ngIf) untuk melakukan subscribe satu kali.
Pipa ini menghasilkan null sebelum emisi pertama—tangani pemuatan.
Lebih disarankan daripada langganan manual untuk templat.

Anda telah menyelesaikan Dasar-Dasar RxJS.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pipe async” gratis?

Ya — teks lengkap “Pipe async” 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 “Pipe async”?

Berlangganan di template tanpa pembersihan manual. 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 “Pipe async” 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

← Kembali ke Angular Academy