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.