Angular Component Nedir?

Angular Component Nedir?

Angular, modern SPA(single page applicaiton) web uygulamaları geliştirmek için popüler bir platformdur. Bu platformun temel yapı taşlarından biri de component’lerdir. Angular component’leri, kullanıcı arayüzünü oluşturmak için kullanılan, yeniden kullanılabilir ve belli bir işi yapan en küçük parçalardır. Her bir component, kendi template’i, mantığı ve stilini içerir. Genellikle belirli bir işlevi yerine getirmek için tasarlanmıştır.

Component’ler, uygulamayı parçalara bölmek ve her bir parçayı yönetilebilir bir şekilde temsil etmek için kullanılır. Angular component’leri, karmaşık uygulamaları daha yönetilebilir ve bakımı daha kolay hale getirirken, aynı zamanda yeniden kullanılabilirlik ve kod organizasyonu sağlar. Şimdi bir component’in yapısı nasıl olur bir görelim.

/* app.component.ts */

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'yeni-angular';
}

Yukarıda app.component.ts isimli dosyada Angular’ın bir component’i bulunmaktadır. Component bir TypeScript sınıfıdır. Çünkü Angular TypeScript dili ile yazılır. Angularda kullanılan bütün önemli yapılar: Component, Module, Pipe, Directive, Guard ve Service gibi hepsi birer TypeScript sınıfıdır. Angular compiler bunların hangi sınıf tipi olduklarını üzerlerine tanımlanan işaretleyici JavaScript fonksiyonundan tanır. Bu fonksiyona decorator(işaretleyici) denir. Decatorler “@” ile başlarlar ve bir JavaScript objesi alırlar. Decator’leri başka makalede detaylı anlatacağım. Şimdilik sadece bu “@Component” decorator’ün üzerine duracağım.

İlk etapta yukarıdaki örneğe bakıldığında export edilmiş bir AppComponent sınıfı vardır. Angular’da component’ler genellikle component “ismi+Component” kelimesinin birleşimi olarak adlandırlırlar. Zorunluluk değildir fakat böyle bir kültür oluşmuştur. Örnek “AppComponent ” gibi.

AppComponent’in üzerinde “@Component” decoratörü vardır. Bu sınıfın bir component sınıfı olduğunu işaretlemiştir. Aldığı parametrelerle, component’e ait bilgi ve özellikleri tutar. Şimdi bunlara tek tek bakalım.

1. selector: Bir component’in uygulama içerisindeki benzersiz olan kimliği gibidir. Angular’da genellikle “app” + ” — ” + component adı olacak şekilde Angular CLI’in ng generate komutu ile component oluşturulduğunda otomatik ayarlanır. Fakat bu “app-” ön eki için angular.json dosyasında bir ayar mevcuttur. İhtiyaç halinde projects.project-name.prefix:’app’ ayarından değiştirlebilir. Bu selector ile bir component başka component’in template’inde çağrılır. Örneğin index.html dosyasında şuan <app-root></<app-root> olarak “AppComponent ”çağrılmıştır.
2. standalone ve imports:
   Angular 14 versiyonu ile hayatımıza girmiş bir özelliktir. 14. versiyon öncesinde her bir component bir modüle tanımlanmak zorundaydı. Fakat bu özellik sayesinde bir component standalone olarak işaretlendiyse bir modüle dahil edilmeden bütün projede bulunanan component’ler tarafından kullanılabilir. Imports ise standalone component ile beraber gelmiştir. Standalone component’in kullanacağı bağımlılıkları import etmek için kullanılır.
3. templateUrl ve styleUrl: Bir component template ve stillerini ayrı dosyada tutabiliyorken direkt component sınıfının içerisinde dahili olarakta tutabilir. Eğer dahili olarak tutuyorsa buna “inline-template” ve “inline-styles” denir. “templateUrl” ve “styleUrl” yerine, decorator’de sadece “template” ve “styles” parametreleri ile bu bilgileri alır. Eğer farklı bir dosyada bu bilgileri tutuyorsa “templateUrl” ve “styleUrl” ile bu dosyaların yerini belirtmek zorundadır. Aşağıdaki örneği inceleyiniz.

/* inline template ve inline stiller */
@Component({
  selector:'app-hero',
  template: ` 
    <h1>Tour of Heroes</h1>
    <app-hero-main [hero]="hero"></app-hero-main>
  `,                                       // inline olarak verilmiş.
  styles: ['h1 { font-weight: normal; }']  // inline olarak verilmiş
})
export class HeroAppComponent {
// ...
}

/* ayrı template dosyası ve ayrı stil dosyası */

@Component({
  templateUrl: './app.component.html', // dosya yolu
  styleUrl: './app.component.css'      // dosya yolu
})
export class AppComponent {
  // ...
}

Component’in decorator tanımındaki en çok kulanılan parametreleri anlattık. İhityaca göre daha fazla parametre kullanılabilir. Bunların ne olduğunu merak ettiyseniz buradan kontrol edebilirsiniz.

Component’in Yaşam Döngüsü

Angular’da component bir TypeScript sınıfıdır. Diğer programlama dillerinde olduğu gibi bu sınıftan bir nesne oluşturulur ve nesnenin işi bitiğinde nesne yok edilir. Ayrıca bu nesnenin oluşturulma ve yok edilme anları dışında, component’in sahip olduğu özelliklere göre tetiklenen anlar vardır. İşte bu anlara component’in yaşam döngüsü denir. Component içerisinde bu anları yakalayıp işlem yapmak için Angular bize bir dizi metod sunmaktadır. Bu metotların tanımlı oldukları interface’ler vardır. Component’in yaşam döngüsünde sayılacak ama interface’i olmayan tek metot kurucu(constructor) metottur. Bunları tek tek açıklayarak örnekler ile göstereceğim.

1) Contstructor: Angular TypeScript dili ile yazılır demiştik. Ve component bir sınıf olduğu için bu sınıftan nesne üreten bir constructor metot her zaman vardır. Bir component oluşturulduğunda tetiklenen ilk metot constructor’dur.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrl: './child.component.css'
})
export class ChildComponent {
  constructor() {
    console.log('Constructor called');
  }
}

2) ngOnChanges(): Bu metodu kullanmak için öncelikle “OnChanges” interface’ini implement etmek gerekir. Bu metod ‘SimpleChanges’ tipinde bir nesne ile component içerisinde hangi property’lerin değiştiğini gösterir. Constructor’dan hemen sonra ve “ngOnInit()” metodundan önce tetiklenir. Daha sonrada “data-bound-property” olan “@Input” ve “@Output” property’lerin her değişimlerinde tetiklenir. Bir component “@Input” ile veri alıyorsa, ve bu gelen veriye göre işlem yapıyorsak, “ngOnChanges()” içerisinde işlemimizi yapabiliriz. Aşağıdaki örneği inceleyebilirsiniz.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<p>parent works!</p>`,
  styleUrl: './parent.component.css'
})
export class ParentComponent implements OnChanges {
  @Input() message: string | undefined; // burası set edildiğinde tetiklenir.

  ngOnChanges(changes: SimpleChanges): void {
    if(changes['message'].currentValue!=undefined) 
      {
        console.log(this.message);
      }
  }
}

3) ngOnInit(): Bu metodu kullanmak için öncelikle “OnInit” interface’ini implement etmek gerekir. Angular constructor ile component sınıfından bir nesne oluşturur. Daha sonra, eğer component “data-bound-property” varsa, bunları set ettikten hemen sonra “ngOnInit()” tetiklenir. Bu metot “ngOnChanges()” metodunun ilk tetiklenmesinden hemen sonra bir defaya mahsus tetiklenir.

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

@Component({
  selector: 'app-parent',
  template: `<p>parent works!</p>`,
  styleUrl: './parent.component.css'
})
export class ParentComponent implements OnInit {

  ngOnInit(): void {
    console.log('Merhaba Dünya');
  }
}

4) ngDoCheck(): Angular gelen datalarla arayüzü sürekli güncel tutar. Bunun için kendi içinde ‘change-detection’ algoritması vardır. Bu algoritma component’leri sürekli tarar ve değişiklikleri arayüzlere uygular. Bu taramayı her yaptığında, bunu component’e bildirir. Bazı durumlarda Angular değişiklikleri yakalamayabiliyor. İşte bu tarz durumlarda garanti olarak değişiklikleri uygulamak geliştiriciye düşüyor. Geliştirici de işlemlerini bu metot içerisinde gerçekleştirir. Bu metodu kullanmak için öncelikle “DoCheck” interface’ini implement etmek gerekir. Bu metot “ngOnChanges()” ve “ngOnInit()” metotlarının ilk tetiklenmesinden hemen sonra ve “change-detection” algoritmasının her çalışmasında tetiklenir.

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

@Component({
  selector: 'app-parent',
  template: `<p>parent works!</p>`,
  styleUrl: './parent.component.css'
})
export class ParentComponent implements DoCheck {
  
  ngDoCheck(): void {
    console.log('Check Yapıldı');
  }
}

5) ngAfterContentInit(): Angular’da bir component kendi template’i içerisinde tanımladığı içerik dışında dışarıdan da içerik alabilir. Bu içeriğe çoğu zaman “content projection”, “template projection” veya “external content” denir. Bunu burada uzun uzun anlatmayacağım çünkü ayrı bir konu olarak başka makalede anlatmayı düşünüyorum. Peki bir component nasıl dışarıdan içerik alır? Aşağıdaki örneği incelerseniz kafanızda oturacaktır.

/* child.component.ts */

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

@Component({
  selector: 'app-child',
  template: `   <h2>Child content projection</h2>
                <ng-content></ng-content>`, // projection ile verilen içerik burada gözükür
  styleUrl: './child.component.css'
})
export class ChildComponent implements AfterContentInit {

  ngAfterContentInit(): void {
    console.log('Content init.');
  }
}

<!-- parent.component.html -->
<app-child>
    <button>Projection Buton</button>
</app-child>

Yukarıdaki örnekte child component’in template’inde <ng-content></ng-content> etiketleri vardır. Bu etiketler child component’in çağrıldığı yerde <app-child> … </app-child> etiketleri arasında verilecek content’i gösterecektir. Tıpkı parent component’in template’inde aralarına bir tane <button>Projection Buton</button> verildiği gibi. İşte bu noktada child component oluşturulup content’i verildiğide “ngAfterContentInit()” metodu tetiklenecektir. Bu metodu kullanmak için öncelikle “AfterContentInit” interface’ini implement etmek gerekir. Bu metot “ngDoCheck()” metodunun ilk tetiklenmesinden hemen sonra bir defaya mahsus tetiklenir.

6) ngAfterContentChecked(): Yukarıda anlattığımız gibi component’e dışarıdan verilen içerik kontrol edildikten sonra “ngAfterContentInit()” tetiklenir. Daha sonrada “ngAfterContentChecked()” metodu tetiklenir. Bu metodu kullanmak için öncelikle ‘AfterContentChecked’ interface’ini implement etmek gerekir. Bu metot ‘ngAfterContentInit()’ ten sonra ve her ‘ngDoCheck()’ döngüsünde tetiklenir.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrl: './child.component.css'
})
export class ChildComponent implements AfterContentChecked {

  ngAfterContentChecked(): void {
    console.log('Content checked.');
  }
}

7) ngAfterViewInit(): Component’in ve o component içerisinde çağrılan child component’lerin template’leri başlatıldığında bu metot tetiklenir. Sıralama olarak ‘ngAfterContentChecked()’ metodunun ilk tetiklenmesinden hemen sonra tetiklenir. Bu metodu kullanmak için öncelikle ‘AfterViewInit’ interface’ini implement etmek gerekir.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrl: './child.component.css'
})
export class ChildComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    console.log('View init.');
  }
}

8) ngAfterViewChecked(): Angular, component’in ve o component içinde çağrılan child component’lerin template’leri her kontrol edildiğinde bu metot tetiklenir. Sıralama olarak ‘ngAfterViewInit()’ metodundan hemen sonra ve her ‘ngAfterContentChecked()’ metodu tetiklendiğinde. Bu metodu kullanmak için öncelikle ‘AfterViewChecked’ interface’ini implement etmek gerekir.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrl: './child.component.css'
})
export class ChildComponent implements AfterViewChecked {

  ngAfterViewChecked(): void {
    console.log('View checked.');
  }
}

9) ngDestroy(): Bu metot, Angular component’i yok etmeden hemen önce çağrılır. Genellikle component’in yapmış olduğu abonelikler(subscribe) sonlandırılır.

Biraz kafa karıştırıcı olduğunun farkındaym. Özellikle Angular’ı yeni öğrenmeye çalışanların zorlanacaklarını düşünüyorum. O yüzden tavsiye olarak bu metotları 2 gruba ayırarak öğrenmenizdir. Birinci grupta: “Constructor”, “ngOnChanges()”, “ngOnInit()”, ”ngDestroy()”, “ngDoCheck()” gibi kolay olanları anladıktan sonra diğer gruba bakmalıdırlar. İkinci grupta ise template ile alakalı olanlar: “ngAfterContentInit()”, “ngAfterContentChecked”, “ngAfterViewInit”, “ngAfterViewChecked” gibi metotlara bakılmalıdır. Çünkü ben böyle anlayabilmiştim bu konuyu.

Component’ler, Angular’ın temel taşlarından biridir. Angular’ın gücünü ve esnekliğini ortaya koyar. Bu makalede, Angular component’lerinin ne olduğunu, nasıl oluşturulduklarını ve nasıl kullanıldıklarını açıklamaya çalıştım. Az da olsa Decorator ve “template-projection” kısmından bahsettim. Son olarak bir component’in yaşam döngüsünde hangi metotları tetiklediğini ve bu tetiklemenin koşullarına ve sırlamasına değindim.

Component’lerin yeniden kullanılabilirliği ve modüler yapısı, Angular uygulamalarını geliştirirken verimliliği artırır. Kod organizasyonunu iyileştirir. Bu bilgiler ışığında, artık Angular bileşenlerini kullanarak daha etkili ve sağlam web uygulamaları geliştirebilir.

Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular

Angular