Bileşenleri Anlama

Bileşenler, Angular uygulamalarının temel yapı taşlarıdır. Bu derste bileşenleri ve yaşam döngülerini öğreneceksiniz.

Bileşen, HTML, CSS ve TypeScript kodu içeren bir kullanıcı arayüzü parçasıdır. Uygulamanızın kullanıcı arayüzünün bir bölümünü temsil eder.

Bir bileşeni kolayca oluşturmak için Angular CLI'ı kullanın:

ng generate component my-component

ng generate component my-component

Bir Angular bileşeninin genellikle dört ana dosyası vardır:

• .html: şablon
• .ts: mantık
• .css: stiller
• .spec.ts: test etme

@Component dekoratörü, bileşen sınıfınızı şablonuna ve stillerine bağlar.

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

Angular bileşenlerinde, belirli noktalarda kod çalıştırmanızı sağlayan yaşam döngüsü kancaları bulunur. Yaygın kancalar arasında ngOnInit() ve ngOnDestroy() yer alır.

ngOnInit(), Angular bileşen verilerini başlattıktan sonra çalışır. İlk kurulumu yapmak için oldukça uygundur:

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

Bir bileşeni görüntülemek için seçicisini diğer şablonlarda kullanın:

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

Bileşenleri, bunları nasıl oluşturacağınızı ve yaşam döngüsü kancalarını öğrendiniz. Harika iş çıkardınız!