Angular Academy · Pelajaran

Membuat Komponen Standalone

Deklarasikan komponen dengan flag standalone.

Membuat Komponen Standalone adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Membuat Komponen Mandiri

Komponen mandiri hanyalah sebuah kelas yang dihiasi dengan @Component dan ditandai sebagai mandiri. Dalam Angular v19+, ini adalah bawaan, jadi Anda sering kali bahkan tidak perlu menulis penandanya.

Penanda standalone

Dahulu Anda menetapkan standalone: true dalam dekorator. Pada v19 dan versi setelahnya, komponen menjadi mandiri secara bawaan, sehingga penanda tersebut bersifat opsional.

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Pemilih

selector adalah tag elemen khusus yang digunakan untuk menempatkan komponen dalam templat, seperti app-greeting.

// usage in another template:
// <app-greeting></app-greeting>

Templat Sebaris

Gunakan properti template untuk HTML sebaris, yang ideal untuk komponen kecil.

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

Templat Eksternal

Untuk tampilan yang lebih besar, gunakan templateUrl untuk menunjuk ke file HTML.

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Gaya

Tambahkan gaya dengan cakupan komponen menggunakan styles (sebaris) atau styleUrl / styleUrls (file eksternal).

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

Logika Kelas Komponen

Isi kelas menampung status dan perilaku. Dengan signals, deklarasikan status reaktif sebagai field.

import { Component, signal } from '@angular/core';

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

Tidak Memerlukan Modul

Perhatikan bahwa tidak ada @NgModule dan tidak ada array declarations. Komponen siap diimpor di mana pun diperlukan.

Konvensi Penamaan File

Konvensi Angular menamai file seperti greeting.component.ts, kelas sebagai GreetingComponent, dan pemilih sebagai app-greeting.

Menggunakan Satu Komponen di dalam Komponen Lain

Untuk menggunakan komponen mandiri anak, impor komponen tersebut dalam array imports komponen induk (dibahas pada pelajaran berikutnya), lalu tempatkan pemilihnya dalam templat induk.

Membuat dengan CLI

Angular CLI membuat komponen mandiri secara bawaan. Menjalankan ng generate component greeting akan membuat kerangka GreetingComponent mandiri untuk Anda.

Cek Singkat: Membuat Komponen

Tentang nilai bawaan komponen mandiri.

Ringkasan: Membuat Komponen Mandiri

Anda membuat komponen mandiri dengan @Component, dan dapat menetapkan standalone: true (yang menjadi bawaan pada v19+). Anda menentukan pemilih, template atau templateUrl, gaya opsional, dan logika kelas. NgModule tidak diperlukan. Selanjutnya: mengimpor dependensi secara langsung.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Komponen Standalone” gratis?

Ya — teks lengkap “Membuat Komponen Standalone” 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 “Membuat Komponen Standalone”?

Deklarasikan komponen dengan flag standalone. 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 2 dari 4.

Berapa lama pelajaran “Membuat Komponen Standalone” 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