File dengan Kelas Komponen di Angular

Bagian utama dari setiap komponen adalah fungsionalitasnya, yaitu programnya sendiri. Di Angular, fungsionalitas komponen ditulis dalam bahasa TypeScript dan merupakan kelas OOP.

Di setiap komponen, kelas ini terletak pada file dengan ekstensi .ts. Di komponen utama kita, ini akan menjadi file app.component.ts.

Mari kita berkenalan dengan isi file ini. Pertama-tama, perhatikan kelas komponen kita:

export class AppComponent {
	title: string = 'test';
}

Kelas ini menerapkan dekorator @Component. Dekorator ini menerima objek sebagai parameternya, yang mengonfigurasi komponen kita:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

Pada properti templateUrl, ditetapkan jalur ke file yang berisi markup (layout) dari komponen kita.

Pada properti styleUrls, ditetapkan array jalur ke file CSS yang menata gaya markup komponen kita. Seperti yang Anda lihat, file gaya bisa lebih dari satu.

Pada properti selector, ditetapkan selektor dari tag HTML tempat kode HTML komponen kita akan ditampilkan (dimount). Dalam kasus kita, kita melihat nama app-root. Nama ini sesuai dengan tag bernama sama. Tag ini ditulis dalam file template src/index.html. Ke tempat di mana tag ini ditulis, markup komponen kita akan disisipkan.

Pada properti imports, ditunjukkan modul-modul yang diimpor ke dalam komponen kita.

Pada properti standalone, akan selalu ditunjukkan nilai true. Saat ini, ini lebih merupakan hal yang bersifat teknis Angular, jadi untuk sementara jangan terlalu memikirkannya.

Buka file app.component.ts dan pelajarinya.

Buat beberapa file gaya dan hubungkan mereka di dekorator.