Memahami komponen Angular

Komponen adalah blok penyusun aplikasi Angular. Dalam pelajaran ini, Anda akan mempelajari komponen dan siklus hidupnya.

Apa itu komponen?

Komponen adalah bagian antarmuka pengguna yang mencakup kode HTML, CSS, dan TypeScript. Komponen mewakili bagian dari antarmuka pengguna aplikasi Anda.

Membuat komponen

Gunakan Angular CLI untuk membuat komponen dengan mudah:

ng generate component my-component

ng generate component my-component

Struktur komponen

Komponen Angular biasanya memiliki empat berkas utama:

• .html: templat
• .ts: logika
• .css: gaya
• .spec.ts: pengujian

Dekorator komponen

Dekorator @Component menghubungkan kelas komponen Anda dengan templat dan gayanya.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Kait siklus hidup

Komponen Angular memiliki kait siklus hidup yang memungkinkan Anda menjalankan kode pada titik tertentu. Kait yang umum mencakup ngOnInit() dan ngOnDestroy().

Menggunakan ngOnInit()

ngOnInit() dijalankan setelah Angular menginisialisasi data komponen. Kait ini sangat berguna untuk penyiapan awal:

ngOnInit() {
  console.log('Component initialized!');
}

Menampilkan komponen

Gunakan selektor komponen Anda di templat lain untuk menampilkannya:

<app-my-component></app-my-component>

Ringkasan

Anda telah mempelajari komponen, cara membuatnya, dan kait siklus hidupnya. Kerja bagus!