Bileşen host elemanları

Angular, bileşenin seçicisiyle eşleşen her HTML elemanı için bileşenin bir örneğini oluşturur. Bir bileşenin seçicisiyle eşleşen DOM elemanı, o bileşenin host elemanıdır. Bir bileşenin şablonunun içeriği, host elemanı içerisinde render edilir.

// Bileşen kaynağı
@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
})
export class ProfilePhoto {}

<!-- Bileşeni kullanma -->
<h3>Your profile photo</h3>
<profile-photo />
<button>Upload a new profile photo</button>

<!-- Render edilmiş DOM -->
<h3>Your profile photo</h3>
<profile-photo>
  <img src="profile-photo.jpg" alt="Your profile photo" />
</profile-photo>
<button>Upload a new profile photo</button>

Yukarıdaki örnekte, <profile-photo> bileşeni ProfilePhoto bileşenin host elemanıdır.

Host elemanına bağlama

Bir bileşen, host elemanına özellikler, nitelikler, stiller ve olaylar bağlayabilir. Bu, bileşenin şablonu içerisindeki elemanlardaki bağlamalarla aynı şekilde çalışır, ancak @Component dekoratöründeki host özelliği ile tanımlanır:

@Component({
  ...,
  host: {
    'role': 'slider',
    '[attr.aria-valuenow]': 'value',
    '[class.active]': 'isActive()',
    '[style.background]' : `hasError() ? 'red' : 'green'`,
    '[tabIndex]': 'disabled ? -1 : 0',
    '(keydown)': 'updateValue($event)',
  },
})
export class CustomSlider {
  value: number = 0;
  disabled: boolean = false;
  isActive = signal(false);
  hasError = signal(false);
  updateValue(event: KeyboardEvent) { /* ... */ }

  /* ... */
}

@HostBinding ve @HostListener dekoratörleri

Alternatif olarak, sınıf üyelerine @HostBinding ve @HostListener dekoratörlerini uygulayarak host elemanına bağlama yapabilirsiniz.

@HostBinding, host özelliklerini ve niteliklerini özellikler ve getter'lara bağlamanıza olanak tanır:

@Component({
  /* ... */
})
export class CustomSlider {
  @HostBinding('attr.aria-valuenow')
  value: number = 0;

  @HostBinding('tabIndex')
  get tabIndex() {
    return this.disabled ? -1 : 0;
  }

  /* ... */
}

@HostListener, host elemanına olay dinleyicileri bağlamanıza olanak tanır. Dekoratör bir olay adı ve isteğe bağlı bir argüman dizisi kabul eder:

export class CustomSlider {
  @HostListener('keydown', ['$event'])
  updateValue(event: KeyboardEvent) {
    /* ... */
  }
}

Bağlama çakışmaları

Bir şablonda bileşen kullandığınızda, o bileşen örneğinin elemanına bağlamalar ekleyebilirsiniz. Bileşen aynı zamanda aynı özellikler veya nitelikler için host bağlamaları da tanımlayabilir.

@Component({
  ...,
  host: {
    'role': 'presentation',
    '[id]': 'id',
  }
})
export class ProfilePhoto { /* ... */ }

<profile-photo role="group" [id]="otherId" />

Bu gibi durumlarda, hangi değerin kazanacağını aşağıdaki kurallar belirler:

• Her iki değer de statikse, örnek bağlaması kazanır.
• Bir değer statik ve diğeri dinamikse, dinamik değer kazanır.
• Her iki değer de dinamikse, bileşenin host bağlaması kazanır.

CSS özel özellikleri ile stillendirme

Geliştiriciler, bileşen stillerinin esnek yapılandırılmasını sağlamak için sıklıkla CSS Özel Özellikleri'ne güvenirler. Bu tür özel özellikleri host elemanı üzerinde bir stil bağlaması ile ayarlayabilirsiniz.

@Component({
  /* ... */
  host: {
    '[style.--my-background]': 'color()',
  },
})
export class MyComponent {
  color = signal('lightgreen');
}

Bu örnekte, --my-background CSS özel özelliği color sinyaline bağlıdır. Özel özelliğin değeri, color sinyali her değiştiğinde otomatik olarak güncellenecektir. Bu, mevcut bileşeni ve bu özel özelliğe dayanan tüm alt bileşenleri etkileyecektir.

Alt bileşenlerde özel özellikleri ayarlama

Alternatif olarak, alt bileşenlerin host elemanı üzerinde bir stil bağlaması ile CSS özel özelliklerini ayarlamak da mümkündür.

@Component({
  selector: 'my-component',
  template: `<my-child [style.--my-background]="color()" />`,
})
export class MyComponent {
  color = signal('lightgreen');
}

Host eleman niteliklerini enjekte etme

Bileşenlere ve direktiflere, inject fonksiyonu ile birlikte HostAttributeToken kullanarak host elemanlarından statik nitelikler okunabilir.

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

@Component({
  selector: 'app-button',
  ...,
})
export class Button {
  variation = inject(new HostAttributeToken('variation'));
}

<app-button variation="primary">Click me</app-button>