Angular

Component Dasar

Penjelasan

Component Angular adalah class TypeScript yang ditandai decorator @Component({...}), berisi konfigurasi selector (nama tag custom-nya), template (HTML), dan styleUrl (CSS). Angular modern default-nya standalone: true, artinya component bisa dipakai langsung tanpa perlu didaftarkan ke NgModule terpisah.

Contoh Konsep

// kartu-produk.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-kartu-produk',
    standalone: true,
    template: `
        <div class="kartu">
            <h2>Kaos CompileDaily</h2>
            <p>Rp 99000</p>
        </div>
    `,
})
export class KartuProdukComponent {}

Praktikum

Buat standalone component bernama SapaComponent dengan selector 'app-sapa', template-nya menampilkan "Halo dari Angular!" di dalam tag <h1>.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Selector component (mis. 'app-kartu-produk') dipakai sebagai NAMA TAG HTML custom saat component itu dipakai di template lain (<app-kartu-produk></app-kartu-produk>) — konvensinya diawali prefix (mis. app-) supaya tidak bentrok dengan tag HTML standar di masa depan.

← Kembali Pengenalan Angular Lanjutkan → Template Syntax & Property Binding