Angular’da component, UI’nın bir parçası olarak yeniden kullanılabilir, özelleştirilebilir ve yönetilebilir bir parçadır. Componentler, HTML, CSS ve TypeScript kodlarını bir araya getirerek önceden tanımlanmış bir işlevselliği yerine getirirler.
Angular’da bir component oluşturmak için öncelikle @Component dekoratörü kullanılır. Bu dekoratör, componentin özelliklerini tanımlamak için kullanılır.
Aşağıda, bir Angular componentinin temel özellikleri yer almaktadır:
Selector: Component’in HTML dosyasında çağrılacağı isimdir.
Template veya templateUrl: Component’in gösterileceği HTML şablonudur.
Style veya styleUrls: Component’in CSS stilleri için kullanılan dosya veya dosyaların yolu.
Providers: Component tarafından kullanılan servislerin, diğer componentler tarafından da kullanılabilmesi için providers array’inde tanımlanması gereklidir.
Lifecycle Hooks: Component’in belirli bir ömrü vardır. Bu ömür boyunca, Angular Component Lifecycle Hooks adı verilen özel yöntemler aracılığıyla belirli noktalarda component’in durumunu kontrol edebilirsiniz.
Aşağıdaki örnek, bir component’in nasıl oluşturulduğunu göstermektedir:
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: '<h1>Hello, World!</h1>',
styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent {}
Bu örnekte, @Component dekoratörü kullanılarak bir component oluşturulmuştur. Selector, template ve styles özellikleri bu dekoratör içinde tanımlanmıştır. export class ile başlayan sınıf da, oluşturulan component’in sınıf tanımını içermektedir.
Angular componentleri, büyük projelerde bile kolay bir şekilde yönetilebilir ve yeniden kullanılabilir olmaları sayesinde büyük bir avantaj sağlarlar. Ayrıca, componentler, farklı componentler arasında veri paylaşımını da kolaylaştırır ve böylece uygulamanın daha modüler olmasını sağlarlar.