Angular Component Nedir?

Angular component, Angular framework’ünün temel yapı taşlarından biridir. Bir Angular component, kullanıcı arayüzünü oluşturmak için kullanılan bir yapıdır. Componentler, HTML şablonları ve TypeScript kodunu bir araya getirerek, kullanıcıya gösterilecek olan içeriği ve bu içeriğin nasıl davranacağını tanımlar. Bir Angular component, genellikle bir bileşenin veya bir sayfanın görüntüsünü ve işlevselliğini kontrol eder.

Angular component oluşturmak için öncelikle Angular CLI (Command Line Interface) kullanılır. Terminal veya komut istemcisinde, `ng generate component component-adı` komutunu çalıştırarak yeni bir component oluşturabilirsiniz. Bu komut, otomatik olarak gerekli dosyaları ve klasörleri oluşturacak ve yeni component’i projenize ekleyecektir. Daha sonra, oluşturulan component’in HTML şablonunu düzenleyebilir ve TypeScript kodunu ekleyebilirsiniz.

Angular component oluşturmanın üç adımı vardır:

1. İlk adım, yeni bir komponent dosyası oluşturmaktır. Bu dosya, komponentin mantığını ve görünümünü içerir.

• Yeni bir dosya oluşturun ve dosya adını komponentin adıyla uyumlu olarak belirleyin. Örneğin, eğer komponentiniz “Header” ise, dosya adını “header.component.ts” olarak belirleyebilirsiniz.
• Dosyanın içeriğine aşağıdaki kodu ekleyin:

  “`typescript
  import { Component } from ‘@angular/core’;

  @Component({
  selector: ‘app-header’,
  templateUrl: ‘./header.component.html’,
  styleUrls: [‘./header.component.css’]
  })
  export class HeaderComponent {
  // Komponentin mantığı burada yer alır
  }
  “`

2. İkinci adım, komponentin HTML şablonunu oluşturmaktır. Bu şablon, komponentin nasıl görüneceğini belirler.

• Yeni bir dosya oluşturun ve dosya adını komponentin adıyla uyumlu olarak belirleyin. Örneğin, eğer komponentiniz “Header” ise, dosya adını “header.component.html” olarak belirleyebilirsiniz.
• Dosyanın içeriğine aşağıdaki kodu ekleyin:

  “`html

  
  

  “`

3. Üçüncü adım, komponentin CSS dosyasını oluşturmaktır. Bu dosya, komponentin stilini belirler.

• Yeni bir dosya oluşturun ve dosya adını komponentin adıyla uyumlu olarak belirleyin. Örneğin, eğer komponentiniz “Header” ise, dosya adını “header.component.css” olarak belirleyebilirsiniz.
• Dosyanın içeriğine aşağıdaki kodu ekleyin:

  “`css
  header {
  /* Komponentin CSS stil tanımlamaları burada yer alır */
  }
  “`

Bu üç adımı takip ederek, Angular komponentinizi oluşturabilirsiniz. Komponenti kullanmak için, ilgili modül dosyasında komponenti tanıtmayı unutmayın.

Angular componentler arasında veri paylaşmak için çeşitli yöntemler vardır. Bunlardan biri, veriyi bir üst bileşenden alt bileşene props olarak iletmektir. Üst bileşen, alt bileşenin gerekli verilerini props olarak belirler ve bu verileri ileterek alt bileşenin kullanmasını sağlar. Diğer bir yöntem ise bir servis kullanmaktır. Bir servis oluşturarak, veriyi bu servis üzerinden depolayabilir ve componentler arasında paylaşabilirsiniz.

1. Veri paylaşımı için öncelikle bir ana bileşen (parent component) ve bir veya daha fazla alt bileşen (child component) oluşturulmalıdır.
2. Ana bileşen, alt bileşenlere veri aktarımını sağlamak için @Input() dekoratörünü kullanarak veri değişkenlerini tanımlamalıdır.
3. Alt bileşenler, ana bileşenden aldıkları verileri kullanabilmek için @Input() dekoratörünü kullanarak veri değişkenlerini tanımlamalıdır.
4. Ana bileşen, alt bileşenlere veri aktarımı yaparken veri değişkenlerini kullanarak değerleri atamalıdır.
5. Alt bileşenler, aldıkları verileri kullanarak ilgili işlemleri gerçekleştirebilir veya görüntüleyebilir.

Angular componentlerde stil uygulamak için CSS dosyaları veya inline stil kullanabilirsiniz. Component’in HTML şablonunda `style` veya `class` attributelerini kullanarak stil tanımlayabilirsiniz. Ayrıca, component’e özgü bir CSS dosyası oluşturarak da stil uygulayabilirsiniz. Bu CSS dosyasını component’e import ederek, stil kurallarını component’e özgü olarak belirleyebilirsiniz.

Angular componentlerde event yakalamak için HTML şablonunda event listener’ları kullanabilirsiniz. Örneğin, bir düğmeye tıklandığında bir işlevi çağırmak istiyorsanız, düğmenin `click` event’ini yakalayabilir ve ilgili işlevi çağırabilirsiniz. Bunun için HTML şablonunda `click` event’ini dinleyen bir event listener tanımlamanız yeterlidir.

Angular componentlerde event yakalamak için HTML şablonunda olay dinleyicisi (event listener) eklenir ve uygun bir işlev (handler) tanımlanır. Olay (event) yakalama, Event Binding ile gerçekleştirilir.

Angular componentlerde veri bağlama yapmak için `{{ }}` süslü parantezleri kullanabilirsiniz. Bu süslü parantezler içine bir değişken veya ifade yazarak, bu değişkenin veya ifadenin değerini HTML içinde gösterebilirsiniz. Örneğin, bir component’in HTML şablonunda `{{ ad }}` şeklinde bir ifade kullanarak, `ad` değişkeninin değerini ekranda gösterebilirsiniz.

Angular componentlerde veri bağlama, çift yönlü veya tek yönlü bağlama kullanılarak gerçekleştirilir.

Angular componentlerde koşullu render yapmak için `*ngIf` direktifini kullanabilirsiniz. Bu direktifi bir HTML elementine ekleyerek, o elementin sadece belirli bir koşul sağlandığında görüntülenmesini sağlayabilirsiniz. Örneğin, `*ngIf=”kullaniciGirisYapti”` şeklinde bir direktif kullanarak, `kullaniciGirisYapti` değişkeninin `true` olduğu durumlarda elementin görüntülenmesini sağlayabilirsiniz.

Angular componentlerde koşullu render yapmak için *ngIf veya *ngSwitchCase gibi direktifler kullanılabilir.

Örnek olarak, aşağıdaki HTML kodu içinde *ngIf kullanarak koşullu render işlemi gerçekleştirilmiştir:

“`html

“`

Yukarıdaki örnekte, ilk madde her zaman görünecektir çünkü *ngIf direktifinin koşulu her zaman true olarak belirlenmiştir. İkinci madde ise hiçbir zaman görünmeyecektir çünkü koşul false olarak belirlenmiştir. Üçüncü madde ise condition adında bir değişkenin değerine göre görünecek veya görünmeyecektir.

Koşullu render yaparken *ngSwitchCase direktifi de kullanılabilir. Bu direktif ile birden fazla durumu kontrol edebilir ve farklı çıktılar verebilirsiniz.

“`html

“`

Yukarıdaki örnekte, *ngSwitchCase direktifi ile farklı durumları kontrol edebilirsiniz. Eğer durum “durum1” ise ilk p elementi görünecek, eğer durum “durum2” ise ikinci p elementi görünecek, eğer hiçbir durum sağlanmazsa *ngSwitchDefault direktifi ile belirtilen p elementi görünecektir.

Bu şekilde Angular componentlerde koşullu render işlemlerini gerçekleştirebilirsiniz.