Genel Bakış • Angular

Formları, listeleri, stilleri ve kullanıcıların gördüklerini yönetmek için Angular'ın yerleşik direktiflerini kullanın.

Angular direktiflerinin farklı türleri şunlardır:

Directive Types	Details
Components	Bir şablonla kullanılır. Bu direktif türü en yaygın direktif türüdür.
Attribute directives	Bir elemanın, bileşenin veya başka bir direktifin görünümünü veya davranışını değiştirir.
Structural directives	DOM elemanları ekleyerek ve kaldırarak DOM düzenini değiştirir.

Bu kılavuz yerleşik nitelik direktiflerini kapsar.

Yerleşik nitelik direktifleri

Nitelik direktifleri, diğer HTML elemanlarının, niteliklerin, özelliklerin ve bileşenlerin davranışını dinler ve değiştirir.

En yaygın nitelik direktifleri şunlardır:

Common directives	Details
`NgClass`	Bir dizi CSS sınıfı ekler ve kaldırır.
`NgStyle`	Bir dizi HTML stili ekler ve kaldırır.
`NgModel`	Bir HTML form elemanına çift yönlü veri bağlama ekler.

HELPFUL: Yerleşik direktifler yalnızca genel API'leri kullanır. Diğer direktiflerin erişemediği hiçbir özel API'ye özel erişimleri yoktur.

`NgClass` ile sınıf ekleme ve kaldırma

ngClass ile aynı anda birden fazla CSS sınıfı ekleyin veya kaldırın.

HELPFUL: Tek bir sınıf eklemek veya kaldırmak için NgClass yerine sınıf bağlama kullanın.

Bileşende `NgClass` içe aktarma

NgClass kullanmak için bileşenin imports listesine ekleyin.

import {NgClass} from '@angular/common';

@Component({
  /* ... */
  imports: [NgClass],
})
export class AppComponent {}

`NgClass`'i bir ifade ile kullanma

Stil vermek istediğiniz elemana [ngClass] ekleyin ve bir ifadeye eşitleyin. Bu durumda, isSpecial app.component.ts içinde true olarak ayarlanmış bir boolean'dır. isSpecial true olduğundan, ngClass <div>'e special sınıfını uygular.

app.component.html

<!-- toggle the "special" class on/off with a property -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

`NgClass`'i bir yöntem ile kullanma

NgClass'i bir yöntemle kullanmak için, yöntemi bileşen sınıfına ekleyin. Aşağıdaki örnekte, setCurrentClasses(), currentClasses özelliğini diğer üç bileşen özelliğinin true veya false durumuna göre üç sınıfı ekleyen veya kaldıran bir nesne ile ayarlar.

Nesnenin her anahtarı bir CSS sınıf adıdır. Bir anahtar true ise, ngClass sınıfı ekler. Bir anahtar false ise, ngClass sınıfı kaldırır.
app.component.ts
```
currentClasses: Record<string, boolean> = {};
  /* . . . */
  setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses = {
      saveable: this.canSave,
      modified: !this.isUnchanged,
      special: this.isSpecial,
    };
  }
```
Şablonda, elemanın sınıflarını ayarlamak için ngClass özellik bağlamasını currentClasses'a ekleyin:
app.component.html
```
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>
```

Bu kullanım durumu için Angular, sınıfları başlatmada ve currentClasses nesnesinin yeniden atanmasının neden olduğu değişiklikler durumunda uygular. Tam örnek, ilk olarak ngOnInit() ile ve kullanıcı Refresh currentClasses düğmesine tıkladığında setCurrentClasses()'ı çağırır. Bu adımlar ngClass'i uygulamak için gerekli değildir.

`NgStyle` ile satır içi stilleri ayarlama

HELPFUL: Tek bir stili eklemek veya kaldırmak için NgStyle yerine stil bağlamalarını kullanın.

Bileşende `NgStyle` içe aktarma

NgStyle kullanmak için bileşenin imports listesine ekleyin.

import {NgStyle} from '@angular/common';

@Component({
  /* ... */
  imports: [NgStyle],
})
export class AppComponent {}

Bileşenin durumuna göre aynı anda birden fazla satır içi stili ayarlamak için NgStyle kullanın.

NgStyle kullanmak için bileşen sınıfına bir yöntem ekleyin.

Aşağıdaki örnekte, setCurrentStyles(), diğer üç bileşen özelliğinin durumuna göre üç stili tanımlayan bir nesne ile currentStyles özelliğini ayarlar.

app.component.ts

currentStyles: Record<string, string> = {};
  /* . . . */
  setCurrentStyles() {
    // CSS styles: set per current state of component properties
    this.currentStyles = {
      'font-style': this.canSave ? 'italic' : 'normal',
      'font-weight': !this.isUnchanged ? 'bold' : 'normal',
      'font-size': this.isSpecial ? '24px' : '12px',
    };
  }

Elemanın stillerini ayarlamak için currentStyles'a bir ngStyle özellik bağlaması ekleyin.

app.component.html

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

Bu kullanım durumu için Angular, stilleri başlatmada ve değişiklikler durumunda uygular. Bunu yapmak için tam örnek, ilk olarak ngOnInit() ile ve bağımlı özellikler bir düğme tıklamasıyla değiştiğinde setCurrentStyles()'ı çağırır. Ancak bu adımlar ngStyle'ı kendi başına uygulamak için gerekli değildir.