Angular’da Custom Component

Angular, modern web uygulamaları geliştirmek için güçlü bir framework sunuyor. Özellikle component yapısı, uygulamaların hem modüler hem de yeniden kullanılabilir hale gelmesini sağlıyor. Fakat bazen Angular’ın sunduğu hazır componentler yetersiz kalabilir. İşte bu noktada, custom componentler devreye giriyor. Bu yazıda, custom componentlerin nasıl geliştirileceğini adım adım inceleyip, Angular projelerinizde nasıl kullanabileceğinizi anlatmaya çalışacağım

1. Custom Component Nedir?

Basitçe açıklamak gerekirse, custom componentler, bizim ihtiyaçlarımıza göre özelleştirdiğimiz Angular componentleridir. Angular’daki standart componentler belirli işlevleri yerine getirirken, custom componentler size uygulamanızda daha fazla esneklik sağlar.

2. Neden Custom Component?

• Yeniden kullanılabilirlik: Bir kere oluşturduğunuz custom componenti, projedeki farklı sayfalarda ya da projelerde tekrar kullanabilirsiniz.
• Kodun okunabilirliği: Uygulamanızda aynı HTML kodlarını tekrar tekrar yazmak yerine, custom componentler kullanarak kodunuzu daha temiz ve okunabilir hale getirebilirsiniz.
• Modüler yapı: Custom componentler, büyük uygulamaları daha küçük ve yönetilebilir parçalara bölmenize olanak tanır.

3. Angular’da Custom Component Oluşturma

Bir custom component oluşturmak için Angular CLI’yı kullanabilirsiniz.

Bu komut, sizin için bir customButton componenti oluşturacaktır. app/custom-button klasöründe, aşağıdaki dört dosyayı göreceksiniz:

ng generate component customButton

• custom-button.component.ts
• custom-button.component.html
• custom-button.component.css
• custom-button.component.spec.ts

Bu dosyalardan özellikle custom-button.component.ts ve custom-button.component.html üzerine yoğunlaşacağız.

4. Custom Component’in İç Yapısı

custom-button.component.ts

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

@Component({
  selector: 'app-custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['./custom-button.component.css']
})
export class CustomButtonComponent {
  buttonText: string = 'Tıkla!';

  handleClick() {
    alert('Butona tıkladınız!');
  }
}

Bu basit component örneği, bir butonun üzerinde “Tıkla!” yazan ve tıklandığında bir uyarı mesajı gösteren bir custom button bileşen.

custom-button.component.html

<button (click)="handleClick()">
  {{ buttonText }}
</button>

5. Custom Component’i Kullanmak

Artık custom componentimizi başka componentlerde kullanabiliriz. Örneğin, app.component.html dosyasına aşağıdaki gibi ekleyebilirsiniz:

<app-custom-button></app-custom-button>

Bu sayede, custom buton componentini uygulamanızın herhangi bir yerinde rahatça kullanabilirsiniz.

6. Input ve Output ile Componentler Arası İletişim

Custom componentlerin gücünü tam anlamıyla kullanabilmek için, Input ve Output dekoratörlerini kullanarak parent ve child componentler arasında veri alışverişi yapabilirsiniz.

Input Kullanımı

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

@Component({
  selector: 'app-custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['./custom-button.component.css']
})
export class CustomButtonComponent {
  @Input() buttonText: string = 'Varsayılan Buton';
}

Artık app.component.html‘de butonun metnini dışarıdan verebiliriz:

<app-custom-button [buttonText]="'Yeni Buton Metni'"></app-custom-button>

Output Kullanımı

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

@Component({
  selector: 'app-custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['./custom-button.component.css']
})
export class CustomButtonComponent {
  @Output() buttonClicked = new EventEmitter<void>();

  handleClick() {
    this.buttonClicked.emit();
  }
}

Parent componentte ise bu olayı dinleyip işleyebilirsiniz:

<app-custom-button (buttonClicked)="handleButtonClick()"></app-custom-button>

app.component.ts

handleButtonClick() {
  console.log('Butona tıklandı!');
}

Custom componentler, Angular projelerinde kodunuzu modüler ve sürdürülebilir hale getirmenin harika bir yoludur. Hem görünümü hem de işlevselliği özelleştirerek uygulamanızın ihtiyaçlarına tam olarak cevap verebilirsiniz