Google'daki özel bir ekip tarafından sürdürülen Angular, geliştirme iş akışınızı basitleştirmek ve kolaylaştırmak için geniş bir araç, API ve kütüphane paketi sunar. Angular, hem ekibinizin büyüklüğüne hem de kod tabanınızın büyüklüğüne göre ölçeklenen hızlı ve güvenilir uygulamalar oluşturmak için sağlam bir platform sağlar. Angular.dev, Angular dokümantasyonunun resmi adresidir.

Angular kullanmanın nasıl bir deneyim olduğuna dair genel bir bakış

Tarayıcınızda adım adım talimatlar

Çevrimiçi başlatıcılarla veya terminalinizi kullanarak yerel olarak Angular'a hızlıca başlayın. ## Çevrimiçi Deneyin Angular'ı bir proje oluşturmadan tarayıcınızda denemek istiyorsanız, çevrimiçi deneme alanımızı kullanabilirsiniz: ## Yerel Olarak Yeni Bir Proje Oluşturun Yeni bir projeye başlıyorsanız, Git gibi araçları kullanabilmek için büyük olasılıkla yerel bir proje oluşturmak isteyeceksiniz. ### Ön Koşullar - **Node.js** - [v20.19.0 veya daha yeni](/reference/versions) - **Metin editörü** - [Visual Studio Code](https://code.visualstudio.com/) öneriyoruz - **Terminal** - [Angular CLI](/tools/cli) komutlarını çalıştırmak için gereklidir - **Geliştirme Aracı** - Geliştirme iş akışınızı iyileştirmek için [Angular Language Service](/tools/language-service) öneriyoruz ### Talimatlar Aşağıdaki kılavuz, yerel bir Angular projesi oluşturma adımlarında size yol gösterecektir. #### Angular CLI'ı Yükleyin Bir terminal açın ([Visual Studio Code](https://code.visualstudio.com/) kullanıyorsanız, [entegre terminal](https://code.visualstudio.com/docs/editor/integrated-terminal) açabilirsiniz) ve aşağıdaki komutu çalıştırın: ```shell // npm npm install -g @angular/cli ``` ```shell // pnpm pnpm install -g @angular/cli ``` ```shell // yarn yarn global add @angular/cli ``` ```shell // bun bun install -g @angular/cli ``` Bu komutu Windows veya Unix'te çalıştırırken sorun yaşıyorsanız, daha fazla bilgi için [CLI dokümantasyonuna](/tools/cli/setup-local#angular-cliı-yükleme) göz atın. #### Yeni Bir Proje Oluşturun Terminalinizde, istediğiniz proje adıyla [`ng new`](cli/new) CLI komutunu çalıştırın. Aşağıdaki örneklerde, `my-first-angular-app` örnek proje adını kullanacağız. ```shell ng new ``` Projeniz için bazı yapılandırma seçenekleri sunulacaktır. Seçenekler arasında gezinmek ve istediğinizi seçmek için ok ve enter tuşlarını kullanın. Herhangi bir tercihiniz yoksa, varsayılan seçenekleri kabul etmek ve kuruluma devam etmek için enter tuşuna basmanız yeterlidir. Yapılandırma seçeneklerini belirledikten ve CLI kurulumu tamamladıktan sonra aşağıdaki mesajı görmelisiniz: ```text ✔ Packages installed successfully. Successfully initialized git. ``` Bu noktada, projenizi yerel olarak çalıştırmaya hazırsınız! #### Yeni Projenizi Yerel Olarak Çalıştırma Terminalinizde, yeni Angular projenize geçin. ```shell cd my-first-angular-app ``` Bu noktada tüm bağımlılıklarınız yüklenmiş olmalıdır (bunu projenizde bir `node_modules` klasörünün varlığını kontrol ederek doğrulayabilirsiniz), böylece projenizi aşağıdaki komutu çalıştırarak başlatabilirsiniz: ```shell npm start ``` Her şey başarılıysa, terminalinizde benzer bir onay mesajı görmelisiniz: ```text Watch mode enabled. Watching for file changes... NOTE: Raw file sizes do not reflect development server per-request transformations. ➜ Local: http://localhost:4200/ ➜ press h + enter to show help ``` Artık `Local` kısmındaki adresi (örneğin, `http://localhost:4200`) ziyaret ederek uygulamanızı görebilirsiniz. Keyifli kodlamalar! ### Geliştirme İçin Yapay Zeka Kullanımı Tercih ettiğiniz yapay zeka destekli IDE'de geliştirmeye başlamak için [Angular prompt kuralları ve en iyi uygulamalarına göz atın](/ai/develop-with-ai). ## Sonraki Adımlar Angular projenizi oluşturduğunuza göre, [Temel Bilgiler kılavuzumuzda](/essentials) Angular hakkında daha fazla bilgi edinebilir veya detaylı kılavuzlarımızdan bir konu seçebilirsiniz! # Angular kodlama stil rehberi ## Giriş Bu kılavuz, Angular uygulama kodu için bir dizi stil kuralını kapsamaktadır. Bu öneriler Angular'ın çalışması için gerekli değildir, bunun yerine Angular ekosisteminde tutarlılık sağlayan bir dizi kodlama pratiğidir. Tutarlı bir pratikler seti, kod paylaşımını ve projeler arası geçişi kolaylaştırır. Bu kılavuz, Angular ile ilgili olmayan TypeScript veya genel kodlama pratiklerini _kapsamaz_. TypeScript için [Google'ın TypeScript stil kılavuzuna](https://google.github.io/styleguide/tsguide.html) bakın. ### Şüpheye düştüğünüzde tutarlılığı tercih edin Bu kuralların belirli bir dosyanın stiliyle çeliştiği bir durumla karşılaştığınızda, dosya içindeki tutarlılığı korumaya öncelik verin. Tek bir dosyada farklı stil kurallarını karıştırmak, bu kılavuzdaki önerilerden sapmasından daha fazla karışıklığa neden olur. ## İsimlendirme ### Dosya adlarında sözcükleri tire ile ayırın Bir dosya adındaki sözcükleri tire (`-`) ile ayırın. Örneğin, `UserProfile` adında bir bileşen `user-profile.ts` dosya adına sahiptir. ### Dosya testleri için sonuna `.spec` ekleyerek aynı adı kullanın Birim testleri için dosya adlarını `.spec.ts` ile bitirin. Örneğin, `UserProfile` bileşeni için birim test dosyası `user-profile.spec.ts` dosya adına sahiptir. ### Dosya adlarını içindeki TypeScript tanımlayıcısıyla eşleştirin Dosya adları genellikle dosyadaki kodun içeriğini tanımlamalıdır. Dosya bir TypeScript sınıfı içerdiğinde, dosya adı o sınıf adını yansıtmalıdır. Örneğin, `UserProfile` adında bir bileşen içeren bir dosya `user-profile.ts` adına sahiptir. Dosya birden fazla birincil adlandırılabilir tanımlayıcı içeriyorsa, içerdeki kodun ortak temasını tanımlayan bir ad seçin. Dosyadaki kod ortak bir tema veya özellik alanı içinde uymuyorsa, kodu farklı dosyalara ayırmayı düşünün. `helpers.ts`, `utils.ts` veya `common.ts` gibi aşırı genel dosya adlarından kaçının. ### Bileşenin TypeScript, şablon ve stil dosyaları için aynı dosya adını kullanın Bileşenler tipik olarak bir TypeScript dosyası, bir şablon dosyası ve bir stil dosyasından oluşur. Bu dosyalar farklı dosya uzantılarıyla aynı adı paylaşmalıdır. Örneğin, bir `UserProfile` bileşeni `user-profile.ts`, `user-profile.html` ve `user-profile.css` dosyalarına sahip olabilir. Bir bileşenin birden fazla stil dosyası varsa, o dosyaya özgü stilleri tanımlayan ek sözcüklerle adı ekleyin. Örneğin, `UserProfile`'ın `user-profile-settings.css` ve `user-profile-subscription.css` stil dosyaları olabilir. ## Proje yapısı ### Uygulamanın tüm kodu `src` adlı bir dizinde bulunur Tüm Angular UI kodunuz (TypeScript, HTML ve stiller) `src` adında bir dizinin içinde yaşamalıdır. Yapılandırma dosyaları veya betikler gibi UI ile ilgili olmayan kod, `src` dizininin dışında yaşamalıdır. Bu, kök uygulama dizinini farklı Angular projeleri arasında tutarlı tutar ve projenizde UI kodu ile diğer kod arasında net bir ayrım oluşturur. ### Uygulamanızı doğrudan `src` içindeki `main.ts` dosyasında bootstrap edin Bir Angular uygulamasını başlatmak veya **bootstrap** etmek için gereken kod her zaman `main.ts` adında bir dosyada yaşamalıdır. Bu, uygulamanın birincil giriş noktasını temsil eder. ### Yakından ilişkili dosyaları aynı dizinde gruplayın Angular bileşenleri bir TypeScript dosyası ve isteğe bağlı olarak bir şablon ve bir veya daha fazla stil dosyasından oluşur. Bunları aynı dizinde gruplamanız gerekir. Birim testleri, test edilen kodla aynı dizinde yaşamalıdır. İlgisiz testleri tek bir `tests` dizininde toplamaktan kaçının. ### Projenizi özellik alanlarına göre organize edin Projenizi, uygulamanızın özelliklerine veya bu dizinlerdeki kodun ortak temalarına dayalı olarak alt dizinlere organize edin. Örneğin, bir sinema sitesi olan MovieReel'in proje yapısı şöyle görünebilir: ``` src/ ├─ movie-reel/ │ ├─ show-times/ │ │ ├─ film-calendar/ │ │ ├─ film-details/ │ ├─ reserve-tickets/ │ │ ├─ payment-info/ │ │ ├─ purchase-confirmation/ ``` Bu dizinlerde bulunan kod türüne dayalı alt dizinler oluşturmaktan kaçının. Örneğin, `components`, `directives` ve `services` gibi dizinler oluşturmaktan kaçının. Bir dizine okunması veya gezinilmesi zor olacak kadar çok dosya koymaktan kaçının. Bir dizindeki dosya sayısı arttıkça, ek alt dizinlere bölmeyi düşünün. ### Dosya başına tek kavram Kaynak dosyaları tek bir _kavrama_ odaklanmayı tercih edin. Angular sınıfları için, bu genellikle dosya başına bir bileşen, direktif veya servis anlamına gelir. Ancak, sınıflarınız nispeten küçükse ve tek bir kavram olarak bir araya geliyorlarsa, bir dosyanın birden fazla bileşen veya direktif içermesi sorun değildir. Şüpheliyseniz, daha küçük dosyalara yol açan yaklaşımla gidin. ## Bağımlılık enjeksiyonu ### `inject` fonksiyonunu constructor parametre enjeksiyonuna tercih edin Constructor parametre enjeksiyonu yerine [`inject`](/api/core/inject) fonksiyonunu kullanmayı tercih edin. [`inject`](/api/core/inject) fonksiyonu constructor parametre enjeksiyonuyla aynı şekilde çalışır, ancak çeşitli stil avantajları sunar: - [`inject`](/api/core/inject), özellikle bir sınıf çok sayıda bağımlılık enjekte ettiğinde genellikle daha okunabilirdir. - Enjekte edilen bağımlılıklara yorum eklemek sözdizimsel olarak daha basittir - [`inject`](/api/core/inject) daha iyi tip çıkarımı sunar. - ES2022+ hedeflendiğinde [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields) ile, enjekte edilen bağımlılıkları okuyan alanlarda alan bildirimi ve başlatma işlemini ayırmaktan kaçınabilirsiniz. [Mevcut kodu otomatik bir araçla `inject`'e yeniden düzenleyebilirsiniz](reference/migrations/inject-function). ## Bileşenler ve direktifler ### Bileşen seçicilerini seçme Bileşen seçimleri hakkında ayrıntılar için [Bileşenler kılavuzuna](guide/components/selectors#seçici-seçme) bakın. ### Bileşen ve direktif üyelerini adlandırma Bileşenler kılavuzunda [giriş özelliklerini adlandırma](guide/components/inputs#girdi-adlarını-seçme) ve [çıkış özelliklerini adlandırma](guide/components/outputs#olay-adlarını-seçme) hakkında ayrıntılar için bakın. ### Direktif seçicilerini seçme Direktifler, bileşenlerinizle aynı [uygulamaya özgü öneki](guide/components/selectors#seçici-önekleri) kullanmalıdır. Bir direktif için özellik seçici kullanırken camelCase özellik adı kullanın. Örneğin, uygulamanız "MovieReel" olarak adlandırılıyorsa ve bir elemana araç ipucu ekleyen bir direktif oluşturuyorsanız, `[mrTooltip]` seçicisini kullanabilirsiniz. ### Angular'a özgü özellikleri yöntemlerden önce gruplayın Bileşenler ve direktifler, Angular'a özgü özellikleri genellikle sınıf bildiriminin üst kısımlarında birlikte gruplamalıdır. Bu, enjekte edilen bağımlılıkları, girişleri, çıkışları ve sorguları içerir. Bunları ve diğer özellikleri sınıfın yöntemlerinden önce tanımlayın. Bu uygulama, sınıfın şablon API'lerini ve bağımlılıklarını bulmayı kolaylaştırır. ### Bileşenleri ve direktifleri sunum odaklı tutun Bileşenlerinizin ve direktiflerinizin içindeki kod genellikle sayfada gösterilen kullanıcı arayüzü ile ilgili olmalıdır. Kullanıcı arayüzünden bağımsız olarak kendi başına anlam ifade eden kod için, diğer dosyalara yeniden düzenlemeyi tercih edin. Örneğin, form doğrulama kurallarını veya veri dönüşümlerini ayrı fonksiyonlara veya sınıflara çıkarabilirsiniz. ### Şablonlarda aşırı karmaşık mantıktan kaçının Angular şablonları, [JavaScript benzeri ifadeleri](guide/templates/expression-syntax) barındırmak üzere tasarlanmıştır. Nispeten basit mantığı doğrudan şablon ifadelerinde yakalamak için bu ifadelerden yararlanmalısınız. Şablondaki kod çok karmaşık hale geldiğinde, mantığı TypeScript koduna yeniden düzenleyin (tipik olarak bir [computed](guide/signals#computed-sinyaller) ile). "Karmaşık"ın ne olduğunu belirleyen kesin ve değişmez bir kural yoktur. En iyi yargınızı kullanın. ### Yalnızca bileşenin şablonu tarafından kullanılan sınıf üyelerinde `protected` kullanın Bir bileşen sınıfının public üyeleri, bağımlılık enjeksiyonu ve [sorgular](guide/components/queries) aracılığıyla erişilebilir bir public API tanımlar. Bileşenin şablonundan okunması amaçlanan üyeler için `protected` erişimi tercih edin. ```ts @Component({ ..., template: `

`, }) export class UserProfile { firstName = input(); lastName = input(); // `fullName` is not part of the component's public API, but is used in the template. protected fullName = computed(() => `${this.firstName()} ${this.lastName()}`); } ``` ### Değişmemesi gereken özellikler için `readonly` kullanın Angular tarafından başlatılan bileşen ve direktif özelliklerini `readonly` olarak işaretleyin. Bu, `input`, `model`, `output` ve sorgular tarafından başlatılan özellikleri içerir. readonly erişim değiştiricisi, Angular tarafından ayarlanan değerin üzerine yazılmamasını sağlar. ```ts @Component({ /*...*/ }) export class UserProfile { readonly userId = input(); readonly userSaved = output(); readonly userName = model(); } ``` Dekoratör tabanlı `@Input`, `@Output` ve sorgu API'lerini kullanan bileşenler ve direktifler için, bu tavsiye çıkış özelliklerine ve sorgulara uygulanır, ancak giriş özelliklerine uygulanmaz. ```ts @Component({ /*...*/ }) export class UserProfile { @Output() readonly userSaved = new EventEmitter(); @ViewChildren(PaymentMethod) readonly paymentMethods?: QueryList; } ``` ### `ngClass` ve `ngStyle` yerine `class` ve `style` tercih edin [`NgClass`](/api/common/NgClass) ve [`NgStyle`](/api/common/NgStyle) direktiflerini kullanmak yerine `class` ve `style` bağlamalarını tercih edin. ```html {prefer}

``` ```html {avoid}

``` Hem `class` hem de `style` bağlamaları, standart HTML özelliklerine yakından uyum sağlayan daha basit bir sözdizimi kullanır. Bu, şablonlarınızı okumayı ve anlamayı kolaylaştırır, özellikle temel HTML'ye aşina geliştiriciler için. Ek olarak, `NgClass` ve `NgStyle` direktifleri, yerleşik `class` ve `style` bağlama sözdizimine kıyasla ek bir performans maliyeti getirir. Daha fazla ayrıntı için [bağlamalar kılavuzuna](/guide/templates/binding#css-sınıfı-ve-stil-özelliği-bağlamaları) bakın. ### Olay işleyicilerini tetikleyen olay için değil, yaptıkları eylem için adlandırın Olay işleyicilerini tetikleyen olay için değil, gerçekleştirdikleri eylem için adlandırmayı tercih edin: ```html {prefer} ``` ```html {avoid} ``` Bunun gibi anlamlı adlar kullanmak, bir olayın ne yaptığını şablonu okuyarak anlamayı kolaylaştırır. Klavye olayları için, belirli işleyici adlarıyla Angular'ın tuş olayı değiştiricilerini kullanabilirsiniz: ```html

```

Bazen olay işleme mantığı özellikle uzun veya karmaşıktır, bu da tek bir iyi adlandırılmış işleyici bildirmeyi pratik olmaktan çıkarır. Bu durumlarda, 'handleKeydown' gibi bir ada geri dönmek ve ardından olay ayrıntılarına göre daha belirli davranışlara devretmek sorun değildir:

```ts
@Component({
  /*...*/
})
class RichText {
  handleKeydown(event: KeyboardEvent) {
    if (event.ctrlKey) {
      if (event.key === 'B') {
        this.activateBold();
      } else if (event.key === 'I') {
        this.activateItalic();
      }
      // ...
    }
  }
}
```

### Yaşam döngüsü yöntemlerini basit tutun

`ngOnInit` gibi yaşam döngüsü kancalarına uzun veya karmaşık mantık koymaktan kaçının. Bunun yerine, bu mantığı içeren iyi adlandırılmış yöntemler oluşturmayı ve ardından yaşam döngüsü kancalarınızda _bu yöntemleri çağırmayı_ tercih edin.
Yaşam döngüsü kanca adları _ne zaman_ çalıştıklarını tanımlar, yani içerdeki kodun ne yaptığını tanımlayan anlamlı bir adı yoktur.

```ts
{prefer}
ngOnInit() {
  this.startLogging();
  this.runBackgroundTask();
}
```

```ts
{avoid}
ngOnInit() {
  this.logger.setMode('info');
  this.logger.monitorErrors();
  // ...and all the rest of the code that would be unrolled from these methods.
}
```

### Yaşam döngüsü hook arayüzlerini kullanın

Angular, her yaşam döngüsü yöntemi için bir TypeScript arayüzü sağlar. Sınıflarınıza bir yaşam döngüsü kancası eklerken, yöntemlerin doğru adlandırılmasını sağlamak için bu arayüzleri içeri aktarın ve `implement` edin.

```ts
import {Component, OnInit} from '@angular/core';

@Component({
  /*...*/
})
export class UserProfile implements OnInit {
  // The `OnInit` interface ensures this method is named correctly.
  ngOnInit() {
    /* ... */
  }
}
```
Bileşenler, Angular uygulamalarının ana yapı taşlarıdır. Her bileşen, daha büyük bir web sayfasının bir parçasını temsil eder. Bir uygulamayı bileşenlere göre düzenlemek, projenize yapı kazandırmaya yardımcı olarak kodu bakımı kolay ve zamanla büyüyebilen belirli parçalara net bir şekilde ayırır.

## Bir Bileşen Tanımlama

Her bileşenin birkaç ana parçası vardır:

1. Angular tarafından kullanılan bazı yapılandırmaları içeren bir `@Component` [dekoratörü](https://www.typescriptlang.org/docs/handbook/decorators.html).
2. DOM'a ne render edileceğini kontrol eden bir HTML şablonu.
3. Bileşenin HTML'de nasıl kullanılacağını tanımlayan bir [CSS seçici](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors).
4. Kullanıcı girdisini işleme veya sunucuya istek gönderme gibi davranışlara sahip bir TypeScript sınıfı.

İşte basitleştirilmiş bir `UserProfile` bileşeni örneği.

```typescript
// user-profile.ts
@Component({
  selector: 'user-profile',
  template: `
    <h1>User profile</h1>
    <p>This is the user profile page</p>
  `,
})
export class UserProfile {
  /* Bileşen kodunuz buraya gelecek */
}
```

`@Component` dekoratörü ayrıca isteğe bağlı olarak şablonunuza uygulamak istediğiniz CSS için bir `styles` özelliğini de kabul eder:

```typescript
// user-profile.ts
@Component({
  selector: 'user-profile',
  template: `
    <h1>User profile</h1>
    <p>This is the user profile page</p>
  `,
  styles: `
    h1 {
      font-size: 3em;
    }
  `,
})
export class UserProfile {
  /* Bileşen kodunuz buraya gelecek */
}
```

### HTML ve CSS'i Ayrı Dosyalara Ayırma

Bir bileşenin HTML ve CSS'ini `templateUrl` ve `styleUrl` kullanarak ayrı dosyalarda tanımlayabilirsiniz:

```typescript
// user-profile.ts
@Component({
  selector: 'user-profile',
  templateUrl: 'user-profile.html',
  styleUrl: 'user-profile.css',
})
export class UserProfile {
  // Bileşen davranışı burada tanımlanır
}
```

```html

<h1>User profile</h1>
<p>This is the user profile page</p>
```

```css
/* user-profile.css */
h1 {
  font-size: 3em;
}
```

## Bileşenleri Kullanma

Birden fazla bileşeni bir araya getirerek bir uygulama oluşturursunuz. Örneğin, bir kullanıcı profili sayfası oluşturuyorsanız, sayfayı şu şekilde birkaç bileşene ayırabilirsiniz:

```mermaid
flowchart TD
    A[UserProfile]-->B
    A-->C
    B[UserBiography]-->D
    C[ProfilePhoto]
    D[UserAddress]
```

Burada `UserProfile` bileşeni, son sayfayı oluşturmak için birkaç başka bileşeni kullanır.

Bir bileşeni içe aktarmak ve kullanmak için şunları yapmanız gerekir:

1. Bileşeninizin TypeScript dosyasında, kullanmak istediğiniz bileşen için bir `import` ifadesi ekleyin.
2. `@Component` dekoratörünüzde, kullanmak istediğiniz bileşen için `imports` dizisine bir giriş ekleyin.
3. Bileşeninizin şablonunda, kullanmak istediğiniz bileşenin seçicisiyle eşleşen bir eleman ekleyin.

İşte bir `ProfilePhoto` bileşenini içe aktaran bir `UserProfile` bileşeni örneği:

```typescript
// user-profile.ts
import {ProfilePhoto} from 'profile-photo.ts';

@Component({
  selector: 'user-profile',
  imports: [ProfilePhoto],
  template: `
    <h1>User profile</h1>
    <profile-photo />
    <p>This is the user profile page</p>
  `,
})
export class UserProfile {
  // Bileşen davranışı burada tanımlanır
}
```

TIP: Angular bileşenleri hakkında daha fazla bilgi edinmek ister misiniz? Tüm ayrıntılar için [Detaylı Bileşenler kılavuzuna](guide/components) bakın.

## Sonraki Adım

Angular'da bileşenlerin nasıl çalıştığını öğrendiğinize göre, uygulamamızda dinamik verileri nasıl ekleyip yöneteceğimizi öğrenmenin zamanı geldi.
# Bileşen seçicileri

TIP: Bu rehber, [Temel Bilgiler Rehberi](essentials)'ni zaten okuduğunuzu varsayar. Angular'da yeniyseniz önce onu okuyun.

Her bileşen, bileşenin nasıl kullanılacağını belirleyen bir [CSS seçici](https://developer.mozilla.org/docs/Web/CSS/CSS_selectors) tanımlar:

```typescript
{highlight: [2]}
@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }
```

_Diğer_ bileşenlerin şablonlarında eşleşen bir HTML elemanı oluşturarak bileşeni kullanırsınız:

```typescript
{highlight: [3]}
@Component({
  template: `
    <profile-photo />
    <button>Upload a new profile photo</button>`,
  ...,
})
export class UserProfile { }
```

**Angular, seçicileri derleme zamanında statik olarak eşleştirir**. DOM'u çalışma zamanında, Angular bağlamaları veya DOM API'leri aracılığıyla değiştirmek, render edilen bileşenleri etkilemez.

**Bir eleman tam olarak bir bileşen seçicisiyle eşleşebilir.** Birden fazla bileşen seçicisi tek bir elemanla eşleşirse, Angular bir hata bildirir.

**Bileşen seçicileri büyük-küçük harf duyarlıdır.**

## Seçici türleri

Angular, bileşen seçicilerinde temel [CSS seçici türlerinin](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) sınırlı bir alt kümesini destekler:

| **Seçici türü** | **Açıklama**                                                                                               | **Örnekler**                  |
| --------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------- |
| Tür seçici      | Elemanları HTML etiket adına veya düğüm adına göre eşleştirir.                                             | `profile-photo`               |
| Nitelik seçici  | Elemanları bir HTML niteliğinin varlığına ve isteğe bağlı olarak o niteliğin tam değerine göre eşleştirir. | `[dropzone]` `[type="reset"]` |
| Sınıf seçici    | Elemanları bir CSS sınıfının varlığına göre eşleştirir.                                                    | `.menu-item`                  |

Nitelik değerleri için Angular, eşittir (`=`) operatörü ile tam nitelik değeri eşleştirmeyi destekler. Angular diğer nitelik değeri operatörlerini desteklemez.

Angular bileşen seçicileri, [nesil birleştirici](https://developer.mozilla.org/docs/Web/CSS/Descendant_combinator) veya [alt birleştirici](https://developer.mozilla.org/docs/Web/CSS/Child_combinator) dahil olmak üzere birleştiricileri desteklemez.

Angular bileşen seçicileri [ad alanlarının](https://developer.mozilla.org/docs/Web/SVG/Namespaces_Crash_Course) belirtilmesini desteklemez.

### `:not` sahte sınıfı

Angular [:not sahte sınıfını](https://developer.mozilla.org/docs/Web/CSS/:not) destekler. Bir bileşenin seçicisinin hangi elemanlarla eşleşeceğini daraltmak için bu sahte sınıfı herhangi bir başka seçiciye ekleyebilirsiniz. Örneğin, bir `[dropzone]` nitelik seçicisi tanımlayabilir ve `textarea` elemanlarının eşleşmesini önleyebilirsiniz:

```typescript
{highlight: [2]}
@Component({
  selector: '[dropzone]:not(textarea)',
  ...
})
export class DropZone { }
```

Angular, bileşen seçicilerinde başka hiçbir sahte sınıf veya sahte eleman desteklemez.

### Seçicileri birleştirme

Birden fazla seçiciyi birleştirerek birleştirebilirsiniz. Örneğin, `type="reset"` belirten `<button>` elemanlarını eşleştirebilirsiniz:

```typescript
{highlight: [2]}
@Component({
  selector: 'button[type="reset"]',
  ...
})
export class ResetButton { }
```

Ayrıca virgüle ayrılmış bir liste ile birden fazla seçici tanımlayabilirsiniz:

```typescript
{highlight: [2]}
@Component({
  selector: 'drop-zone, [dropzone]',
  ...
})
export class DropZone { }
```

Angular, listedeki seçicilerden _herhangi biriyle_ eşleşen her eleman için bir bileşen oluşturur.

## Seçici seçme

Bileşenlerin büyük çoğunluğu, seçicileri olarak özel bir eleman adı kullanmalıdır. Tüm özel eleman adları, [HTML spesifikasyonu](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) tarafından açıklandığı gibi bir tire içermelidir. Varsayılan olarak Angular, mevcut hiçbir bileşen ile eşleşmeyen özel bir etiket adıyla karşılaştığında hata bildirir ve yanlış yazılmış bileşen adlarından kaynaklanan hataları önler.

Yerel özel elemanları Angular şablonlarında kullanma hakkında ayrıntılar için [Gelişmiş bileşen yapılandırması](guide/components/advanced-configuration) belgesine bakın.

### Seçici önekleri

Angular ekibi, projenizde tanımlanan tüm özel bileşenlerin kısa ve tutarlı bir önek kullanmasını önerir. Örneğin, YouTube'u Angular ile yapacak olsanız, bileşenlerinizi `yt-` öneki ile adlandırır, `yt-menu`, `yt-player` gibi bileşenler oluştururdunuz. Seçicilerinizi bu şekilde ad alanı altında toplamak, belirli bir bileşenin nereden geldiğini hemen anlaşılır kılar. Varsayılan olarak Angular CLI `app-` önekini kullanır.

IMPORTANT: Angular kendi framework API'leri için `ng` seçici önekini kullanır. Kendi özel bileşenleriniz için seçici öneki olarak asla `ng` kullanmayın.

### Nitelik seçici ne zaman kullanılır

Standart bir yerel eleman üzerinde bileşen oluşturmak istediğinizde nitelik seçici kullanmayı düşünmelisiniz. Örneğin, özel bir buton bileşeni oluşturmak istiyorsanız, nitelik seçicisi kullanarak standart `<button>` elemanının avantajlarından yararlanabilirsiniz:

```typescript
{highlight: [2]}
@Component({
  selector: 'button[yt-upload]',
   ...
})
export class YouTubeUploadButton { }
```

Bu yaklaşım, bileşenin tüketicilerinin ek çaba harcamadan elemanın tüm standart API'lerini doğrudan kullanmalarına olanak tanır. Bu özellikle `aria-label` gibi ARIA nitelikleri için değerlidir.

Angular, mevcut bir bileşenle eşleşmeyen özel niteliklerle karşılaştığında hata bildirmez. Nitelik seçicileri kullanan bileşenlerde, tüketiciler bileşeni veya NgModule'unu içerir (import) etmeyi unutabilir ve bileşen render edilmeyebilir.
Daha fazla bilgi için [Bileşenleri içeri aktarma ve kullanma](guide/components#component-dekoratöründe-importlar) belgesine bakın.

Nitelik seçicileri tanımlayan bileşenler küçük harf, tire ile ayrılmış nitelikler kullanmalıdır. Yukarıda açıklanan aynı önek önerilerini takip edebilirsiniz.
# Bileşenleri stillendirme

TIP: Bu rehber, [Temel Bilgiler Rehberi](essentials)'ni zaten okuduğunuzu varsayar. Angular'da yeniyseniz önce onu okuyun.

Bileşenlere isteğe bağlı olarak o bileşenin DOM'una uygulanan CSS stilleri dahil edilebilir:

```typescript
{highlight:[4]}
@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
  styles: `
    img {
      border-radius: 50%;
    }
  `,
})
export class ProfilePhoto {}
```

Stillerinizi ayrı dosyalarda yazmayı da seçebilirsiniz:

```typescript
{highlight:[4]}
@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto {}
```

Angular bileşeninizi derlediğinde, bu stiller bileşeninizin JavaScript çıktısıyla birlikte yayılır. Bu, bileşen stillerinin JavaScript modül sistemine katıldığı anlamına gelir. Bir Angular bileşeni render ettiğinizde, bir bileşeni tembel yüklerken bile framework otomatik olarak ilişkili stilleri dahil eder.

Angular, CSS çıktısı üreten herhangi bir araçla çalışır; bunlara [Sass](https://sass-lang.com), [Less](https://lesscss.org) ve [Stylus](https://stylus-lang.com) dahildir.

## Stil kapsamı

Her bileşen, framework'ün bileşenin stillerini nasıl kapsülleyeceğini belirleyen bir **görünüm kapsüllemesi** ayarına sahiptir. Dört görünüm kapsüllemesi modu vardır: `Emulated`, `ShadowDom`, `ExperimentalIsolatedShadowDom` ve `None`.
Modu `@Component` dekoratöründe belirtebilirsiniz:

```typescript
{highlight:[3]}
@Component({
  ...,
  encapsulation: ViewEncapsulation.None,
})
export class ProfilePhoto { }
```

### ViewEncapsulation.Emulated

Varsayılan olarak Angular, bir bileşenin stillerinin yalnızca o bileşenin şablonunda tanımlanan elemanlara uygulanması için emüle edilmiş kapsülleme kullanır. Bu modda framework, her bileşen örneği için benzersiz bir HTML niteliği oluşturur, bu niteliği bileşenin şablonundaki elemanlara ekler ve bu niteliği bileşeninizin stillerinde tanımlanan CSS seçicilerine ekler.

Bu mod, bir bileşenin stillerinin dışarı sızmasını ve diğer bileşenleri etkilemesini önler. Ancak, bir bileşenin dışında tanımlanan genel stiller, emüle edilmiş kapsüllemeye sahip bir bileşenin içerisindeki elemanları yine de etkileyebilir.

Emüle edilmiş modda Angular, [`:host`](https://developer.mozilla.org/docs/Web/CSS/:host) sahte sınıfını destekler. [`:host-context()`](https://developer.mozilla.org/docs/Web/CSS/:host-context) sahte sınıfı modern tarayıcılarda kullanımdan kaldırılmış olsa da, Angular'ın derleyicisi buna tam destek sağlar. Her iki sahte sınıf da yerel [Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)'a bağlı olmadan kullanılabilir. Derleme sırasında framework, bu sahte sınıfları niteliklere dönüştürür, dolayısıyla çalışma zamanında bu yerel sahte sınıfların kurallarına (örneğin tarayıcı uyumluluğu, özgüllük) uymaz. Angular'ın emüle edilmiş kapsülleme modu, `::shadow` veya `::part` gibi Shadow DOM ile ilgili diğer sahte sınıfları desteklemez.

#### `::ng-deep`

Angular'ın emüle edilmiş kapsülleme modu özel bir sahte sınıf olan `::ng-deep`'i destekler.
**Angular ekibi `::ng-deep`'in yeni kullanımını kesinlikle tavsiye etmez.** Bu API'ler yalnızca geriye dönük uyumluluk için mevcuttur.

Bir seçici `::ng-deep` içerdiğinde, Angular seçicideki o noktadan sonra görünüm kapsülleme sınırlarını uygulamayı durdurur. `::ng-deep`'i izleyen seçicinin herhangi bir bölümü, bileşenin şablonu dışındaki elemanlarla eşleşebilir.

Örneğin:

- `p a` gibi bir CSS kural seçicisi, emüle edilmiş kapsülleme ile, bileşenin kendi şablonundaki bir `<p>` elemanının alt elemanları olan `<a>` elemanlarını eşleştirir, her ikisi de bileşenin kendi şablonu içerisindedir.

- `::ng-deep p a` gibi bir seçici, uygulamadaki herhangi bir yerdeki bir `<p>` elemanının alt elemanları olan `<a>` elemanlarını eşleştirir.

Bu, etkili bir şekilde genel bir stil gibi davranmasını sağlar.

- `p ::ng-deep a` ifadesinde, Angular `<p>` elemanının bileşenin kendi şablonundan gelmesini gerektirir, ancak `<a>` elemanı uygulamadaki herhangi bir yerde olabilir.

Dolayısıyla, `<a>` elemanı bileşenin şablonunda veya yansıtılan ya da alt içeriğinin herhangi birinde olabilir.

- `:host ::ng-deep p a` ifadesinde, hem `<a>` hem de `<p>` elemanları bileşenin host elemanının alt elemanları olmalıdır.

Bileşenin şablonundan veya alt bileşenlerinin görünümlerinden gelebilirler, ancak uygulamanın başka bir yerinden gelemezler.

### ViewEncapsulation.ShadowDom

Bu mod, [web standartı Shadow DOM API](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM)'sini kullanarak bir bileşen içindeki stilleri kapsüller. Bu mod etkinleştirildiğinde Angular, bileşenin host elemanına bir gölge kökü (shadow root) ekler ve bileşenin şablonunu ve stillerini karşılık gelen gölge ağacına render eder.

Gölge ağacının içindeki stiller, o gölge ağacının dışındaki elemanları etkileyemez.

Ancak `ShadowDom` kapsüllemesini etkinleştirmek, stil kapsülemesinden daha fazlasını etkiler. Bileşeni bir gölge ağacında render etmek, olay yayılımını, [`<slot>` API](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots)'si ile etkileşimi ve tarayıcı geliştirici araçlarının elemanları nasıl gösterdiğini etkiler. Uygulamanızda Shadow DOM kullanmanın tüm sonuçlarını her zaman anlayın ve bu seçeneği etkinleştirmeden önce bilin.

### ViewEncapsulation.ExperimentalIsolatedShadowDom

Yukarıdakiyle aynı şekilde davranır, ancak bu mod yalnızca o bileşenin stillerinin bileşenin şablonundaki elemanlara uygulanacağını kesinlikle garanti eder. Genel stiller gölge ağacındaki elemanları etkileyemez ve gölge ağacının içindeki stiller o gölge ağacının dışındaki elemanları etkileyemez.

### ViewEncapsulation.None

Bu mod, bileşen için tüm stil kapsüllemesini devre dışı bırakır. Bileşen ile ilişkili herhangi bir stil, genel stiller gibi davranır.

NOTE: `Emulated` ve `ShadowDom` modlarında Angular, bileşenizin stillerinin bileşenin dışındaki stilleri her zaman geçersiz kılacağını %100 garanti etmez. Çakışma durumunda bu stillerin bileşeninizin stilleriyle aynı özgüllüğe sahip olduğu varsayılır.

## Şablonlarda stil tanımlama

Ek stiller tanımlamak için bileşenin şablonunda `<style>` elemanını kullanabilirsiniz. Bileşenin görünüm kapsülleme modu, bu şekilde tanımlanan stillere de uygulanır.

Angular, stil elemanları içerisindeki bağlamaları desteklemez.

## Harici stil dosyalarına referans verme

Bileşen şablonları, CSS dosyalarına referans vermek için [`<link>` elemanı](https://developer.mozilla.org/docs/Web/HTML/Element/link)'nı kullanabilir. Ek olarak, CSS'iniz CSS dosyalarına referans vermek için [`@import` at-kuralı](https://developer.mozilla.org/docs/Web/CSS/@import)'nı kullanabilir. Angular bu referansları _harici_ stiller olarak değerlendirir. Harici stiller, emüle edilmiş görünüm kapsüllemesinden etkilenmez.
# Girdi özellikleri ile veri kabul etme

TIP: Bu rehber, [Temel Bilgiler Rehberi](essentials)'ni zaten okuduğunuzu varsayar. Angular'da yeniyseniz önce onu okuyun.

TIP: Diğer web framework'lerine aşina iseniz, girdi özellikleri _props_ ile benzerdir.

Bir bileşen kullandığınızda, ona genellikle bazı veriler iletmek istersiniz. Bir bileşen, kabul ettiği verileri **girdiler** bildirerek belirtir:

```ts
{highlight:[8]}
import {Component, input} from '@angular/core';

@Component({
  /*...*/
})
export class CustomSlider {
  // 'value' adında, varsayılan değeri sıfır olan bir girdi bildirin.
  value = input(0);
}
```

Bu, özelliği bir şablonda bağlayabilmenizi sağlar:

```html
<custom-slider [value]="50" />
```

Bir girdinin varsayılan değeri varsa, TypeScript türü varsayılan değerden çıkarır:

```ts
@Component({
  /*...*/
})
export class CustomSlider {
  // TypeScript bu girdinin bir number olduğunu çıkarır, InputSignal<number> döndürür.
  value = input(0);
}
```

Fonksiyona bir generic parametre belirterek girdi için açıkça bir tür bildirebilirsiniz.

Varsayılan değeri olmayan bir girdi ayarlanmazsa, değeri `undefined` olur:

```ts
@Component({
  /*...*/
})
export class CustomSlider {
  // `value` ayarlanmayabileceği için InputSignal<number | undefined> üretir.
  value = input<number>();
}
```

**Angular girdileri derleme zamanında statik olarak kaydeder**. Girdiler çalışma zamanında eklenemez veya kaldırılamaz.

`input` fonksiyonu Angular derleyicisi için özel bir anlam taşır. **`input` fonksiyonunu yalnızca bileşen ve direktif özellik başlangıç değerlerinde çağırabilirsiniz.**

Bir bileşen sınıfını genişletirken, **girdiler alt sınıf tarafından miras alınır.**

**Girdi adları büyük-küçük harf duyarlıdır.**

## Girdileri okuma

`input` fonksiyonu bir `InputSignal` döndürür. Sinyali çağırarak değeri okuyabilirsiniz:

```ts
{highlight:[11]}
import {Component, input, computed} from '@angular/core';

@Component({
  /*...*/
})
export class CustomSlider {
  // 'value' adında, varsayılan değeri sıfır olan bir girdi bildirin.
  value = input(0);

// value girdisini okuyan bir computed ifadesi oluşturun
  label = computed(() => `The slider's value is ${this.value()}`);
}
```

`input` fonksiyonu tarafından oluşturulan sinyaller salt okunurdur.

## Zorunlu girdiler

`input` yerine `input.required` çağırarak bir girdinin `required` (zorunlu) olduğunu bildirebilirsiniz:

```ts
{highlight:[6]}
@Component({
  /*...*/
})
export class CustomSlider {
  // 'value' adında zorunlu bir girdi bildirin. `InputSignal<number>` döndürür.
  value = input.required<number>();
}
```

Angular, bileşen bir şablonda kullanıldığında zorunlu girdilerin _mutlaka_ ayarlanmış olmasını zorunlu kılar. Tüm zorunlu girdilerini belirtmeden bir bileşen kullanmaya çalışırsanız, Angular derleme zamanında bir hata bildirir.

Zorunlu girdiler, döndürülen `InputSignal`'in generic parametresine otomatik olarak `undefined` eklemez.

## Girdileri yapılandırma

`input` fonksiyonu, girdinin çalışma şeklini değiştirmenize olanak tanıyan ikinci bir parametre olarak bir yapılandırma nesnesi kabul eder.

### Girdi dönüşümleri

Angular tarafından ayarlandığında girdinin değerini değiştirmek için bir `transform` fonksiyonu belirtebilirsiniz.

```ts
{highlight:[6]}
@Component({
  selector: 'custom-slider',
  /*...*/
})
export class CustomSlider {
  label = input('', {transform: trimString});
}

function trimString(value: string | undefined): string {
  return value?.trim() ?? '';
}
```

```html
<custom-slider [label]="systemVolume" />
```

Yukarıdaki örnekte, `systemVolume` değeri her değiştiğinde Angular `trimString` fonksiyonunu çalıştırır ve `label`'ı sonuca ayarlar.

Girdi dönüşümlerinin en yaygın kullanım alanı, şablonlarda genellikle `null` ve `undefined` dahil olmak üzere daha geniş bir değer türleri aralığı kabul etmektir.

**Girdi dönüşüm fonksiyonu derleme zamanında statik olarak analiz edilebilir olmalıdır.** Dönüşüm fonksiyonlarını koşullu olarak veya bir ifade değerlendirmesinin sonucu olarak ayarlayamazsınız.

**Girdi dönüşüm fonksiyonları her zaman [saf fonksiyonlar](https://en.wikipedia.org/wiki/Pure_function) olmalıdır.** Dönüşüm fonksiyonu dışındaki duruma güvenme, önceden tahmin edilemeyen davranışlara yol açabilir.

#### Tür denetimi

Bir girdi dönüşümü belirttiğinizde, dönüşüm fonksiyonunun parametre türü, şablonda girdiye ayarlanabilecek değer türlerini belirler.

```ts
@Component({
  /*...*/
})
export class CustomSlider {
  widthPx = input('', {transform: appendPx});
}

function appendPx(value: number): string {
  return `${value}px`;
}
```

Yukarıdaki örnekte, `widthPx` girdisi bir `number` kabul ederken `InputSignal` özelliği bir `string` döndürür.

#### Yerleşik dönüşümler

Angular, en yaygın iki senaryo için iki yerleşik dönüşüm fonksiyonu içerir: değerleri boolean ve sayıya zorlama.

```ts
import {Component, input, booleanAttribute, numberAttribute} from '@angular/core';

@Component({
  /*...*/
})
export class CustomSlider {
  disabled = input(false, {transform: booleanAttribute});
  value = input(0, {transform: numberAttribute});
}
```

`booleanAttribute`, standart HTML [boolean nitelikleri](https://developer.mozilla.org/docs/Glossary/Boolean/HTML)'nin davranışını taklit eder; niteliğin _varlığı_ "true" değerini gösterir. Ancak Angular'ın `booleanAttribute`'u, `"false"` literal dizesini boolean `false` olarak değerlendirir.

`numberAttribute`, verilen değeri bir sayıya ayrıştırmayı dener, ayrıştırma başarısız olursa `NaN` üretir.

### Girdi takma adları

Şablonlarda bir girdinin adını değiştirmek için `alias` seçeneğini belirtebilirsiniz.

```ts
{highlight:[5]}
@Component({
  /*...*/
})
export class CustomSlider {
  value = input(0, {alias: 'sliderValue'});
}
```

```html
<custom-slider [sliderValue]="50" />
```

Bu takma ad, özelliğin TypeScript kodundaki kullanımını etkilemez.

Bileşen girdileri için takma ad kullanmaktan genel olarak kaçınmanız gerekirken, bu özellik özellikleri yeniden adlandırırken orijinal ad için bir takma ad korumak veya yerel DOM eleman özellikleriyle ad çakışmalarını önlemek için yararlı olabilir.

## Model input'lar

**Model girdileri**, bir bileşenin yeni değerleri üst bileşenine geri yaymasını sağlayan özel bir girdi türüdür.

Bir bileşen oluşturulurken, standart bir girdi oluşturur gibi bir model girdisi tanımlayabilirsiniz.

Her iki girdi türü de birinin özelliğe bir değer bağlamasına izin verir. Ancak, **model girdileri bileşen yazarının özelliğe değer yazmasına izin verir**. Özellik iki yönlü bağlama ile bağlanmışsa, yeni değer o bağlamaya yayılır.

```ts
@Component({
  /* ... */
})
export class CustomSlider {
  // "value" adında bir model girdisi tanımlayın.
  value = model(0);

increment() {
    // Model girdisini yeni bir değerle güncelleyin, değeri tüm bağlamalara yayın.
    this.value.update((oldValue) => oldValue + 10);
  }
}

@Component({
  /* ... */
  // İki yönlü bağlama sözdizimi kullanmak, slider'ın değerindeki
  // herhangi bir değişikliğin otomatik olarak `volume` sinyaline
  // geri yayılması anlamına gelir.
  // Bu bağlamanın sinyal *örneğini* kullandığına, sinyal değerini değil, dikkat edin.
  template: `<custom-slider [(value)]="volume" />`,
})
export class MediaControls {
  // `volume` yerel durumu için yazılabilir bir sinyal oluşturun.
  volume = signal(0);
}
```

Yukarıdaki örnekte, `CustomSlider` kendi `value` model girdisine değer yazabilir ve bu değerler `MediaControls`'daki `volume` sinyaline geri yayılır. Bu bağlama, `value` ve `volume` değerlerini senkronize tutar. Bağlama işleminin sinyal _örneğini_ ilettiğine, sinyalin _değerini_ değil, dikkat edin.

Diğer açılardan, model girdileri standart girdilere benzer şekilde çalışır. `computed` ve `effect` gibi [reaktif bağlamlar](guide/signals#reactive-contextler) dahil olmak üzere sinyal fonksiyonunu çağırarak değeri okuyabilirsiniz.

Şablonlarda iki yönlü bağlama hakkında daha fazla bilgi için [İki yönlü bağlama](guide/templates/two-way-binding) belgesine bakın.

### Düz özelliklerle iki yönlü bağlama

Düz bir JavaScript özelliğini bir model girdisine bağlayabilirsiniz.

```typescript
@Component({
  /* ... */
  // `value` bir model girdisidir.
  // Köşeli parantez içinde parantez sözdizimi (diğer adıyla "banana-in-a-box") iki yönlü bağlama oluşturur
  template: '<custom-slider [(value)]="volume" />',
})
export class MediaControls {
  protected volume = 0;
}
```

Yukarıdaki örnekte, `CustomSlider` kendi `value` model girdisine değer yazabilir ve bu değerler `MediaControls`'daki `volume` özelliğine geri yayılır. Bu bağlama, `value` ve `volume` değerlerini senkronize tutar.

### Örtük `change` olayları

Bir bileşen veya direktifte model girdisi bildirdiğinizde, Angular otomatik olarak o model için karşılık gelen bir [çıktı](guide/components/outputs) oluşturur. Çıktının adı, model girdisinin adının sonuna "Change" eklenmesiyle oluşur.

```ts
@Directive({
  /* ... */
})
export class CustomCheckbox {
  // Bu otomatik olarak "checkedChange" adında bir çıktı oluşturur.
  // Şablonda `(checkedChange)="handler()"` ile abone olunabilir.
  checked = model(false);
}
```

Angular, model girdisinin `set` veya `update` yöntemlerini çağırarak yeni bir değer yazdığınızda bu değişiklik olayını yayar.

Çıktılar hakkında daha fazla ayrıntı için [Çıktılarla özel olaylar](guide/components/outputs) belgesine bakın.

### Model input'ları özelleştirme

Bir model girdisini zorunlu olarak işaretleyebilir veya [standart bir girdi](guide/components/inputs) ile aynı şekilde bir takma ad sağlayabilirsiniz.

Model girdileri girdi dönüşümlerini desteklemez.

### Model input'ları ne zaman kullanılır

Bir bileşenin iki yönlü bağlamayı desteklemesini istediğinizde model girdilerini kullanın. Bu, genellikle bir bileşenin kullanıcı etkileşimine dayalı olarak bir değeri değiştirmek için var olduğu durumlarda uygundur. En yaygın olarak, tarih seçici veya combobox gibi özel form kontrolleri birincil değerleri için model girdileri kullanmalıdır.

## Girdi adlarını seçme

DOM elemanlarının HTMLElement üzerindeki özellikleriyle çakışan girdi adları seçmekten kaçının. Ad çakışmaları, bağlı özelliğin bileşene mi yoksa DOM elemanına mı ait olduğu konusunda kafa karışıklığına neden olur.

Bileşen girdileri için, bileşen seçicilerinde yaptığınız gibi önek eklemekten kaçının. Belirli bir eleman yalnızca bir bileşen barındırabilceği için, herhangi bir özel özelliğin bileşene ait olduğu varsayılabilir.

## `@Input` dekoratörü ile girdi bildirme

TIP: Angular ekibi yeni projeler için sinyal tabanlı `input` fonksiyonunu önerse de, orijinal dekoratör tabanlı `@Input` API'si tamamen desteklenmeye devam etmektedir.

Alternatif olarak, bir özelliğe `@Input` dekoratörü ekleyerek bileşen girdileri bildirebilirsiniz:

```ts
{highlight:[5]}
@Component({
  /*...*/
})
export class CustomSlider {
  @Input() value = 0;
}
```

Bir girdiye bağlama, hem sinyal tabanlı hem de dekoratör tabanlı girdilerde aynıdır:

```html
<custom-slider [value]="50" />
```

### Dekoratör tabanlı girdileri özelleştirme

`@Input` dekoratörü, girdinin çalışma şeklini değiştirmenize olanak tanıyan bir yapılandırma nesnesi kabul eder.

#### Zorunlu girdiler

Belirli bir girdinin her zaman bir değere sahip olmasını zorunlu kılmak için `required` seçeneğini belirtebilirsiniz.

```ts
{highlight:[5]}
@Component({
  /*...*/
})
export class CustomSlider {
  @Input({required: true}) value = 0;
}
```

Tüm zorunlu girdilerini belirtmeden bir bileşen kullanmaya çalışırsanız, Angular derleme zamanında bir hata bildirir.

#### Girdi dönüşümleri

Angular tarafından ayarlandığında girdinin değerini değiştirmek için bir `transform` fonksiyonu belirtebilirsiniz. Bu dönüşüm fonksiyonu, yukarıda açıklanan sinyal tabanlı girdilerin dönüşüm fonksiyonlarıyla aynı şekilde çalışır.

```ts
{highlight:[6]}
@Component({
  selector: 'custom-slider',
  ...
})
export class CustomSlider {
  @Input({transform: trimString}) label = '';
}

function trimString(value: string | undefined) {
  return value?.trim() ?? '';
}
```

#### Girdi takma adları

Şablonlarda bir girdinin adını değiştirmek için `alias` seçeneğini belirtebilirsiniz.

```ts
{highlight:[5]}
@Component({
  /*...*/
})
export class CustomSlider {
  @Input({alias: 'sliderValue'}) value = 0;
}
```

```html
<custom-slider [sliderValue]="50" />
```

`@Input` dekoratörü ayrıca yapılandırma nesnesi yerine ilk parametresi olarak takma adı kabul eder.

Girdi takma adları, yukarıda açıklanan sinyal tabanlı girdilerle aynı şekilde çalışır.

### Getter ve setter'lar ile girdiler

Dekoratör tabanlı girdiler kullanıldığında, getter ve setter ile uygulanan bir özellik bir girdi olabilir:

```ts
export class CustomSlider {
  @Input()
  get value(): number {
    return this.internalValue;
  }

set value(newValue: number) {
    this.internalValue = newValue;
  }

private internalValue = 0;
}
```

Yalnızca bir public setter tanımlayarak _salt yazılır_ bir girdi bile oluşturabilirsiniz:

```ts
export class CustomSlider {
  @Input()
  set value(newValue: number) {
    this.internalValue = newValue;
  }

private internalValue = 0;
}
```

**Mümkün olduğunda getter ve setter'lar yerine girdi dönüşümlerini kullanmayı tercih edin.**

Karmaşık veya maliyetli getter ve setter'lardan kaçının. Angular bir girdinin setter'ını birden fazla kez çağırabilir, bu da setter DOM manipülasyonu gibi maliyetli işlemler gerçekleştiriyorsa uygulama performansını olumsuz etkileyebilir.

## `@Component` dekoratöründe girdileri belirtme

`@Input` dekoratörüne ek olarak, bir bileşenin girdilerini `@Component` dekoratöründeki `inputs` özelliği ile de belirtebilirsiniz. Bu, bir bileşen bir temel sınıftan özellik miras aldığında yararlı olabilir:

```ts
{highlight:[4]}
// `CustomSlider`, `BaseSlider`'dan `disabled` özelliğini miras alır.
@Component({
  ...,
  inputs: ['disabled'],
})
export class CustomSlider extends BaseSlider { }
```

Dizede iki noktadan sonra takma adı belirterek `inputs` listesinde ek olarak bir girdi takma adı belirtebilirsiniz:

```ts
{highlight:[4]}
// `CustomSlider`, `BaseSlider`'dan `disabled` özelliğini miras alır.
@Component({
  ...,
  inputs: ['disabled: sliderDisabled'],
})
export class CustomSlider extends BaseSlider { }
```
# Output'larla özel olaylar

TIP: Bu rehber, [Temel Bilgiler Rehberi](essentials)'ni zaten okuduğunuzu varsayar. Angular'da yeniyseniz önce onu okuyun.

Angular bileşenleri, bir özelliği `output` fonksiyonuna atayarak özel olaylar tanımlayabilir:

```ts
{highlight:[3]}
@Component({
  /*...*/
})
export class ExpandablePanel {
  panelClosed = output<void>();
}
```

```html
<expandable-panel (panelClosed)="savePanelState()" />
```

`output` fonksiyonu bir `OutputEmitterRef` döndürür. `OutputEmitterRef` üzerinde `emit` yöntemini çağırarak bir olay yayabilirsiniz:

```ts
this.panelClosed.emit();
```

Angular, `output` fonksiyonu ile başlatılan özellikleri **çıktılar** olarak adlandırır. `click` gibi yerel tarayıcı olaylarına benzer şekilde özel olaylar oluşturmak için çıktıları kullanabilirsiniz.

**Angular özel olayları DOM'da yukarı doğru kabarcıklanmaz (bubble).**

**Çıktı adları büyük-küçük harf duyarlıdır.**

Bir bileşen sınıfını genişletirken, **çıktılar alt sınıf tarafından miras alınır.**

`output` fonksiyonu Angular derleyicisi için özel bir anlam taşır. **`output` fonksiyonunu yalnızca bileşen ve direktif özellik başlangıç değerlerinde çağırabilirsiniz.**

## Olay verisi yayma

`emit` çağırırken olay verisi iletebilirsiniz:

```ts
// İlkel değerler yayabilirsiniz.
this.valueChanged.emit(7);

// Özel olay nesneleri yayabilirsiniz
this.thumbDropped.emit({
  pointerX: 123,
  pointerY: 456,
});
```

Bir şablonda olay dinleyicisi tanımlarken, olay verilerine `$event` değişkeninden erişebilirsiniz:

```html
<custom-slider (valueChanged)="logValue($event)" />
```

Üst bileşende olay verisini alın:

```ts
@Component({
 /*...*/
})
export class App {
  logValue(value: number) {
    ...
  }
}

```

## Çıktı adlarını özelleştirme

`output` fonksiyonu, şablonda olay için farklı bir ad belirtmenize olanak tanıyan bir parametre kabul eder:

```ts
@Component({
  /*...*/
})
export class CustomSlider {
  changed = output({alias: 'valueChanged'});
}
```

```html
<custom-slider (valueChanged)="saveVolume()" />
```

Bu takma ad, özelliğin TypeScript kodundaki kullanımını etkilemez.

Bileşen çıktıları için takma ad kullanmaktan genel olarak kaçınmanız gerekirken, bu özellik özellikleri yeniden adlandırırken orijinal ad için bir takma ad korumak veya yerel DOM olaylarıyla ad çakışmalarını önlemek için yararlı olabilir.

## Output'lara programatik olarak abone olma

Bir bileşeni dinamik olarak oluşturduğunuzda, bileşen örneğinden çıktı olaylarına programatik olarak abone olabilirsiniz. `OutputRef` türü bir `subscribe` yöntemi içerir:

```ts
const someComponentRef: ComponentRef<SomeComponent> = viewContainerRef.createComponent(/*...*/);

someComponentRef.instance.someEventProperty.subscribe((eventData) => {
  console.log(eventData);
});
```

Angular, aboneleri olan bileşenleri yok ettiğinde olay aboneliklerini otomatik olarak temizler. Alternatif olarak, bir olaydan manuel olarak aboneliği iptal edebilirsiniz. `subscribe` fonksiyonu bir `unsubscribe` yöntemi olan bir `OutputRefSubscription` döndürür:

```ts
const eventSubscription = someComponent.someEventProperty.subscribe((eventData) => {
  console.log(eventData);
});

// ...

eventSubscription.unsubscribe();
```

## Olay adlarını seçme

DOM elemanlarının HTMLElement üzerindeki olaylarıyla çakışan çıktı adları seçmekten kaçının. Ad çakışmaları, bağlı özelliğin bileşene mi yoksa DOM elemanına mı ait olduğu konusunda kafa karışıklığına neden olur.

Bileşen çıktıları için, bileşen seçicilerinde yaptığınız gibi önek eklemekten kaçının. Belirli bir eleman yalnızca bir bileşen barındırabilceği için, herhangi bir özel özelliğin bileşene ait olduğu varsayılabilir.

Çıktı adları için her zaman [camelCase](https://en.wikipedia.org/wiki/Camel_case) kullanın. Çıktı adlarına "on" öneki eklemeyin.

## RxJS ile output'ları kullanma

Çıktılar ve RxJS arasındaki birlikte çalışabilirlik hakkında ayrıntılar için [Bileşen ve direktif çıktılarıyla RxJS birlikte çalışabilirliği](ecosystem/rxjs-interop/output-interop) belgesine bakın.

## `@Output` dekoratörü ile çıktı bildirme

TIP: Angular ekibi yeni projeler için `output` fonksiyonunu önerse de, orijinal dekoratör tabanlı `@Output` API'si tamamen desteklenmeye devam etmektedir.

Alternatif olarak, bir özelliği yeni bir `EventEmitter`'a atayarak ve `@Output` dekoratörü ekleyerek özel olaylar tanımlayabilirsiniz:

```ts
@Component({
  /*...*/
})
export class ExpandablePanel {
  @Output() panelClosed = new EventEmitter<void>();
}
```

`EventEmitter` üzerinde `emit` yöntemini çağırarak bir olay yayabilirsiniz.

### `@Output` dekoratörü ile takma adlar

`@Output` dekoratörü, şablonda olay için farklı bir ad belirtmenize olanak tanıyan bir parametre kabul eder:

```ts
@Component({
  /*...*/
})
export class CustomSlider {
  @Output('valueChanged') changed = new EventEmitter<number>();
}
```

```html
<custom-slider (valueChanged)="saveVolume()" />
```

Bu takma ad, özelliğin TypeScript kodundaki kullanımını etkilemez.

## `@Component` dekoratöründe çıktıları belirtme

`@Output` dekoratörüne ek olarak, bir bileşenin çıktılarını `@Component` dekoratöründeki `outputs` özelliği ile de belirtebilirsiniz. Bu, bir bileşen bir temel sınıftan özellik miras aldığında yararlı olabilir:

```ts
// `CustomSlider`, `BaseSlider`'dan `valueChanged` özelliğini miras alır.
@Component({
  /*...*/
  outputs: ['valueChanged'],
})
export class CustomSlider extends BaseSlider {}
```

Dizede iki noktadan sonra takma adı belirterek `outputs` listesinde ek olarak bir çıktı takma adı belirtebilirsiniz:

```ts
// `CustomSlider`, `BaseSlider`'dan `valueChanged` özelliğini miras alır.
@Component({
  /*...*/
  outputs: ['valueChanged: volumeChanged'],
})
export class CustomSlider extends BaseSlider {}
```
# ng-content ile içerik yansıtma

TIP: Bu rehber, [Temel Bilgiler Rehberi](essentials)'ni zaten okuduğunuzu varsayar. Angular'da yeniyseniz önce onu okuyun.

Farklı içerik türleri için kapsayıcı görevi gören bileşenlere sıklıkla ihtiyaç duyarsınız. Örneğin, özel bir kart bileşeni oluşturmak isteyebilirsiniz:

```typescript
@Component({
  selector: 'custom-card',
  template: '<div class="card-shadow">  </div>',
})
export class CustomCard {
  /* ... */
}
```

**İçeriğin nereye yerleştirileceğini belirtmek için `<ng-content>` elemanını yer tutucu olarak kullanabilirsiniz**:

```typescript
@Component({
  selector: 'custom-card',
  template: '<div class="card-shadow"> <ng-content/> </div>',
})
export class CustomCard {
  /* ... */
}
```

TIP: `<ng-content>`, [yerel `<slot>` elemanı](https://developer.mozilla.org/docs/Web/HTML/Element/slot) ile benzer şekilde çalışır, ancak bazı Angular'a özgü işlevselliklerle birlikte.

`<ng-content>` içeren bir bileşen kullandığınızda, bileşen host elemanının tüm alt elemanları o `<ng-content>` konumunda render edilir veya **yansıtılır** (project):

```typescript
// Bileşen kaynağı
@Component({
  selector: 'custom-card',
  template: `
    <div class="card-shadow">
      <ng-content />
    </div>
  `,
})
export class CustomCard {
  /* ... */
}
```

```html

<custom-card>
  <p>This is the projected content</p>
</custom-card>
```

```html

<custom-card>
  <div class="card-shadow">
    <p>This is the projected content</p>
  </div>
</custom-card>
```

Angular, bu şekilde iletilen bir bileşenin tüm alt elemanlarını o bileşenin **içeriği** olarak adlandırır. Bu, bileşenin şablonunda tanımlanan elemanlara karşılık gelen bileşenin **görünümü**nden (view) farklıdır.

**`<ng-content>` elemanı ne bir bileşen ne de bir DOM elemanıdır**. Bunun yerine, Angular'a içeriği nerede render edeceğini söyleyen özel bir yer tutucudur. Angular'ın derleyicisi tüm `<ng-content>` elemanlarını derleme zamanında işler. `<ng-content>` elemanını çalışma zamanında ekleyemez, kaldıramazsınız veya değiştiremezsiniz. `<ng-content>` üzerine direktifler, stiller veya rastgele nitelikler ekleyemezsiniz.

IMPORTANT: `<ng-content>` elemanını `@if`, `@for` veya `@switch` ile koşullu olarak dahil etmemelisiniz. Angular, `<ng-content>` yer tutucusu gizli olsa bile, o yer tutucuya render edilen içerik için her zaman DOM düğümlerini oluşturur ve başlatır. Bileşen içeriğinin koşullu render edilmesi için [Şablon parçaları](api/core/ng-template) belgesine bakın.

## Birden fazla içerik yer tutucusu

Angular, CSS seçicisine dayalı olarak farklı `<ng-content>` yer tutucularına farklı elemanların yansıtılmasını destekler. Yukarıdaki kart örneğini genişleterek, `select` niteliği kullanarak kart başlığı ve kart gövdesi için iki yer tutucu oluşturabilirsiniz:

```typescript
@Component({
  selector: 'card-title',
  template: `<ng-content>card-title</ng-content>`,
})
export class CardTitle {}

@Component({
  selector: 'card-body',
  template: `<ng-content>card-body</ng-content>`,
})
export class CardBody {}
```

```typescript

@Component({
  selector: 'custom-card',
  template: `
  <div class="card-shadow">
    <ng-content select="card-title"></ng-content>
    <div class="card-divider"></div>
    <ng-content select="card-body"></ng-content>
  </div>
  `,
})
export class CustomCard {}
```

```typescript

@Component({
  selector: 'app-root',
  imports: [CustomCard, CardTitle, CardBody],
  template: `
    <custom-card>
      <card-title>Hello</card-title>
      <card-body>Welcome to the example</card-body>
    </custom-card>
`,
})
export class App {}
```

```html

<custom-card>
  <div class="card-shadow">
    <card-title>Hello</card-title>
    <div class="card-divider"></div>
    <card-body>Welcome to the example</card-body>
  </div>
</custom-card>
```

`<ng-content>` yer tutucusu, [bileşen seçicileri](guide/components/selectors) ile aynı CSS seçicilerini destekler.

`select` niteliği olan bir veya daha fazla `<ng-content>` yer tutucusu ve `select` niteliği olmayan bir `<ng-content>` yer tutucusu eklerseniz, ikincisi herhangi bir `select` niteliği ile eşleşmeyen tüm elemanları yakalar:

```html

<div class="card-shadow">
  <ng-content select="card-title"></ng-content>
  <div class="card-divider"></div>
  
  <ng-content></ng-content>
</div>
```

```html

<custom-card>
  <card-title>Hello</card-title>
  <img src="..." />
  <p>Welcome to the example</p>
</custom-card>
```

```html

<custom-card>
  <div class="card-shadow">
    <card-title>Hello</card-title>
    <div class="card-divider"></div>
    <img src="..." />
    <p>Welcome to the example</p>
  </div>
</custom-card>
```

Bir bileşen, `select` niteliği olmayan bir `<ng-content>` yer tutucusu içermiyorsa, bileşenin yer tutucularıyla eşleşmeyen elemanlar DOM'a render edilmez.

## Yedek içerik

Angular, bir bileşenin `<ng-content>` yer tutucusu için eşleşen alt içerik yoksa _yedek içerik_ gösterebilir. `<ng-content>` elemanının kendisine alt içerik ekleyerek yedek içerik belirtebilirsiniz.

```html

<div class="card-shadow">
  <ng-content select="card-title">Default Title</ng-content>
  <div class="card-divider"></div>
  <ng-content select="card-body">Default Body</ng-content>
</div>
```

```html

<custom-card>
  <card-title>Hello</card-title>
  
</custom-card>
```

```html

<custom-card>
  <div class="card-shadow">
    <card-title>Hello</card-title>
    <div class="card-divider"></div>
    Default Body
  </div>
</custom-card>
```

## Yansıtma için içerik takma adı verme

Angular, herhangi bir eleman üzerinde bir CSS seçici belirtmenize olanak tanıyan özel bir `ngProjectAs` niteliği destekler. `ngProjectAs` niteliği olan bir eleman `<ng-content>` yer tutucusuyla kontrol edildiğinde, Angular elemanın kimliği yerine `ngProjectAs` değerini karşılaştırır:

```html

<div class="card-shadow">
  <ng-content select="card-title"></ng-content>
  <div class="card-divider"></div>
  <ng-content />
</div>
```

```html

<custom-card>
  <h3 ngProjectAs="card-title">Hello</h3>

<p>Welcome to the example</p>
</custom-card>
```

```html

<custom-card>
  <div class="card-shadow">
    <h3>Hello</h3>
    <div class="card-divider"></div>
    <p>Welcome to the example</p>
  </div>
</custom-card>
```

`ngProjectAs` yalnızca statik değerleri destekler ve dinamik ifadelere bağlanamaz.

## Dikkat edilmesi gerekenler

### Projeksiyonlanan içerik, üst bileşenin görünümünde yaşar

Projeksiyonlanan içerik, alıcı bileşenin içinde _render edilse_ de, onu bildiren bileşene aittir. Angular onu üst bileşenin görünümünün bir parçası olarak izler ve bunun bilinmesi gereken birkaç yan etkisi vardır.

**Değişiklik algılama:** Projeksiyonlanan içerik, _üst_ bileşen değişiklik algılaması çalıştırdığında kontrol edilir. Alıcı bileşen `OnPush` kullanıyorsa, Angular o bileşenin kendi şablonunu kontrol etmeyi atlayabilir, ancak projeksiyonlanan içeriği atlamaz çünkü o içerik üst bileşene aittir.

```html

<onpush-wrapper>
  
  <expensive-component />
</onpush-wrapper>
```

**Bağımlılık enjeksiyonu:** Projeksiyonlanan içerik bağımlılıklarını, alıcı bileşenin `viewProviders`'ından değil, üst bileşenin enjektöründen alır. Ayrıntılar için [Providers ve viewProviders](guide/di/hierarchical-dependency-injection) belgesine bakın.

### Bazı kütüphane bileşenleri projeksiyonlanan alt elemanları desteklemez

Bazı bileşenler (menüler, sekmeler, listeler) alt elemanlarını bulmak ve klavye navigasyonu, odak yönetimi veya ARIA öznitelikleri gibi davranışları kurmak için `ContentChildren` kullanır. Bu bileşenler, alt elemanlarına doğrudan sahip olduklarını varsayarak yazılmıştır, bu nedenle içlerine dışarıdan içerik projeksiyonlamak genellikle işleri ince yollarla bozar.

Örneğin, `<mat-menu-item>` elemanlarını ekstra bir katmanla sarıp `<mat-menu>` içine projeksiyonlamak, klavye navigasyonunu ve ekran okuyucu desteğini sessizce bozabilir. Sorgu, elemanları yine de bulur, ancak elemanlar farklı bir görünüm bağlamından geldiğinde, onları etkileşimli kılan iç kurulum doğru çalışmayabilir.

Bir kütüphane bileşeni alt elemanlarının davranışını yönetiyorsa, içerik projeksiyonuna başvurmadan önce belgelerini kontrol edin, desteklenmiyor olabilir.
# Bileşen yaşam döngüsü

TIP: Bu rehber, [Temel Bilgiler Rehberi](essentials)'ni zaten okuduğunuzu varsayar. Angular'da yeniyseniz önce onu okuyun.

Bir bileşenin **yaşam döngüsü**, bileşenin oluşturulması ile yok edilmesi arasında gerçekleşen adımlar dizisidir. Her adım, Angular'ın bileşenleri render etme ve zaman içinde güncellemeleri kontrol etme sürecinin farklı bir bölümünü temsil eder.

Bileşenlerinizde, bu adımlar sırasında kod çalıştırmak için **yaşam döngüsü kancaları** uygulayabilirsiniz. Belirli bir bileşen örneği ile ilişkili yaşam döngüsü kancaları, bileşen sınıfınızdaki yöntemler olarak uygulanır. Genel Angular uygulamasıyla ilişkili yaşam döngüsü kancaları, bir geri çağrıma kabul eden fonksiyonlar olarak uygulanır.

Bir bileşenin yaşam döngüsü, Angular'ın bileşenlerinizi zaman içinde değişiklikler açısından nasıl kontrol ettiğiyle yakından bağlantılıdır. Bu yaşam döngüsünü anlamak için, Angular'ın uygulama ağacınızda yukarıdan aşağıya doğru yürüyerek şablon bağlamalarındaki değişiklikleri kontrol ettiğini bilmeniz yeterlidir. Aşağıda açıklanan yaşam döngüsü kancaları, Angular bu geçişi yaparken çalışır. Bu geçiş her bileşeni tam olarak bir kez ziyaret eder, bu nedenle işlemin ortasında daha fazla durum değişiklikleri yapmaktan her zaman kaçınmalısınız.

## Özet

<div class="docs-table docs-scroll-track-transparent">
  <table>
    <tr>
      <td><strong>Aşama</strong></td>
      <td><strong>Yöntem</strong></td>
      <td><strong>Özet</strong></td>
    </tr>
    <tr>
      <td>Oluşturma</td>
      <td><code>constructor</code></td>
      <td>
        <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes/constructor" target="_blank">
          Standart JavaScript sınıf constructor'ı
        </a>. Angular bileşeni örneklediğinde çalışır.
      </td>
    </tr>
    <tr>
      <td rowspan="7">Değişiklik<p>Algılama</td>
      <td><code>ngOnInit</code>
      </td>
      <td>Bileşenin tüm girdileri başlatıldıktan sonra bir kez çalışır.</td>
    </tr>
    <tr>
      <td><code>ngOnChanges</code></td>
      <td>Bileşenin girdileri her değiştiğinde çalışır.</td>
    </tr>
    <tr>
      <td><code>ngDoCheck</code></td>
      <td>Bu bileşen değişiklikler için her kontrol edildiğinde çalışır.</td>
    </tr>
    <tr>
      <td><code>ngAfterContentInit</code></td>
      <td>Bileşenin <em>içeriği</em> başlatıldıktan sonra bir kez çalışır.</td>
    </tr>
    <tr>
      <td><code>ngAfterContentChecked</code></td>
      <td>Bu bileşen içeriği değişiklikler için her kontrol edildiğinde çalışır.</td>
    </tr>
    <tr>
      <td><code>ngAfterViewInit</code></td>
      <td>Bileşenin <em>görünümü</em> başlatıldıktan sonra bir kez çalışır.</td>
    </tr>
    <tr>
      <td><code>ngAfterViewChecked</code></td>
      <td>Bileşenin görünümü değişiklikler için her kontrol edildiğinde çalışır.</td>
    </tr>
    <tr>
      <td rowspan="2">Render Etme</td>
      <td><code>afterNextRender</code></td>
      <td><strong>Tüm</strong> bileşenler bir sonraki sefer DOM'a render edildikten sonra bir kez çalışır.</td>
    </tr>
    <tr>
      <td><code>afterEveryRender</code></td>
      <td><strong>Tüm</strong> bileşenler DOM'a her render edildikten sonra çalışır.</td>
    </tr>
    <tr>
      <td>Yok Etme</td>
      <td><code>ngOnDestroy</code></td>
      <td>Bileşen yok edilmeden önce bir kez çalışır.</td>
    </tr>
  </table>
</div>

### ngOnInit

`ngOnInit` yöntemi, Angular bileşenin tüm girdilerini başlangıç değerleriyle başlattıktan sonra çalışır. Bir bileşenin `ngOnInit`'i tam olarak bir kez çalışır.

Bu adım, bileşenin kendi şablonunun başlatılmasından _önce_ gerçekleşir. Bu, bileşenin durumunu başlangıç girdi değerlerine göre güncelleyebileceğiniz anlamına gelir.

### ngOnChanges

`ngOnChanges` yöntemi, herhangi bir bileşen girdisi değiştikten sonra çalışır.

Bu adım, bileşenin kendi şablonunun kontrol edilmesinden _önce_ gerçekleşir. Bu, bileşenin durumunu başlangıç girdi değerlerine göre güncelleyebileceğiniz anlamına gelir.

Başlatma sırasında, ilk `ngOnChanges` `ngOnInit`'ten önce çalışır.

#### Değişiklikleri inceleme

`ngOnChanges` yöntemi tek bir `SimpleChanges` argümanı kabul eder. Bu nesne, her bileşen girdi adını bir `SimpleChange` nesnesine eşleştiren bir [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)'dur. Her `SimpleChange`, girdinin önceki değerini, mevcut değerini ve girdinin ilk kez değişip değişmediğini gösteren bir işaret içerir.

Daha güçlü tür denetimi için ilk generic argüman olarak isteğe bağlı olarak mevcut sınıfı veya this'i iletebilirsiniz.

```ts
@Component({
  /* ... */
})
export class UserProfile {
  name = input('');

ngOnChanges(changes: SimpleChanges<UserProfile>) {
    if (changes.name) {
      console.log(`Previous: ${changes.name.previousValue}`);
      console.log(`Current: ${changes.name.currentValue}`);
      console.log(`Is first ${changes.name.firstChange}`);
    }
  }
}
```

Herhangi bir girdi özelliği için bir `alias` sağlarsanız, `SimpleChanges` Record'u hala anahtar olarak takma ad yerine TypeScript özellik adını kullanır.

### ngOnDestroy

`ngOnDestroy` yöntemi, bir bileşen yok edilmeden hemen önce bir kez çalışır. Angular, bir bileşeni sayfada artık gösterilmediğinde yok eder, örneğin `@if` ile gizlenme veya başka bir sayfaya navigasyon.

#### DestroyRef

`ngOnDestroy` yöntemine alternatif olarak, bir `DestroyRef` örneği enjekte edebilirsiniz. `DestroyRef`'in `onDestroy` yöntemini çağırarak bileşenin yok edilmesi üzerine çağırılacak bir geri çağrıma kaydedebilirsiniz.

```ts
@Component({
  /* ... */
})
export class UserProfile {
  constructor() {
    inject(DestroyRef).onDestroy(() => {
      console.log('UserProfile destruction');
    });
  }
}
```

`DestroyRef` örneğini bileşen dışındaki fonksiyonlara veya sınıflara iletebilirsiniz. Bileşen yok edildiğinde bazı temizlik davranışı çalıştırması gereken başka kodlarınız varsa bu kalıbı kullanın.

Tüm temizlik kodunu `ngOnDestroy` yöntemine koymak yerine, kurulum kodunu temizlik koduna yakın tutmak için de `DestroyRef` kullanabilirsiniz.

##### Örnek yok edilmesini algılama

`DestroyRef`, belirli bir örneğin zaten yok edilip edilmediğini kontrol etmeye olanak tanıyan bir `destroyed` özelliği sağlar. Bu, özellikle gecikmeli veya asenkron mantıkla uğraşılırken yok edilmiş bileşenler üzerinde işlem yapmayı önlemek için kullanışlıdır.

`destroyRef.destroyed` değerini kontrol ederek, örnek temizlendikten sonra kod çalıştırmayı önleyerek `NG0911: View has already been destroyed.` gibi olası hataları önleyebilirsiniz.

### ngDoCheck

`ngDoCheck` yöntemi, Angular bir bileşenin şablonunu değişiklikler için her kontrol etmeden önce çalışır.

Bu yaşam döngüsü kancasını, Angular'ın normal değişiklik algılamasının dışındaki durum değişikliklerini manuel olarak kontrol ederek bileşenin durumunu manuel olarak güncellemek için kullanabilirsiniz.

Bu yöntem çok sık çalışır ve sayfa performansınızı önemli ölçüde etkileyebilir. Bu kancayı mümkün olduğunda tanımlamaktan kaçının ve yalnızca başka bir alternatifiniz olmadığında kullanın.

Başlatma sırasında, ilk `ngDoCheck` `ngOnInit`'ten sonra çalışır.

### ngAfterContentInit

`ngAfterContentInit` yöntemi, bileşenin içerisine yuvalanan tüm alt elemanlar (_içeriği_) başlatıldıktan sonra bir kez çalışır.

Bu yaşam döngüsü kancasını [içerik sorguları](guide/components/queries#içerik-sorguları)'nın sonuçlarını okumak için kullanabilirsiniz. Bu sorguların başlatılmış durumuna erişebilirsiniz, ancak bu yöntemde herhangi bir durumu değiştirmeye çalışmak [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100) hatasına neden olur.

### ngAfterContentChecked

`ngAfterContentChecked` yöntemi, bileşenin içerisine yuvalanan alt elemanlar (_içeriği_) değişiklikler için her kontrol edildiğinde çalışır.

[İçerik sorguları](guide/components/queries#içerik-sorguları)'nın güncellenmiş durumuna burada erişebilirsiniz, ancak bu yöntemde herhangi bir durumu değiştirmeye çalışmak [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100) hatasına neden olur.

### ngAfterViewInit

`ngAfterViewInit` yöntemi, bileşenin şablonundaki tüm alt elemanlar (_görünümü_) başlatıldıktan sonra bir kez çalışır.

Bu yaşam döngüsü kancasını [görünüm sorguları](guide/components/queries#görünüm-sorguları)'nın sonuçlarını okumak için kullanabilirsiniz. Bu sorguların başlatılmış durumuna erişebilirsiniz, ancak bu yöntemde herhangi bir durumu değiştirmeye çalışmak [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100) hatasına neden olur.

### ngAfterViewChecked

`ngAfterViewChecked` yöntemi, bileşenin şablonundaki alt elemanlar (_görünümü_) değişiklikler için her kontrol edildiğinde çalışır.

[Görünüm sorguları](guide/components/queries#görünüm-sorguları)'nın güncellenmiş durumuna burada erişebilirsiniz, ancak bu yöntemde herhangi bir durumu değiştirmeye çalışmak [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100) hatasına neden olur.

### afterEveryRender ve afterNextRender

`afterEveryRender` ve `afterNextRender` fonksiyonları, Angular sayfadaki _tüm bileşenleri_ DOM'a render etmeyi bitirdikten sonra çağırılacak bir **render geri çağrısı** kaydetmenize olanak tanır.

Bu fonksiyonlar, bu rehberde açıklanan diğer yaşam döngüsü kancalarından farklıdır. Bir sınıf yöntemi olmak yerine, bir geri çağrıma kabul eden bağımsız fonksiyonlardır. Render geri çağrımalarının çalıştırılması belirli bir bileşen örneğine bağlı değildir, bunun yerine uygulama genelinde bir kancadır.

`afterEveryRender` ve `afterNextRender` bir [enjeksiyon bağlamında](guide/di/dependency-injection-context) çağırılmalıdır, tipik olarak bileşenin constructor'ında.

Manuel DOM işlemleri gerçekleştirmek için render geri çağrımalarını kullanabilirsiniz.
Angular'da DOM ile çalışma rehberliği için [DOM API'lerini Kullanma](guide/components/dom-apis) belgesine bakın.

Render geri çağrıları, sunucu tarafı render etme veya derleme zamanı ön-render etme sırasında çalışmaz.

#### after\*Render aşamaları

`afterEveryRender` veya `afterNextRender` kullanırken, işi isteğe bağlı olarak aşamalara bölebilirsiniz. Aşama, DOM işlemlerinin sıralamasını kontrol etmenizi sağlar ve [düzeni bozmayı](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing) en aza indirmek için _yazma_ işlemlerini _okuma_ işlemlerinden önce sıralamanıza olanak tanır. Aşamalar arası iletişim için, bir aşama fonksiyonu sonraki aşamada erişilebilecek bir sonuç değeri döndürebilir.

```ts
import {Component, ElementRef, afterNextRender} from '@angular/core';

@Component({
  /*...*/
})
export class UserProfile {
  private prevPadding = 0;
  private elementHeight = 0;

constructor() {
    const elementRef = inject(ElementRef);
    const nativeElement = elementRef.nativeElement;

afterNextRender({
      // Geometrik bir özelliğe yazmak için `Write` aşamasını kullanın.
      write: () => {
        const padding = computePadding();
        const changed = padding !== this.prevPadding;
        if (changed) {
          nativeElement.style.padding = padding;
        }
        return changed; // Okuma aşamasına bir şeyin değişip değişmediğini bildirin.
      },

// Tüm yazmalar gerçekleştikten sonra geometrik özellikleri okumak için `Read` aşamasını kullanın.
      read: (didWrite) => {
        if (didWrite) {
          this.elementHeight = nativeElement.getBoundingClientRect().height;
        }
      },
    });
  }
}
```

Aşağıdaki sırada çalıştırılan dört aşama vardır:

| Aşama            | Açıklama                                                                                                                                                                                                  |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `earlyRead`      | Sonraki hesaplama için kesinlikle gerekli olan düzeni etkileyen DOM özelliklerini ve stillerini okumak için bu aşamayı kullanın. Mümkünse bu aşamadan kaçının, `write` ve `read` aşamalarını tercih edin. |
| `write`          | Düzeni etkileyen DOM özelliklerini ve stillerini yazmak için bu aşamayı kullanın.                                                                                                                         |
| `mixedReadWrite` | Varsayılan aşama. Hem düzeni etkileyen özellikleri hem de stilleri okuması ve yazması gereken işlemler için kullanın. Mümkünse bu aşamadan kaçının, açık `write` ve `read` aşamalarını tercih edin.       |
| `read`           | Düzeni etkileyen DOM özelliklerini okumak için bu aşamayı kullanın.                                                                                                                                       |

## Yaşam döngüsü arayüzleri

Angular, her yaşam döngüsü yöntemi için bir TypeScript arayüzü sağlar. Uygulamanızda yazım hatası veya imla hatası olmadığını sağlamak için isteğe bağlı olarak bu arayüzleri içerebilir (import) ve `implement` edebilirsiniz.

Her arayüz, karşılık gelen yöntemle aynı ada sahiptir, ancak `ng` öneki olmadan. Örneğin, `ngOnInit` arayüzü `OnInit`'tir.

```ts
@Component({
  /* ... */
})
export class UserProfile implements OnInit {
  ngOnInit() {
    /* ... */
  }
}
```

## Çalışma sırası

Aşağıdaki diyagramlar Angular'ın yaşam döngüsü kancalarının çalışma sırasını göstermektedir.

### Başlatma sırasında

```mermaid
graph TD;
id[constructor]-->CHANGE;
subgraph CHANGE [Change detection]
direction TB
ngOnChanges-->ngOnInit;
ngOnInit-->ngDoCheck;
ngDoCheck-->ngAfterContentInit;
ngDoCheck-->ngAfterViewInit
ngAfterContentInit-->ngAfterContentChecked
ngAfterViewInit-->ngAfterViewChecked
end
CHANGE--Rendering-->afterNextRender-->afterEveryRender
```

### Sonraki güncellemeler

```mermaid
graph TD;
subgraph CHANGE [Change detection]
direction TB
ngOnChanges-->ngDoCheck
ngDoCheck-->ngAfterContentChecked;
ngDoCheck-->ngAfterViewChecked
end
CHANGE--Rendering-->afterEveryRender
```

### Direktiflerle sıralama

Bir şablonda veya `hostDirectives` özelliği ile aynı elemana bir veya daha fazla direktif ile birlikte bir bileşen yerleştirdiğinizde, framework tek bir eleman üzerindeki bileşen ve direktifler arasında belirli bir yaşam döngüsü kancası için herhangi bir sıralama garantisi vermez. Gözlemlenen bir sıralamaya asla güvenmeyin, çünkü bu Angular'ın sonraki sürümlerinde değişebilir.
Bileşen şablonları sadece statik HTML değildir -- bileşen sınıfınızdaki verileri kullanabilir ve kullanıcı etkileşimi için işleyiciler kurabilir.

## Dinamik Metin Gösterme

Angular'da bir _bağlama (binding)_, bir bileşenin şablonu ile verileri arasında dinamik bir bağlantı oluşturur. Bu bağlantı, bileşenin verilerindeki değişikliklerin render edilen şablonu otomatik olarak güncellemesini sağlar.

Bir şablonda dinamik metin göstermek için çift süslü parantez kullanarak bir bağlama oluşturabilirsiniz:

```typescript
@Component({
  selector: 'user-profile',
  template: `<h1>Profile for {{ userName() }}</h1>`,
})
export class UserProfile {
  userName = signal('pro_programmer_123');
}
```

Angular bileşeni render ettiğinde şunu görürsünüz:

```html
<h1>Profile for pro_programmer_123</h1>
```

Angular, sinyalin değeri değiştiğinde bağlamayı otomatik olarak güncel tutar. Yukarıdaki örneği temel alarak, `userName` sinyalinin değerini güncellersek:

```typescript
this.userName.set('cool_coder_789');
```

Render edilen sayfa yeni değeri yansıtacak şekilde güncellenir:

```html
<h1>Profile for cool_coder_789</h1>
```

## Dinamik Özellikler ve Öznitelikler Ayarlama

Angular, köşeli parantezlerle DOM özelliklerine dinamik değerler bağlamayı destekler:

```typescript
@Component({
  /*...*/
  // `isValidUserId` değerine göre butonun `disabled` özelliğini ayarla.
  template: `<button [disabled]="!isValidUserId()">Save changes</button>`,
})
export class UserProfile {
  isValidUserId = signal(false);
}
```

Ayrıca öznitelik adının önüne `attr.` ekleyerek HTML _özniteliklerine_ de bağlama yapabilirsiniz:

```html

<ul [attr.role]="listRole()"></ul>
```

Angular, bağlanan değer değiştiğinde DOM özelliklerini ve özniteliklerini otomatik olarak günceller.

## Kullanıcı Etkileşimini Yönetme

Angular, şablonunuzdaki bir elemana parantezlerle olay dinleyicileri eklemenizi sağlar:

```typescript
@Component({
  /*...*/
  // `cancelSubscription` metodunu çağıran bir 'click' olay işleyicisi ekle.
  template: `<button (click)="cancelSubscription()">Cancel subscription</button>`,
})
export class UserProfile {
  /* ... */

cancelSubscription() {
    /* Olay işleme kodunuz buraya gelecek. */
  }
}
```

[Olay](https://developer.mozilla.org/docs/Web/API/Event) nesnesini dinleyicinize geçirmeniz gerekiyorsa, fonksiyon çağrısı içinde Angular'ın yerleşik `$event` değişkenini kullanabilirsiniz:

```typescript
@Component({
  /*...*/
  // `cancelSubscription` metodunu çağıran bir 'click' olay işleyicisi ekle.
  template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,
})
export class UserProfile {
  /* ... */

cancelSubscription(event: Event) {
    /* Olay işleme kodunuz buraya gelecek. */
  }
}
```

## `@if` ve `@for` ile Kontrol Akışı

Angular'ın `@if` bloğu ile bir şablonun bazı kısımlarını koşullu olarak gizleyip gösterebilirsiniz:

```html
<h1>User profile</h1>

@if (isAdmin()) {
  <h2>Admin settings</h2>
  
}
```

`@if` bloğu ayrıca isteğe bağlı bir `@else` bloğunu da destekler:

```html
<h1>User profile</h1>

@if (isAdmin()) {
  <h2>Admin settings</h2>
  
} @else {
  <h2>User settings</h2>
  
}
```

Angular'ın `@for` bloğu ile bir şablonun bir kısmını birden fazla kez tekrarlayabilirsiniz:

```html
<h1>User profile</h1>

<ul class="user-badge-list">
  @for (badge of badges(); track badge.id) {
    <li class="user-badge">{{ badge.name }}</li>
  }
</ul>
```

Angular, yukarıdaki örnekte gösterilen `track` anahtar kelimesini, `@for` tarafından oluşturulan DOM elementleriyle verileri ilişkilendirmek için kullanır. Daha fazla bilgi için [_@for bloklarında track neden önemlidir?_](guide/templates/control-flow#for-bloklarında-track-neden-önemlidir) bölümüne bakın.

TIP: Angular şablonları hakkında daha fazla bilgi edinmek ister misiniz? Tüm ayrıntılar için [Detaylı Şablonlar kılavuzuna](guide/templates) bakın.

## Sonraki Adım

Uygulamada dinamik veri ve şablonlara sahip olduğunuza göre, belirli elementleri koşullu olarak gizleme veya gösterme, elementler üzerinde döngü yapma ve daha fazlasıyla şablonları nasıl geliştireceğinizi öğrenmenin zamanı geldi.
# Olay dinleyicileri ekleme

Angular, şablonunuzdaki bir elemanda olay dinleyicileri tanımlamayı destekler; bunun için olay adı parantez içinde belirtilir ve olay her gerçekleştiğinde çalışan bir ifade yazılır.

## Yerel olayları dinleme

Bir HTML elemanına olay dinleyicileri eklemek istediğinizde, olayı parantezlerle (`()`) sararsınız ve bir dinleyici ifadesi belirtirsiniz.

```typescript
@Component({
  template: `
    <input type="text" (keyup)="updateField()" />
  `,
  ...
})
export class App{
  updateField(): void {
    console.log('Field is updated!');
  }
}
```

Bu örnekte, `<input>` elemanı her `keyup` olayı yayınladığında Angular `updateField`'ı çağırır.

`click`, `keydown`, `mouseover` gibi herhangi bir yerel olay için dinleyici ekleyebilirsiniz. Daha fazla bilgi için [MDN'deki elemanlar üzerindeki tüm mevcut olaylara](https://developer.mozilla.org/en-US/docs/Web/API/Element#events) göz atın.

## Olay argümanına erişme

Her şablon olay dinleyicisinde, Angular olay nesnesine referans içeren `$event` adında bir değişken sağlar.

```typescript
@Component({
  template: `
    <input type="text" (keyup)="updateField($event)" />
  `,
  ...
})
export class App {
  updateField(event: KeyboardEvent): void {
    console.log(`The user pressed: ${event.key}`);
  }
}
```

## Tuş değiştiricilerini kullanma

Belirli bir tuş için belirli klavye olaylarını yakalamak istediğinizde, aşağıdakine benzer bir kod yazabilirsiniz:

```typescript
@Component({
  template: `
    <input type="text" (keyup)="updateField($event)" />
  `,
  ...
})
export class App {
  updateField(event: KeyboardEvent): void {
    if (event.key === 'Enter') {
      console.log('The user pressed enter in the text field.');
    }
  }
}
```

Ancak bu yaygın bir senaryo olduğu için, Angular nokta (`.`) karakterini kullanarak belirli bir tuş belirtmenize olanak tanıyarak olayları filtrelemenizi sağlar. Böylece kod şu şekilde basitleştirilebilir:

```typescript
@Component({
  template: `
    <input type="text" (keyup.enter)="updateField($event)" />
  `,
  ...
})
export class App{
  updateField(event: KeyboardEvent): void {
    console.log('The user pressed enter in the text field.');
  }
}
```

Ek tuş değiştiricileri de ekleyebilirsiniz:

```html

<input type="text" (keyup.shift.enter)="updateField($event)" />
```

Angular `alt`, `control`, `meta` ve `shift` değiştiricilerini destekler.

Klavye olaylarına bağlamak istediğiniz tuşu veya kodu belirtebilirsiniz. Tuş ve kod alanları, tarayıcının yerel klavye olay nesnesinin bir parçasıdır. Varsayılan olarak, olay bağlaması [klavye olayları için Tuş değerlerini](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_key_values) kullandığınızı varsayar.

Angular ayrıca yerleşik bir `code` soneki sağlayarak [klavye olayları için Kod değerlerini](https://developer.mozilla.org/docs/Web/API/UI_Events/Keyboard_event_code_values) belirtmenize de olanak tanır.

```html

<input type="text" (keydown.code.alt.shiftleft)="updateField($event)" />
```

Bu, farklı işletim sistemlerinde klavye olaylarını tutarlı bir şekilde işlemek için faydalı olabilir. Örneğin, macOS cihazlarında Alt tuşunu kullanırken, `key` özelliği tuşu zaten Alt tuşu tarafından değiştirilmiş karaktere göre bildirir. Bu, Alt + S gibi bir kombinasyonun `'ß'` `key` değerini bildirmesi anlamına gelir. Ancak `code` özelliği, üretilen karakter yerine basılan fiziksel veya sanal butona karşılık gelir.

## Global hedefleri dinleme

Global hedef adları bir olaya önek olarak kullanılabilir. Desteklenen 3 global hedef `window`, `document` ve `body`'dir.

```typescript
@Component({
  /* ... */
  host: {
    'window:click': 'onWindowClick()',
    'document:click': 'onDocumentClick()',
    'body:click': 'onBodyClick()',
  },
})
export class MyView {}
```

## Olayın varsayılan davranışını engelleme

Olay işleyiciniz yerel tarayıcı davranışını değiştirmesi gerekiyorsa, olay nesnesinin [`preventDefault` yöntemini](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) kullanabilirsiniz:

```typescript
@Component({
  template: `
    <a href="#overlay" (click)="showOverlay($event)">
  `,
  ...
})
export class App{
  showOverlay(event: PointerEvent): void {
    event.preventDefault();
    console.log('Show overlay without updating the URL!');
  }
}
```

Olay işleyicisi ifadesi `false` olarak değerlendirilirse, Angular [yerel olay işleyici niteliklerine](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes) benzer şekilde otomatik olarak `preventDefault()` çağırır. _Her zaman açıkça `preventDefault` çağırmayı tercih edin_, çünkü bu yaklaşım kodun amacını belirgin kılar.

## Olay işlemeyi genişletme

Angular'ın olay sistemi, `EVENT_MANAGER_PLUGINS` enjeksiyon belirteci ile kaydedilen özel olay eklentileri aracılığıyla genişletilebilir.

### Olay Eklentisi Uygulama

Özel bir olay eklentisi oluşturmak için `EventManagerPlugin` sınıfını genişletin ve gerekli yöntemleri uygulayın.

```ts
import {Injectable} from '@angular/core';
import {EventManagerPlugin} from '@angular/platform-browser';

@Injectable()
export class DebounceEventPlugin extends EventManagerPlugin {
  constructor() {
    super(document);
  }

// Bu eklentinin hangi olayları desteklediğini tanımla
  override supports(eventName: string) {
    return /debounce/.test(eventName);
  }

// Olay kaydını işle
  override addEventListener(element: HTMLElement, eventName: string, handler: Function) {
    // Olayı ayrıştır: örn. "click.debounce.500"
    // event: "click", delay: 500
    const [event, method, delay = 300] = eventName.split('.');

let timeoutId: number;

const listener = (event: Event) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        handler(event);
      }, delay);
    };

element.addEventListener(event, listener);

// Temizleme fonksiyonunu döndür
    return () => {
      clearTimeout(timeoutId);
      element.removeEventListener(event, listener);
    };
  }
}
```

Özel eklentinizi uygulamanızın sağlayıcılarına `EVENT_MANAGER_PLUGINS` belirtecini kullanarak kaydedin:

```ts
import {bootstrapApplication} from '@angular/platform-browser';
import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
import {App} from './app';
import {DebounceEventPlugin} from './debounce-event-plugin';

bootstrapApplication(App, {
  providers: [
    {
      provide: EVENT_MANAGER_PLUGINS,
      useClass: DebounceEventPlugin,
      multi: true,
    },
  ],
});
```

Kayıt tamamlandıktan sonra, özel olay sözdizimini şablonlarda ve ayrıca `host` özelliği ile kullanabilirsiniz:

```typescript
@Component({
  template: `
    <input
      type="text"
      (input.debounce.500)="onSearch($event.target.value)"
      placeholder="Search..."
    />
  `,
  ...
})
export class Search {
 onSearch(query: string): void {
    console.log('Searching for:', query);
  }
}
```

```ts
@Component({
  ...,
  host: {
    '(click.debounce.500)': 'handleDebouncedClick()',
  },
})
export class AwesomeCard {
  handleDebouncedClick(): void {
   console.log('Debounced click!');
  }
}
```
# Dinamik metin, özellik ve nitelikleri bağlama

Angular'da bir **bağlama (binding)**, bir bileşenin şablonu ile verileri arasında dinamik bir bağlantı oluşturur. Bu bağlantı, bileşenin verilerindeki değişikliklerin işlenmiş şablonu otomatik olarak güncellemesini sağlar.

## Metin interpolasyonu ile dinamik metin işleme

Şablonlarda dinamik metni çifte süslü parantezlerle bağlayabilirsiniz; bu, Angular'a içindeki ifadeden sorumlu olduğunu ve doğru şekilde güncellenmesini sağlamasını bildirir. Buna **metin interpolasyonu** denir.

```typescript
@Component({
  template: `
    <p>Your color preference is {{ theme }}.</p>
  `,
  ...
})
export class App {
  theme = 'dark';
}
```

Bu örnekte, parça sayfaya işlendiğinde Angular `{{ theme }}` yerine `dark` koyacaktır.

```html

<p>Your color preference is dark.</p>
```

Zaman içinde değişen bağlamalar değerleri [signal'lerden](/guide/signals) okumalıdırlar. Angular, şablonda okunan signal'leri takip eder ve bu signal değerleri değiştiğinde işlenmiş sayfayı günceller.

```typescript
@Component({
  template: `
    
    <p>{{ welcomeMessage }}</p>

<p>Your color preference is {{ theme() }}.</p> 
  `
  ...
})
export class App {
  welcomeMessage = "Welcome, enjoy this app that we built for you";
  theme = signal('dark');
}
```

Daha fazla bilgi için [Signal'ler rehberine](/guide/signals) bakın.

Tema örneğiyle devam edersek, bir kullanıcı sayfa yüklendikten sonra `theme` signal'ini `'light'` olarak güncelleyen bir butona tıklarsa, sayfa buna uygun olarak güncellenir:

```html

<p>Your color preference is light.</p>
```

Metin interpolasyonunu HTML'de normalde metin yazdığınız her yerde kullanabilirsiniz.

Tüm ifade değerleri bir dizgeye dönüştürülür. Nesneler ve diziler değerin `toString` yöntemi kullanılarak dönüştürülür.

## Dinamik özellik ve nitelikleri bağlama

Angular, köşeli parantezlerle nesne özelliklerine ve HTML niteliklerine dinamik değerler bağlamayı destekler.

Bir HTML elemanının DOM örneğindeki, bir [bileşenin](/guide/components) örneğindeki veya bir [direktifin](/guide/directives) örneğindeki özelliklere bağlama yapabilirsiniz.

### Yerel eleman özellikleri

Her HTML elemanının karşılık gelen bir DOM temsili vardır. Örneğin, her `<button>` HTML elemanı DOM'da bir `HTMLButtonElement` örneğine karşılık gelir. Angular'da, elemanların DOM temsiline doğrudan değer ayarlamak için özellik bağlamalarını kullanırsınız.

```html

<button [disabled]="isFormValid()">Save</button>
```

Bu örnekte, `isFormValid` her değiştiğinde Angular otomatik olarak `HTMLButtonElement` örneğinin `disabled` özelliğini ayarlar.

### Bileşen ve direktif özellikleri

Bir eleman Angular bileşeni olduğunda, aynı köşeli parantez sözdizimini kullanarak bileşen giriş özelliklerini ayarlamak için özellik bağlamalarını kullanabilirsiniz.

```html

<my-listbox [value]="mySelection()" />
```

Bu örnekte, `mySelection` her değiştiğinde Angular otomatik olarak `MyListbox` örneğinin `value` özelliğini ayarlar.

Direktif özelliklerine de bağlama yapabilirsiniz.

```html

<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo" />
```

### Nitelikler

Karşılık gelen DOM özellikleri olmayan HTML niteliklerini (örneğin SVG nitelikleri) ayarlamanız gerektiğinde, şablonunuzdaki elemanlara `attr.` öneki ile nitelik bağlayabilirsiniz.

```html

<ul [attr.role]="listRole()">
```

Bu örnekte, `listRole` her değiştiğinde Angular otomatik olarak `setAttribute` çağırarak `<ul>` elemanının `role` niteliğini ayarlar.

Bir nitelik bağlamasının değeri `null` ise, Angular `removeAttribute` çağırarak niteliği kaldırır.

### Özellik ve niteliklerde metin interpolasyonu

Özellik ve niteliklerde metin interpolasyonu sözdizimini de kullanabilirsiniz; bunun için özellik veya nitelik adının etrafında köşeli parantezler yerine çifte süslü parantez sözdizimini kullanırsınız. Bu sözdizimini kullandığınızda Angular, atama işlemini bir özellik bağlaması olarak değerlendirir.

```html

<img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" />
```

## CSS sınıfı ve stil özelliği bağlamaları

Angular, elemanlara CSS sınıflarını ve CSS stil özelliklerini bağlamak için ek özellikler destekler.

### CSS sınıfları

Bağlı değerin [truthy veya falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) olmasına göre bir elemana CSS sınıfı koşullu olarak eklemek veya kaldırmak için bir CSS sınıf bağlaması oluşturabilirsiniz.

```html

<ul [class.expanded]="isExpanded()">
```

Ayrıca doğrudan `class` özelliğine bağlama da yapabilirsiniz. Angular üç tür değeri kabul eder:

| `class` değerinin açıklaması                                                                                                                                       | TypeScript türü       |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- |
| Boşlukla ayrılmış bir veya daha fazla CSS sınıfı içeren bir dizge                                                                                                  | `string`              |
| CSS sınıf dizgelerinden oluşan bir dizi                                                                                                                            | `string[]`            |
| Her özellik adının bir CSS sınıf adı olduğu ve karşılık gelen her değerin o sınıfın elemana uygulanıp uygulanmayacağını truthy değerine göre belirlediği bir nesne | `Record<string, any>` |

```typescript
@Component({
  template: `
    <ul [class]="listClasses"> ... </ul>
    <section [class]="sectionClasses()"> ... </section>
    <button [class]="buttonClasses()"> ... </button>
  `,
  ...
})
export class UserProfile {
  listClasses = 'full-width outlined';
  sectionClasses = signal(['expandable', 'elevated']);
  buttonClasses = signal({
    highlighted: true,
    embiggened: false,
  });
}
```

Yukarıdaki örnek aşağıdaki DOM'u işler:

```html
<ul class="full-width outlined"> ... </ul>
<section class="expandable elevated"> ... </section>
<button class="highlighted"> ... </button>
```

Angular geçerli CSS sınıf adları olmayan dizge değerlerini yok sayar.

Statik CSS sınıflarını, doğrudan `class` bağlamasını ve belirli sınıf bağlamalarını birlikte kullanırken Angular, işlenmiş sonuçta tüm sınıfları akıllı bir şekilde birleştirir.

```typescript
@Component({
  template: `<ul class="list" [class]="listType()" [class.expanded]="isExpanded()"> ...`,
  ...
})
export class Listbox {
  listType = signal('box');
  isExpanded = signal(true);
}
```

Yukarıdaki örnekte Angular, `ul` elemanını üç CSS sınıfının tümünü uygulayarak işler.

```html
<ul class="list box expanded">
```

Angular, işlenmiş elemanlardaki CSS sınıflarının belirli bir sırasını garanti etmez.

`class`'ı bir diziye veya nesneye bağlarken, Angular önceki değeri mevcut değerle üçlü eşittir operatörü (`===`) kullanarak karşılaştırır. Angular'ın güncellemeleri uygulayabilmesi için bu değerleri değiştirdiğinizde yeni bir nesne veya dizi örneği oluşturmanız gerekir.

Bir eleman aynı CSS sınıfı için birden fazla bağlamaya sahipse, Angular stil öncelik sırasına göre çatışmaları çözümler.

NOTE: Sınıf bağlamaları, tek bir anahtarda boşlukla ayrılmış sınıf adlarını desteklemez. Ayrıca bağlama referansı aynı kaldığı için nesnelerdeki mutasyonları da algılayamaz. Bunlardan birini veya diğerini kullanmanız gerekiyorsa, [ngClass](/api/common/NgClass) direktifini kullanın.

### CSS stil özellikleri

Ayrıca doğrudan bir elemana CSS stil özelliklerini de bağlayabilirsiniz.

```html

<section [style.display]="isExpanded() ? 'block' : 'none'">
```

Birim kabul eden CSS özellikleri için birimleri de belirtebilirsiniz.

```html

<section [style.height.px]="sectionHeightInPixels()">
```

Ayrıca bir bağlamada birden fazla stil değerini de ayarlayabilirsiniz. Angular aşağıdaki değer türlerini kabul eder:

| `style` değerinin açıklaması                                                                                           | TypeScript türü       |
| ---------------------------------------------------------------------------------------------------------------------- | --------------------- |
| Sıfır veya daha fazla CSS bildirimi içeren bir dizge, örneğin `"display: flex; margin: 8px"`.                          | `string`              |
| Her özellik adının bir CSS özellik adı olduğu ve karşılık gelen her değerin o CSS özelliğinin değeri olduğu bir nesne. | `Record<string, any>` |

```typescript
@Component({
  template: `
    <ul [style]="listStyles()"> ... </ul>
    <section [style]="sectionStyles()"> ... </section>
  `,
  ...
})
export class UserProfile {
  listStyles = signal('display: flex; padding: 8px');
  sectionStyles = signal({
    border: '1px solid black',
    'font-weight': 'bold',
  });
}
```

Yukarıdaki örnek aşağıdaki DOM'u işler.

```html
<ul style="display: flex; padding: 8px"> ... </ul>
<section style="border: 1px solid black; font-weight: bold"> ... </section>
```

`style`'ı bir nesneye bağlarken, Angular önceki değeri mevcut değerle üçlü eşittir operatörü (`===`) kullanarak karşılaştırır. Angular'ın güncellemeleri uygulayabilmesi için bu değerleri değiştirdiğinizde yeni bir nesne örneği oluşturmanız gerekir.

Bir eleman aynı stil özelliği için birden fazla bağlamaya sahipse, Angular stil öncelik sırasına göre çatışmaları çözümler.

## ARIA nitelikleri

Angular, ARIA niteliklerine dizge değerleri bağlamayı destekler.

```html
<button type="button" [aria-label]="actionLabel()">
  {{ actionLabel() }}
</button>
```

Angular, dizge değerini elemanın `aria-label` niteliğine yazar ve bağlı değer `null` olduğunda kaldırır.

Bazı ARIA özellikleri, yapılı değerler (örneğin eleman referansları) kabul eden DOM özellikleri veya direktif girişleri sunar. Bu durumlar için standart özellik bağlamalarını kullanın. Örnekler ve ek rehberlik için [erişilebilirlik rehberine](/best-practices/a11y#aria-özellikleri-ve-nitelikleri) bakın.
# Control flow

Angular şablonları, elemanları koşullu olarak göstermenize, gizlemenize ve tekrarlamanıza olanak tanıyan kontrol akışı bloklarını destekler.

## `@if`, `@else if` ve `@else` ile içeriği koşullu gösterme

`@if` bloğu, koşul ifadesi truthy olduğunda içeriğini koşullu olarak görüntüler:

```html
@if (a > b) {
  <p>{{ a }} is greater than {{ b }}</p>
}
```

Alternatif içerik görüntülemek istiyorsanız, istediğiniz sayıda `@else if` bloğu ve tek bir `@else` bloğu sağlayarak bunu yapabilirsiniz.

```html
@if (a > b) {
  {{ a }} is greater than {{ b }}
} @else if (b > a) {
  {{ a }} is less than {{ b }}
} @else {
  {{ a }} is equal to {{ b }}
}
```

### Koşul ifadesinin sonucuna referans verme

`@if` koşulu, koşul ifadesinin sonucunu blok içinde yeniden kullanmak üzere bir değişkene kaydetmeyi destekler.

```html
@if (user.profile.settings.startDate; as startDate) {
  {{ startDate }}
}
```

Bu, şablon içinde okunması ve bakımı daha kolay olacak uzun ifadelere referans vermek için faydalı olabilir.

## `@for` bloğu ile içeriği tekrarlama

`@for` bloğu, bir koleksiyon üzerinde döngü yaparak bir bloğun içeriğini tekrar tekrar işler. Koleksiyon herhangi bir JavaScript [iterable](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) olabilir, ancak Angular'ın `Array` değerleri için ek performans optimizasyonları vardır.

Tipik bir `@for` döngüsü şu şekilde görünür:

```html
@for (item of items; track item.id) {
  {{ item.name }}
}
```

Angular'ın `@for` bloğu, JavaScript'in `continue` veya `break` gibi akış değiştiren ifadelerini desteklemez.

### `@for` bloklarında `track` neden önemlidir?

`track` ifadesi, Angular'ın verileriniz ile sayfadaki DOM düğümleri arasında bir ilişki sürdürmesini sağlar. Bu, veriler değiştiğinde Angular'ın minimum gerekli DOM işlemlerini yürüttüğü optimize edilmiş performans sağlar.

Track'i etkili bir şekilde kullanmak, veri koleksiyonları üzerinde döngü yaparken uygulamanızın işleme performansını önemli ölçüde iyileştirebilir.

`track` ifadesinde her öğeyi benzersiz şekilde tanımlayan bir özellik seçin. Veri modeliniz benzersiz bir tanımlayıcı özellik içeriyorsa (genellikle `id` veya `uuid`), bu değeri kullanın. Verilerinizde böyle bir alan yoksa, bir tane eklemeyi ciddi olarak düşünün.

Hiç değişmeyen statik koleksiyonlar için, Angular'a her öğeyi koleksiyondaki indeksine göre izlemesini söylemek için `$index` kullanabilirsiniz.

Başka bir seçenek yoksa, öğenin kendisini izleme anahtarı olarak kullanabilirsiniz. Bu, Angular'a öğeyi üçlü eşittir operatörü (`===`) kullanarak referans kimliği ile izlemesini söyler. Mümkün olduğunda bu seçenekten kaçının çünkü önemli ölçüde daha yavaş işleme güncellemelerine yol açabilir; zira Angular'ın hangi veri öğesinin hangi DOM düğümüne karşılık geldiğini eşleştirme yolu yoktur.

```html
@for (item of items; track item) {
  {{ item.name }}
}
```

NOTE: `*ngFor`'dan farklı olarak, `@for` bloğu görünüm yeniden kullanımına öncelik verir. İzlenen bir özellik değişse bile nesne referansı aynı kalırsa, Angular tüm elemanı yok edip yeniden oluşturmak yerine görünümün bağlamalarını (bileşen girişleri dahil) günceller.

### `@for` bloklarında bağlamsal değişkenler

`@for` blokları içinde her zaman kullanılabilir olan birkaç özel değişken vardır:

| Değişken | Anlamı                                     |
| -------- | ------------------------------------------ |
| `$count` | Yinelenen koleksiyondaki öğe sayısı        |
| `$index` | Mevcut satırın indeksi                     |
| `$first` | Mevcut satırın ilk satır olup olmadığı     |
| `$last`  | Mevcut satırın son satır olup olmadığı     |
| `$even`  | Mevcut satır indeksinin çift olup olmadığı |
| `$odd`   | Mevcut satır indeksinin tek olup olmadığı  |

Bu değişkenler her zaman bu adlarla kullanılabilir, ancak bir `let` segmenti ile takma ad verilebilir:

```html
@for (item of items; track item.id; let idx = $index, e = $even) {
  <p>Item #{{ idx }}: {{ item.name }}</p>
}
```

Takma ad verme, iç içe `@for` bloklarında faydalıdır ve bir iç `@for` bloğundan dış `@for` bloğunun değişkenlerini okumanıza olanak tanır.

### `@empty` bloğu ile `@for` blokları için yedek sağlama

`@for` blok içeriğinin hemen ardından isteğe bağlı olarak bir `@empty` bölümü ekleyebilirsiniz. `@empty` bloğunun içeriği, öğe olmadığında görüntülenir:

```html
@for (item of items; track item.name) {
  <li>{{ item.name }}</li>
} @empty {
  <li>There are no items.</li>
}
```

## `@switch` bloğu ile içeriği koşullu gösterme

`@if` bloğu çoğu senaryo için harika olsa da, `@switch` bloğu verileri koşullu olarak işlemek için alternatif bir sözdizimi sağlar. Sözdizimi, JavaScript'in `switch` ifadesine yakından benzer.

```html
@switch (userPermissions) {
  @case ('admin') {
    <app-admin-dashboard />
  }
  @case ('reviewer')
  @case ('editor') {
    <app-editor-dashboard />
  }
  @default {
    <app-viewer-dashboard />
  }
}
```

Koşul ifadesinin değeri, case ifadesi ile üçlü eşittir (`===`) operatörü kullanılarak karşılaştırılır.

**`@switch` geçişli değildir (fallthrough)**, bu nedenle blokta `break` veya `return` ifadesine eşdeğer bir şeye ihtiyacınız yoktur.

Ard arda `@case` ifadeleri yazarak tek bir blok için birden fazla koşul belirtebilirsiniz.

İsteğe bağlı olarak bir `@default` bloğu ekleyebilirsiniz. `@default` bloğunun içeriği, önceki case ifadelerinin hiçbiri switch değerine eşleşmediğinde görüntülenir.

Hiçbir `@case` ifadeye eşleşmezse ve `@default` bloğu yoksa hiçbir şey gösterilmez.

### Kapsamlı tür denetimi

`@switch`, kapsamlı tür denetimini destekler ve Angular'ın derleme zamanında bir birleştirme türünün tüm olası değerlerinin ele alındığını doğrulamasına olanak tanır.

`@default never;` kullanarak, kalan hiçbir durumun olmaması gerektiğini açıkça belirtirsiniz. Birleştirme türü daha sonra genişletilirse ve yeni bir durum bir @case tarafından karşılanmazsa, Angular'ın şablon tür denetleyicisi bir hata bildirir ve eksik dalları erken yakalamanıza yardımcı olur.

```html
@Component({
  template: `
    @switch (state) {
      @case ('loggedOut') {
        <button>Login</button>
      }

@case ('loggedIn') {
        <p>Welcome back!</p>
      }

@default never; // 'loading' @case'i eksik olduğu için hata verir
    }
  `,
})
export class AppComponent {
  state: 'loggedOut' | 'loading' | 'loggedIn' = 'loggedOut';
}
```

Anahtarlanan ifade bir birleşim içinde iç içe yer aldığında, bütünlük denetimi için kontrol edilecek ifadeyi açıkça belirtmeniz gerekir.

```typescript
@Component({
  template: `
    @switch (state.mode) {
      @case ('show') {
        {{ state.menu }};
      }
      @case ('hide') {}
      @default never;
    }
  `,
})
export class App {
  state!: {mode: 'hide'} | {mode: 'show'; menu: number};
}
```
# Şablonlarda değişkenler

Angular'ın şablonlarda iki tür değişken bildirimi vardır: yerel şablon değişkenleri ve şablon referans değişkenleri.

HELPFUL: Bu kılavuzda "şablon", HTML şablon dosyasının tamamı anlamına gelmez. Yalnızca dosya içindeki belirli bir şablon yapısına veya ifadesine atıfta bulunur.

## `@let` ile yerel şablon değişkenleri

Angular'ın `@let` sözdizimi, JavaScript'in [`let` sözdizimine](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) benzer şekilde yerel bir değişken tanımlamanıza ve şablon genelinde yeniden kullanmanıza olanak tanır.

### `@let` kullanma

Değeri bir şablon ifadesinin sonucuna dayanan bir değişken bildirmek için `@let` kullanın. Angular, değişkenin değerini verilen ifadeyle otomatik olarak güncel tutar, [bağlamalara](/guide/templates/binding) benzer şekilde.

```html
@let name = user.name;
@let greeting = 'Hello, ' + name;
@let data = data$ | async;
@let pi = 3.14159;
@let coordinates = {x: 50, y: 100};
@let longExpression =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
  'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
  'Ut enim ad minim veniam...';
```

Her `@let` bloğu tam olarak bir değişken bildirebilir. Aynı blokta virgül ile birden fazla değişken bildiremezsiniz.

### `@let` değerine referans verme

`@let` ile bir değişken bildirdikten sonra, aynı şablonda yeniden kullanabilirsiniz:

```html
@let user = user$ | async;

@if (user) {
  <h1>Hello, {{ user.name }}</h1>
  <user-avatar [photo]="user.photo" />

<ul>
    @for (snack of user.favoriteSnacks; track snack.id) {
      <li>{{ snack.name }}</li>
    }
  </ul>

<button (click)="update(user)">Update profile</button>
}
```

### Atanabilirlik

`@let` ile JavaScript'in `let`'i arasındaki temel fark, `@let`'in bildirimden sonra yeniden atanamayacak olmasıdır. Ancak Angular, değişkenin değerini verilen ifadeyle otomatik olarak güncel tutar.

```html
@let value = 1;

<button (click)="value = value + 1">Increment the value</button>
```

### Değişken kapsamı

`@let` bildirimleri mevcut görünüme ve alt görünümlerine kapsamlıdır. Angular, bileşen sınırlarında ve kontrol akışı blokları, `@defer` blokları veya yapısal direktifler gibi dinamik içerik barındırabilecek her yerde yeni bir görünüm oluşturur.

`@let` bildirimleri yukarı çekilmez (hoisted), bu nedenle üst görünümler veya kardeşler tarafından **erişilemez**:

```html
@let topLevel = value;

<div>
  @let insideDiv = value;
</div>

{{ topLevel }}

{{ insideDiv }}

@if (condition) {
  
  {{ topLevel + insideDiv }}

@let nested = value;

@if (condition) {
    
    {{ topLevel + insideDiv + nested }}
  }
}

{{ nested }}
```

### Tam sözdizimi

`@let` sözdizimi resmi olarak şu şekilde tanımlanır:

- `@let` anahtar sözcüğü.
- Ardından yeni satırlar içermeyen bir veya daha fazla boşluk.
- Ardından geçerli bir JavaScript adı ve sıfır veya daha fazla boşluk.
- Ardından `=` simgesi ve sıfır veya daha fazla boşluk.
- Ardından çok satırlı olabilen bir Angular ifadesi.
- `;` simgesi ile sonlandırılır.

## Şablon referans değişkenleri

Şablon referans değişkenleri, şablonunuzdaki bir elemandan bir değere referans veren bir değişken bildirmenin bir yolunu sağlar.

Bir şablon referans değişkeni aşağıdakilere referans verebilir:

- şablon içindeki bir DOM elemanı ([özel elemanlar](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) dahil)
- bir Angular bileşeni veya direktifi
- bir [ng-template](/api/core/ng-template)'den bir [TemplateRef](/api/core/TemplateRef)

Şablon referans değişkenlerini, şablonun bir bölümündeki bilgiyi aynı şablonun başka bir bölümünde okumak için kullanabilirsiniz.

### Şablon referans değişkeni bildirme

Şablondaki bir eleman üzerinde, diyez (`#`) karakteri ile başlayan ve ardından değişken adının geldiği bir nitelik ekleyerek bir değişken bildirebilirsiniz.

```html

<input #taskInput placeholder="Enter task name" />
```

### Şablon referans değişkenlerine değer atama

Angular, değişkenin bildirildiği elemana göre şablon değişkenlerine bir değer atar.

Değişkeni bir Angular bileşeni üzerinde bildirirseniz, değişken bileşen örneğine referans verir.

```html

<my-datepicker #startDate />
```

Değişkeni bir `<ng-template>` elemanı üzerinde bildirirseniz, değişken şablonu temsil eden bir TemplateRef örneğine referans verir. Daha fazla bilgi için [Angular yıldız işareti \* sözdizimini nasıl kullanır](/guide/directives/structural-directives#yapısal-direktif-kısaltılmış-sözdizimi) bölümüne [Yapısal Direktifler](/guide/directives/structural-directives) içinde bakın.

```html

<ng-template #myFragment>
  <p>This is a template fragment</p>
</ng-template>
```

Değişkeni görünümün başka herhangi bir eleman üzerinde bildirirseniz, değişken `HTMLElement` örneğine referans verir.

```html

<input #taskInput placeholder="Enter task name" />
```

#### Angular direktifine referans atama

Angular direktifleri, direktifin şablonda referans verilebileceği bir ad tanımlayan `exportAs` özelliğine sahip olabilir:

```typescript
@Directive({
  selector: '[dropZone]',
  exportAs: 'dropZone',
})
export class DropZone {
  /* ... */
}
```

Bir eleman üzerinde şablon değişkeni bildirdiğinizde, bu `exportAs` adını belirterek değişkene bir direktif örneği atayabilirsiniz:

```html

<section dropZone #firstZone="dropZone">...</section>
```

`exportAs` adı belirtmeyen bir direktife referans veremezsiniz.

### Sorgularla şablon referans değişkenlerini kullanma

Şablon değişkenlerini aynı şablonun başka bir bölümündeki değerleri okumak için kullanmanın yanı sıra, bu değişken bildirim stilini [bileşen ve direktif sorguları](/guide/components/queries) için bir elemanı "işaretlemek" amacıyla da kullanabilirsiniz.

Bir şablonda belirli bir elemanı sorgulamak istediğinizde, o eleman üzerinde bir şablon değişkeni bildirebilir ve ardından değişken adına göre elemanı sorgulayabilirsiniz.

```html
<input #description value="Original description" />
```

```typescript
@Component({
  /* ... */,
  template: `<input #description value="Original description">`,
})
export class AppComponent {
  // Şablon değişken adına göre input elemanını sorgula.
  @ViewChild('description') input: ElementRef | undefined;
}
```

Sorgular hakkında daha fazla bilgi için [Sorgularla alt elemanlara referans verme](/guide/components/queries) bölümüne bakın.

### Şablon değişkeni kapsamı

JavaScript veya TypeScript kodundaki değişkenler gibi, şablon değişkenleri de onları bildiren şablona kapsamlıdır.

Benzer şekilde, [Yapısal direktifler](guide/directives/structural-directives) veya `<ng-template>` bildirimleri, tıpkı JavaScript'in `if` ve `for` gibi kontrol akışı ifadelerinin yeni sözcüksel kapsamlar oluşturması gibi, yeni bir iç içe şablon kapsamı oluşturur. Bu yapısal direktiflerden birinin içindeki şablon değişkenlerine sınırlarının dışından erişemezsiniz.

HELPFUL: Çalışma zamanı değerinin öngörülebilir kalması için bir değişkeni şablonda yalnızca bir kez tanımlayın.

#### İç içe bir şablonda erişme

İç şablon, dış şablonun tanımladığı şablon değişkenlerine erişebilir.

Aşağıdaki örnekte, `<input>` içindeki metni değiştirmek `<span>` içindeki değeri değiştirir; çünkü Angular değişiklikleri `ref1` şablon değişkeni üzerinden anında günceller.

```html
<input #ref1 type="text" [(ngModel)]="firstExample" />

<span *ngIf="true">Value: {{ ref1.value }}</span>
```

Bu durumda, `<span>` üzerindeki `*ngIf`, üst kapsamından gelen `ref1` değişkenini içeren yeni bir şablon kapsamı oluşturur.

Ancak, bir alt kapsamdaki şablon değişkenine üst şablondan erişmek işe yaramaz:

```html
{avoid}
<input *ngIf="true" #ref2 type="text" [(ngModel)]="secondExample" />

<span>Value: {{ ref2?.value }}</span>
```

Burada `ref2`, `*ngIf` tarafından oluşturulan alt kapsamda bildirilmiştir ve üst şablondan erişilebilir değildir.
# `@defer` ile ertelenmiş yükleme

Ertelenebilir görünümler, `@defer` blokları olarak da bilinir, bir sayfanın ilk işlemesi için kesinlikle gerekli olmayan kodun yüklenmesini erteleyerek uygulamanızın ilk paket boyutunu azaltır. Bu genellikle daha hızlı bir ilk yükleme ve Core Web Vitals (CWV) iyileştirmesiyle sonuçlanır; özellikle Largest Contentful Paint (LCP) ve Time to First Byte (TTFB).

Bu özelliği kullanmak için şablonunuzun bir bölümünü bildirimsel olarak bir @defer bloğu ile sarmalayabilirsiniz:

```html
@defer {
  <large-component />
}
```

`@defer` bloğunun içindeki tüm bileşenler, direktifler ve pipe'lar için kod ayrı bir JavaScript dosyasına ayrılır ve yalnızca gerekli olduğunda, şablonun geri kalanı işlendikten sonra yüklenir.

Ertelenebilir görünümler; çeşitli tetikleyicileri, ön-yükleme seçeneklerini ve yer tutucu, yükleme ve hata durumu yönetimi için alt blokları destekler.

## Hangi bağımlılıklar ertelenir?

Bileşenler, direktifler, pipe'lar ve tüm bileşen CSS stilleri bir uygulama yüklenirken ertelenebilir.

Bir `@defer` bloğu içindeki bağımlılıkların ertelenmesi için iki koşulu karşılamaları gerekir:

1. **Bağımsız (standalone) olmalıdırlar.** Bağımsız olmayan bağımlılıklar ertelenemez ve `@defer` blokları içinde olsalar bile istekli (eagerly) olarak yüklenirler.
1. **Aynı dosya içinde `@defer` blokları dışında referans verilmemelidir.** `@defer` bloğu dışında veya ViewChild sorgularında referans verilirse, bağımlılıklar istekli olarak yüklenecektir.

`@defer` bloğunda kullanılan bileşenler, direktifler ve pipe'ların _geçişli_ bağımlılıkları kesinlikle bağımsız olmak zorunda değildir; geçişli bağımlılıklar hâlâ bir `NgModule`'da bildirilebilir ve ertelenmiş yüklemeye katılabilir.

Angular'ın derleyicisi, `@defer` bloğunda kullanılan her bileşen, direktif ve pipe için bir [dinamik import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) ifadesi üretir. Bloğun ana içeriği tüm import'lar çözüldükten sonra işlenir. Angular bu import'lar için belirli bir sıra garanti etmez.

## Ertelenmiş yüklemenin farklı aşamaları nasıl yönetilir

`@defer` blokları, ertelenmiş yükleme sürecinin farklı aşamalarını zarifçe yönetmenize olanak tanıyan birkaç alt bloğa sahiptir.

### `@defer`

Bu, tembel olarak yüklenen içerik bölümünü tanımlayan birincil bloktur. Başlangıçta işlenmez - ertelenmiş içerik, belirtilen [tetikleyici](#tetikleyicilerle-ertelenmiş-içerik-yüklemeyi-kontrol-etme) oluştuğunda veya `when` koşulu karşılandığında yüklenir ve işlenir.

Varsayılan olarak, bir `@defer` bloğu tarayıcı durumu [boşta](/guide/templates/defer#idle) olduğunda tetiklenir.

```html
@defer {
  <large-component />
}
```

### `@placeholder` ile yer tutucu içerik gösterme

Varsayılan olarak, defer blokları tetiklenmeden önce herhangi bir içerik işlemez.

`@placeholder`, `@defer` bloğu tetiklenmeden önce gösterilecek içeriği bildiren isteğe bağlı bir bloktur.

```html
@defer {
  <large-component />
} @placeholder {
  <p>Placeholder content</p>
}
```

İsteğe bağlı olsa da, belirli tetikleyiciler çalışabilmek için bir `@placeholder` veya bir [şablon referans değişkeni](/guide/templates/variables#şablon-referans-değişkenleri) bulunmasını gerektirebilir. Daha fazla bilgi için [Tetikleyiciler](#tetikleyicilerle-ertelenmiş-içerik-yüklemeyi-kontrol-etme) bölümüne bakın.

Angular, yükleme tamamlandığında yer tutucu içeriği ana içerikle değiştirir. Yer tutucu bölümünde düz HTML, bileşenler, direktifler ve pipe'lar dahil herhangi bir içerik kullanabilirsiniz. _Yer tutucu bloğunun bağımlılıkların istekli olarak yüklendiğini_ unutmayın.

`@placeholder` bloğu, yer tutucu içeriği ilk işlendikten sonra bu yer tutucunun gösterileceği `minimum` süre miktarını belirtmek için isteğe bağlı bir parametre kabul eder.

```html
@defer {
  <large-component />
} @placeholder (minimum 500ms) {
  <p>Placeholder content</p>
}
```

Bu `minimum` parametresi milisaniye (ms) veya saniye (s) cinsinden zaman artımlarıyla belirtilir. Ertelenmiş bağımlılıklar hızla getirildiğinde yer tutucu içeriğinin hızlı titremesini önlemek için bu parametreyi kullanabilirsiniz.

### `@loading` ile yükleme içeriği gösterme

`@loading` bloğu, ertelenmiş bağımlılıklar yüklenirken gösterilecek içeriği bildirmenize olanak tanıyan isteğe bağlı bir bloktur. Yükleme tetiklendiğinde `@placeholder` bloğunun yerini alır.

```html
@defer {
  <large-component />
} @loading {
  <img alt="loading..." src="loading.gif" />
} @placeholder {
  <p>Placeholder content</p>
}
```

Bağımlılıkları (`@placeholder`'a benzer şekilde) istekli olarak yüklenir.

`@loading` bloğu, ertelenmiş bağımlılıklar hızla getirildiğinde oluşabilecek içerik titremesini önlemeye yardımcı olmak için iki isteğe bağlı parametre kabul eder:

- `minimum` - bu yer tutucunun gösterileceği minimum süre miktarı
- `after` - yükleme şablonunu göstermeden önce yükleme başladıktan sonra bekleme süresi

```html
@defer {
  <large-component />
} @loading (after 100ms; minimum 1s) {
  <img alt="loading..." src="loading.gif" />
}
```

Her iki parametre de milisaniye (ms) veya saniye (s) cinsinden zaman artımlarıyla belirtilir. Ayrıca, her iki parametrenin zamanlayıcıları yükleme tetiklendikten hemen sonra başlar.

### Ertelenmiş yükleme başarısız olduğunda `@error` ile hata durumu gösterme

`@error` bloğu, ertelenmiş yükleme başarısız olursa görüntülenen isteğe bağlı bir bloktur. `@placeholder` ve `@loading`'e benzer şekilde, @error bloğunun bağımlılıkları istekli olarak yüklenir.

```html
@defer {
  <large-component />
} @error {
  <p>Failed to load large component.</p>
}
```

## Tetikleyicilerle ertelenmiş içerik yüklemeyi kontrol etme

Angular'ın ertelenmiş içeriği ne zaman yükleyip görüntüleyeceğini kontrol eden **tetikleyiciler** belirtebilirsiniz.

Bir `@defer` bloğu tetiklendiğinde, yer tutucu içeriği tembel olarak yüklenen içerikle değiştirir.

Birden fazla olay tetikleyicisi noktalı virgül (`;`) ile ayrılarak tanımlanabilir ve VEYA koşulları olarak değerlendirilir.

İki tür tetikleyici vardır: `on` ve `when`.

### `on`

`on`, `@defer` bloğunun ne zaman tetikleneceğine dair bir koşul belirtir.

Kullanılabilir tetikleyiciler aşağıdaki gibidir:

| Tetikleyici                   | Açıklama                                                                       |
| ----------------------------- | ------------------------------------------------------------------------------ |
| [`idle`](#idle)               | Tarayıcı boşta olduğunda tetiklenir. İsteğe bağlı bir zaman aşımını destekler. |
| [`viewport`](#viewport)       | Belirtilen içerik görünüm alanına girdiğinde tetiklenir                        |
| [`interaction`](#interaction) | Kullanıcı belirtilen elemanla etkileşime geçtiğinde tetiklenir                 |
| [`hover`](#hover)             | Fare belirtilen alanın üzerine geldiğinde tetiklenir                           |
| [`immediate`](#immediate)     | Ertelenmemiş içerik işlemeyi bitirdikten hemen sonra tetiklenir                |
| [`timer`](#timer)             | Belirli bir süreden sonra tetiklenir                                           |

#### `idle`

`idle` tetikleyicisi, tarayıcı requestIdleCallback'e dayalı olarak boşta durumuna ulaştığında ertelenmiş içeriği yükler. Bu, bir defer bloğunun varsayılan davranışıdır.

[`requestIdleCallback`](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback) fonksiyonuna geçirilen, milisaniye cinsinden isteğe bağlı bir zaman aşımı belirtebilirsiniz. Tarayıcı geri çağrımı yeterince çabuk zamanlamazsa, iş en geç belirtilen zaman aşımında çalışır.

```html

@defer {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}

@defer (on idle(500)) {
  <large-cmp />
}
```

##### `idle` davranışını özelleştirme

Kendi `IdleService` implementasyonunuzu sağlayıp uygulamanızın provider'larında `provideIdleServiceWith` ile kaydederek `idle` tetikleyicisini özelleştirebilirsiniz.

```ts
@Service()
class CustomIdleService implements IdleService {
  requestOnIdle(callback: (deadline?: IdleDeadline) => void, options?: IdleRequestOptions) {
    // Özel boşta zamanlama mantığı burada uygulanabilir.
  }

cancelOnIdle(id: number) {
    // Özel boşta iptali burada uygulanabilir.
  }
}

bootstrapApplication(App, {
  providers: [provideIdleServiceWith(CustomIdleService)],
});
```

#### `viewport`

`viewport` tetikleyicisi, belirtilen içerik [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) kullanılarak görünüm alanına girdiğinde ertelenmiş içeriği yükler. Gözlemlenen içerik `@placeholder` içeriği veya açık bir eleman referansı olabilir.

Varsayılan olarak, `@defer` yer tutucunun görünüm alanına girip girmediğini izler. Bu şekilde kullanılan yer tutucuların tek bir kök elemanı olmalıdır.

```html
@defer (on viewport) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

Alternatif olarak, `@defer` bloğuyla aynı şablonda bir [şablon referans değişkeni](/guide/templates/variables) belirterek görünüm alanına giriş için izlenen eleman olarak kullanabilirsiniz. Bu değişken, viewport tetikleyicisine parametre olarak geçirilir.

```html
<div #greeting>Hello!</div>
@defer (on viewport(greeting)) {
  <greetings-cmp />
}
```

`IntersectionObserver` seçeneklerini özelleştirmek istiyorsanız, `viewport` tetikleyicisi bir nesne literali geçirmeyi destekler. Literal, `root` hariç `IntersectionObserver`'ın ikinci parametresinden tüm özellikleri destekler. Nesne literali notasyonunu kullanırken, tetikleyicinizi `trigger` özelliğini kullanarak geçirmeniz gerekir.

```html
<div #greeting>Hello!</div>

@defer (on viewport({trigger: greeting, rootMargin: '100px', threshold: 0.5})) {
  <greetings-cmp />
}

@defer (on viewport({rootMargin: '100px', threshold: 0.5})) {
  <greetings-cmp />
} @placeholder {
  <div>Implied trigger</div>
}
```

#### `interaction`

`interaction` tetikleyicisi, kullanıcı belirtilen elemanla `click` veya `keydown` olayları aracılığıyla etkileşime geçtiğinde ertelenmiş içeriği yükler.

Varsayılan olarak, yer tutucu etkileşim elemanı olarak hareket eder. Bu şekilde kullanılan yer tutucuların tek bir kök elemanı olmalıdır.

```html
@defer (on interaction) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

Alternatif olarak, `@defer` bloğuyla aynı şablonda bir [şablon referans değişkeni](/guide/templates/variables) belirterek etkileşimler için izlenen eleman olarak kullanabilirsiniz. Bu değişken, viewport tetikleyicisine parametre olarak geçirilir.

```html
<div #greeting>Hello!</div>
@defer (on interaction(greeting)) {
  <greetings-cmp />
}
```

#### `hover`

`hover` tetikleyicisi, fare `mouseover` ve `focusin` olayları aracılığıyla tetiklenen alanın üzerine geldiğinde ertelenmiş içeriği yükler.

Varsayılan olarak, yer tutucu etkileşim elemanı olarak hareket eder. Bu şekilde kullanılan yer tutucuların tek bir kök elemanı olmalıdır.

```html
@defer (on hover) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

```html
<div #greeting>Hello!</div>
@defer (on hover(greeting)) {
  <greetings-cmp />
}
```

#### `immediate`

`immediate` tetikleyicisi, ertelenmiş içeriği hemen yükler. Bu, ertelenmiş bloğun diğer tüm ertelenmemiş içerik işlemeyi bitirdiğinde yüklendiği anlamına gelir.

```html
@defer (on immediate) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

#### `timer`

`timer` tetikleyicisi, belirtilen bir süreden sonra ertelenmiş içeriği yükler.

```html
@defer (on timer(500ms)) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

Süre parametresi milisaniye (`ms`) veya saniye (`s`) cinsinden belirtilmelidir.

### `when`

`when` tetikleyicisi özel bir koşul ifadesi kabul eder ve koşul truthy olduğunda ertelenmiş içeriği yükler.

```html
@defer (when condition) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

Bu tek seferlik bir işlemdir - `@defer` bloğu, koşul truthy olduktan sonra falsy bir değere dönüşse yer tutucuya geri dönmez.

## `prefetch` ile verileri ön-yükleme

Ertelenmiş içeriğin ne zaman gösterileceğini belirleyen bir koşul belirtmenin yanı sıra, isteğe bağlı olarak bir **ön-yükleme tetikleyicisi** belirtebilirsiniz. Bu tetikleyici, ertelenmiş içerik gösterilmeden önce `@defer` bloğuyla ilişkili JavaScript'i yüklemenize olanak tanır.

Ön-yükleme, bir kullanıcı bir defer bloğunu henüz görmemiş veya etkileşime geçmemiş olsa bile, yakında etkileşime geçebileceği kaynakları ön-yüklemeye başlamanız gibi daha gelişmiş davranışları etkinleştirir ve kaynakları daha hızlı kullanılabilir hale getirir.

Bir ön-yükleme tetikleyicisini, bloğun ana tetikleyicisine benzer şekilde ancak `prefetch` anahtar sözcüğü ile önekli olarak belirtebilirsiniz. Bloğun ana tetikleyicisi ve ön-yükleme tetikleyicisi noktalı virgül (`;`) karakteriyle ayrılır.

Aşağıdaki örnekte, tarayıcı boşta olduğunda ön-yükleme başlar ve bloğun içeriği yalnızca kullanıcı yer tutucu ile etkileşime geçtiğinde işlenir.

```html
@defer (on interaction; prefetch on idle) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}

@defer (on interaction; prefetch on idle(500)) {
  <large-cmp />
}
```

## `@defer` bloklarını test etme

Angular, `@defer` bloklarını test etme ve test sırasında farklı durumları tetikleme sürecini basitleştirmek için TestBed API'leri sağlar. Varsayılan olarak, testlerdeki `@defer` blokları gerçek bir uygulamadaki defer bloğunun davranacağı gibi oynatılır. Durumları manuel olarak adımlamak istiyorsanız, TestBed yapılandırmasında defer blok davranışını `Manual` olarak değiştirebilirsiniz.

```typescript
it('should render a defer block in different states', async () => {
  // defer blok davranışını manuel kontrol için "duraklatılmış" durumda başlatacak şekilde yapılandırır.
  TestBed.configureTestingModule({deferBlockBehavior: DeferBlockBehavior.Manual});
  @Component({
    // ...
    template: `
      @defer {
        <large-component />
      } @placeholder {
        Placeholder
      } @loading {
        Loading...
      }
    `,
  })
  class ExampleA {}
  // Bileşen fixture'ını oluştur.
  const componentFixture = TestBed.createComponent(ExampleA);
  // Tüm defer blok fixture'larının listesini al ve ilk bloğu seç.
  const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
  // Varsayılan olarak yer tutucu durumunu işler.
  expect(componentFixture.nativeElement.innerHTML).toContain('Placeholder');
  // Yükleme durumunu işle ve işlenmiş çıktıyı doğrula.
  await deferBlockFixture.render(DeferBlockState.Loading);
  expect(componentFixture.nativeElement.innerHTML).toContain('Loading');
  // Son durumu işle ve çıktıyı doğrula.
  await deferBlockFixture.render(DeferBlockState.Complete);
  expect(componentFixture.nativeElement.innerHTML).toContain('large works!');
});
```

## `@defer` `NgModule` ile çalışır mı?

`@defer` blokları hem bağımsız hem de NgModule tabanlı bileşenler, direktifler ve pipe'larla uyumludur. Ancak, **yalnızca bağımsız bileşenler, direktifler ve pipe'lar ertelenebilir**. NgModule tabanlı bağımlılıklar ertelenmez ve istekli olarak yüklenen pakete dahil edilir.

## `@defer` blokları ve Hot Module Reload (HMR) uyumluluğu

Hot Module Replacement (HMR) aktif olduğunda, tüm `@defer` blok parçaları, yapılandırılmış tetikleyicileri geçersiz kılarak istekli bir şekilde getirilir. Standart tetikleyici davranışını geri yüklemek için uygulamanızı `--no-hmr` bayrağı ile sunarak HMR'ı devre dışı bırakmanız gerekir.

## `@defer` sunucu taraflı işleme (SSR) ve statik site oluşturma (SSG) ile nasıl çalışır?

Varsayılan olarak, sunucuda bir uygulama işlenirken (SSR veya SSG kullanılarak), defer blokları her zaman `@placeholder`'larını işler (veya bir yer tutucu belirtilmemişse hiçbir şey işler) ve tetikleyiciler çalıştırılmaz. İstemci tarafında, `@placeholder`'ın içeriği hidrate edilir ve tetikleyiciler aktive edilir.

`@defer` bloklarının ana içeriğini sunucuda (hem SSR hem de SSG) işlemek için, [Artımlı Hidrasyon özelliğini](/guide/incremental-hydration) etkinleştirebilir ve gerekli bloklar için `hydrate` tetikleyicilerini yapılandırabilirsiniz.

## Barrel dosyaları ve lazy parçalar

`@defer` kullanıyor ancak derleme çıktınızda ayrı bir lazy parça görmüyorsanız, ertelenen bileşeni nasıl içe aktardığınızı kontrol edin. Bir barrel dosyası (`index.ts`) üzerinden içe aktarmak yaygın bir nedendir; paketleyiciler barrel'ı tek bir modül olarak görür ve tüm export'larını bir arada tutar, böylece bileşeniniz `@defer` kullanılsa bile ana pakete girer.

```typescript
// index.ts
export {HeavyComponent} from './heavy.component';
export {OtherComponent} from './other.component';
```

```typescript
// parent.component.ts
import {HeavyComponent} from './index'; // OtherComponent'i de getirir

@Component({
  imports: [HeavyComponent],
  template: `@defer {
    <heavy-component />
  }`,
})
export class ParentComponent {}
```

Çözüm basittir; doğrudan bileşenin kendi dosyasından içe aktarın:

```typescript
import {HeavyComponent} from './heavy.component';
```

Paketleyicinin bunu kendi parçasına ayırması ve tetikleyici çalıştığında lazy olarak yüklemesi için bu kadarı yeterlidir.

## Görünümleri erteleme için en iyi uygulamalar

### İç içe `@defer` blokları ile art arda yüklemelerden kaçınma

İç içe `@defer` bloklarınız olduğunda, aynı anda yüklemeyi önlemek için farklı tetikleyicilere sahip olmalıdırlar; aksi takdirde art arda isteklere neden olur ve sayfa yükleme performansını olumsuz etkileyebilir.

### Düzen kaymalarından kaçınma

İlk yüklemede kullanıcının görünüm alanında görünen bileşenleri ertelemekten kaçının. Bunu yapmak, toplam düzenleme kaymasında (CLS) artışa neden olarak Core Web Vitals'ı olumsuz etkileyebilir.

Bunun gerekli olması durumunda, içeriğin ilk sayfa işlemesi sırasında yüklenmesine neden olan `immediate`, `timer`, `viewport` ve özel `when` tetikleyicilerinden kaçının.

### Erişilebilirliği göz önünde bulundurma

`@defer` bloklarını kullanırken, ekran okuyucuları gibi yardımcı teknolojiler kullanan kullanıcılar üzerindeki etkiyi göz önünde bulundurun.
Ertelenmiş bir bölüme odaklanan ekran okuyucuları başlangıçta yer tutucu veya yükleme içeriğini okuyacak, ancak ertelenmiş içerik yüklendiğinde değişiklikleri duyuramayabilir.

Ertelenmiş içerik değişikliklerinin ekran okuyucularına duyurulmasını sağlamak için, `@defer` bloğunuzu canlı bölge içeren bir elemanla sarmalayabilirsiniz:

```html
<div aria-live="polite" aria-atomic="true">
  @defer (on timer(2000)) {
    <user-profile [user]="currentUser" />
  } @placeholder {
    Loading user profile...
  } @loading {
    Please wait...
  } @error {
    Failed to load profile
  }
</div>
```

Bu, geçişler (yer tutucu → yükleme → içerik/hata) meydana geldiğinde kullanıcıya değişikliklerin duyurulmasını sağlar.
# İfade Sözdizimi

Angular ifadeleri JavaScript'e dayalıdır, ancak bazı önemli yönlerden farklılık gösterir. Bu rehber, Angular ifadeleri ile standart JavaScript arasındaki benzerlikleri ve farklılıkları açıklar.

## Değer literalleri

Angular, JavaScript'ten bir [literal değer](https://developer.mozilla.org/en-US/docs/Glossary/Literal) alt kümesini destekler.

### Desteklenen değer literalleri

| Literal türü           | Örnek değerler                  |
| ---------------------- | ------------------------------- |
| String                 | `'Hello'`, `"World"`            |
| Boolean                | `true`, `false`                 |
| Number                 | `123`, `3.14`                   |
| Object                 | `{name: 'Alice'}`               |
| Array                  | `['Onion', 'Cheese', 'Garlic']` |
| null                   | `null`                          |
| RegExp                 | `/\d+/`                         |
| Template string        | `` `Hello ${name}` ``           |
| Tagged template string | `` tag`Hello ${name}` ``        |

### Desteklenmeyen değer literalleri

| Literal türü | Örnek değerler |
| ------------ | -------------- |
| BigInt       | `1n`           |

## Global değişkenler

Angular ifadeleri aşağıdaki [global değişkenleri](https://developer.mozilla.org/en-US/docs/Glossary/Global_object) destekler:

- [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)
- [$any](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)

Başka hiçbir JavaScript global değişkeni desteklenmez. Yaygın JavaScript global değişkenleri arasında `Number`, `Boolean`, `NaN`, `Infinity`, `parseInt` ve daha fazlası bulunur.

## Yerel değişkenler

Angular, belirli bağlamlarda ifadelerde kullanılmak üzere özel yerel değişkenleri otomatik olarak kullanılabilir hale getirir. Bu özel değişkenler her zaman dolar işareti karakteri (`$`) ile başlar.

Örneğin, `@for` blokları döngü hakkında bilgi içeren `$index` gibi birkaç yerel değişken sağlar.

## Hangi operatörler desteklenir?

### Desteklenen operatörler

Angular, standart JavaScript'ten aşağıdaki operatörleri destekler.

| Operatör                      | Örnek(ler)                                     |
| ----------------------------- | ---------------------------------------------- |
| Add / Concatenate             | `1 + 2`                                        |
| Subtract                      | `52 - 3`                                       |
| Multiply                      | `41 * 6`                                       |
| Divide                        | `20 / 4`                                       |
| Remainder (Modulo)            | `17 % 5`                                       |
| Exponentiation                | `10 ** 3`                                      |
| Parenthesis                   | `9 * (8 + 4)`                                  |
| Conditional (Ternary)         | `a > b ? true : false`                         |
| And (Logical)                 | `&&`                                           |
| Or (Logical)                  | `\|\|`                                         |
| Not (Logical)                 | `!`                                            |
| Nullish Coalescing            | `possiblyNullValue ?? 'default'`               |
| Comparison Operators          | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==`, `!=` |
| Unary Negation                | `-x`                                           |
| Unary Plus                    | `+y`                                           |
| Property Accessor             | `person['name']`                               |
| typeof                        | `typeof 42`                                    |
| void                          | `void 1`                                       |
| in                            | `'model' in car`                               |
| instanceof                    | `car instanceof Automobile`                    |
| Assignment                    | `a = b`                                        |
| Addition Assignment           | `a += b`                                       |
| Subtraction Assignment        | `a -= b`                                       |
| Multiplication Assignment     | `a *= b`                                       |
| Division Assignment           | `a /= b`                                       |
| Remainder Assignment          | `a %= b`                                       |
| Exponentiation Assignment     | `a **= b`                                      |
| Logical AND Assignment        | `a &&= b`                                      |
| Logical OR Assignment         | `a \|\|= b`                                    |
| Nullish Coalescing Assignment | `a ??= b`                                      |
| Spread in object literals     | `{...obj, foo: 'bar'}`                         |
| Spread in array literals      | `[...arr, 1, 2, 3]`                            |
| Rest in function calls        | `fn(...args)`                                  |

Angular ifadeleri ayrıca aşağıdaki standart dışı operatörleri de destekler:

| Operatör                        | Örnek(ler)                     |
| ------------------------------- | ------------------------------ |
| [Pipe](/guide/templates/pipes)  | `{{ total \| currency }}`      |
| Optional chaining\*             | `someObj.someProp?.nestedProp` |
| Non-null assertion (TypeScript) | `someObj!.someProp`            |

NOTE: Optional chaining, standart JavaScript sürümünden farklı davranır; Angular'ın optional chaining operatörünün sol tarafı `null` veya `undefined` ise, `undefined` yerine `null` döndürür.

### Desteklenmeyen operatörler

| Operatör              | Örnek(ler)                        |
| --------------------- | --------------------------------- |
| All bitwise operators | `&`, `&=`, `~`, `\|=`, `^=`, etc. |
| Object destructuring  | `const { name } = person`         |
| Array destructuring   | `const [firstItem] = items`       |
| Comma operator        | `x = (x++, x)`                    |
| new                   | `new Car()`                       |

## İfadeler için sözcüksel bağlam

Angular ifadeleri, bileşen sınıfının bağlamı içinde ve ayrıca ilgili [şablon değişkenleri](/guide/templates/variables), yerel değişkenler ve global değişkenler içinde değerlendirilir.

Bileşen sınıf üyelerine referans verirken `this` her zaman ima edilir. Ancak, bir şablon aynı adla bir [şablon değişkeni](guide/templates/variables) bildirirse, değişken o üyeyi gölgeler. Bu tür bir sınıf üyesine belirsizlik olmadan referans vermek için açıkça `this.` kullanabilirsiniz. Bu, bir sınıf üyesini gölgeleyen bir `@let` bildirimi oluştururken, örneğin signal daraltma amaçları için faydalı olabilir.

## Bildirimler

Genel olarak, Angular ifadelerinde bildirimler desteklenmez. Bunlar arasında şu durumlar yer alır ancak bunlarla sınırlı değildir:

| Bildirimler     | Örnek(ler)                                  |
| --------------- | ------------------------------------------- |
| Variables       | `let label = 'abc'`, `const item = 'apple'` |
| Functions       | `function myCustomFunction() { }`           |
| Arrow Functions | `() => { }`                                 |
| Classes         | `class Rectangle { }`                       |

# Olay dinleyici ifadeleri

Olay işleyicileri ifadeler değil **ifadeler (statements)** dir. Angular ifadelerinin tüm sözdizimini desteklemelerine rağmen, iki temel fark vardır:

1. İfadeler atama operatörlerini **destekler** (ancak yapısal atama işlemlerini desteklemez)
1. İfadeler pipe'ları **desteklemez**
# Nitelik direktifleri

Nitelik direktifleri ile DOM elemanlarının ve Angular bileşenlerinin görünümünü veya davranışını değiştirin.

## Bir nitelik direktifi oluşturma

Bu bölüm, ana elemanın arka plan rengini sarıya ayarlayan bir vurgulama direktifi oluşturma sürecinde size rehberlik eder.

1. Bir direktif oluşturmak için [`ng generate directive`](tools/cli/schematics) CLI komutunu kullanın.

```shell
ng generate directive highlight
   ```

CLI, `src/app/highlight.directive.ts` ve ilgili test dosyası `src/app/highlight.directive.spec.ts`'i oluşturur.

```typescript
import {Directive} from '@angular/core';

@Directive({
     selector: '[appHighlight]',
   })
   export class HighlightDirective {}
   ```

`@Directive()` dekoratörünün yapılandırma özelliği, direktifin CSS nitelik seçicisini, `[appHighlight]`'ı belirtir.

1. `@angular/core`'dan `ElementRef` ve `inject`'i içe aktarın.
   `ElementRef`, `nativeElement` özelliği aracılığıyla ana DOM elemanına doğrudan erişim sağlar.

1. `appHighlight`'ı uyguladığınız eleman olan ana DOM elemanına bir referans elde etmek için [`inject`](guide/di)'i kullanın.

1. `HighlightDirective` sınıfına arka planı sarıya ayarlayan mantık ekleyin.

<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.1.ts"/>

IMPORTANT: Direktifler ad alanlarını _desteklemez_.

```html
{avoid}
<p app:Highlight>This is invalid</p>
```

## Bir nitelik direktifi uygulama

`HighlightDirective`'i kullanmak için, HTML şablonuna direktifi nitelik olarak içeren bir `<p>` elemanı ekleyin.

<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" region="applied"/>

Angular, `HighlightDirective` sınıfının bir örneğini oluşturur; bu sınıf `<p>` elemanına bir referans elde etmek ve arka plan stilini sarıya ayarlamak için `inject(ElementRef)`'i kullanır.

## Kullanıcı olaylarını işleme

Bu bölüm, kullanıcının fareyi elemanın içine veya dışına getirdiğini algılamayı ve vurgulama rengini ayarlayarak veya kaldırarak yanıt vermeyi gösterir.

1. `@Directive()` dekoratöründeki `host` özelliğini kullanarak ana olay bağlamalarını yapılandırın.

<docs-code header="src/app/highlight.directive.ts (decorator)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="decorator"/>

1. İki olay işleyici yöntemi ekleyin ve `host` özelliği aracılığıyla ana eleman olaylarını bunlara eşleyin.

<docs-code header="highlight.directive.ts (mouse-methods)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="mouse-methods"/>

Bir nitelik direktifini barındıran DOM elemanının (bu durumda `<p>`) olaylarına, direktifin [`host` özelliğinde](guide/components/host-elements#host-elemanına-bağlama) olay dinleyicileri yapılandırarak abone olun.

HELPFUL: İşleyiciler, ana DOM elemanı `el` üzerinde rengi ayarlayan bir yardımcı yöntem olan `highlight()`'a delege eder.

Tamamlanmış direktif aşağıdaki gibidir:

<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>

İşaretçi paragraf elemanının üzerine geldiğinde arka plan rengi görünür ve işaretçi uzaklaştığında kaybolur.

## Bir nitelik direktifine değer geçirme

Bu bölüm, `HighlightDirective`'i uygularken vurgulama rengini ayarlama sürecinde size rehberlik eder.

1. `highlight.directive.ts`'de `@angular/core`'dan `input`'u içe aktarın.

<docs-code header="highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="imports"/>

1. Bir `appHighlight` `input` özelliği ekleyin.

<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="input"/>

`input()` fonksiyonu, direktifin `appHighlight` özelliğini bağlama için kullanılabilir kılan meta verileri sınıfa ekler.

1. `app.component.ts`'de `AppComponent`'e bir `color` özelliği ekleyin.

<docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" region="class"/>

1. Direktifi ve rengi aynı anda uygulamak için, `appHighlight` direktif seçicisi ile özellik bağlaması kullanın ve `color`'a eşitleyin.

<docs-code header="app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="color"/>

`[appHighlight]` nitelik bağlaması iki görevi yerine getirir:
   - Vurgulama direktifini `<p>` elemanına uygular
   - Direktifin vurgulama rengini bir özellik bağlaması ile ayarlar

### Kullanıcı girişiyle değer ayarlama

Bu bölüm, renk seçiminizi `appHighlight` direktifine bağlamak için radyo düğmeleri ekleme konusunda size rehberlik eder.

1. Aşağıdaki gibi bir renk seçmek için `app.component.html`'e işaretleme ekleyin:

<docs-code header="app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="v2"/>

2. `AppComponent.color`'ı başlangıç değeri olmayacak şekilde değiştirin.

<docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" region="class"/>

3. `highlight.directive.ts`'de, `onMouseEnter` yöntemini önce `appHighlight` ile vurgulamayı deneyen ve `appHighlight` `undefined` ise `red`'e geri dönen şekilde düzenleyin.
   <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="mouse-enter"/>

4. Kullanıcının rengi radyo düğmeleriyle seçebildiğini doğrulamak için uygulamanızı sunun.

## İkinci bir özelliğe bağlama

Bu bölüm, geliştiricinin varsayılan rengi ayarlayabilmesi için uygulamanızı yapılandırma konusunda size rehberlik eder.

1. `HighlightDirective`'e `defaultColor` adlı ikinci bir `input()` özelliği ekleyin.

<docs-code header="highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="defaultColor"/>

2. Direktifin `onMouseEnter` yöntemini, önce `appHighlight` ile, sonra `defaultColor` ile vurgulamayı deneyen ve her iki özellik de `undefined` ise `red`'e geri dönen şekilde düzenleyin.

<docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="mouse-enter"/>

3. `AppComponent.color`'a bağlanmak ve varsayılan renk olarak "violet" kullanmak için aşağıdaki HTML'i ekleyin.
   Bu durumda, `defaultColor` bağlaması köşeli parantez `[]` kullanmaz çünkü değer dinamik bir ifade değil statik bir string'dir.

<docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="defaultColor"/>

Bileşenlerde olduğu gibi, bir ana elemana birden fazla direktif özellik bağlaması ekleyebilirsiniz.

Varsayılan renk bağlaması yoksa varsayılan renk kırmızıdır.
Kullanıcı bir renk seçtiğinde seçilen renk aktif vurgulama rengi olur.

## `NgNonBindable` ile Angular işlemesini devre dışı bırakma

Tarayıcıda ifade değerlendirmesini önlemek için ana elemana `ngNonBindable` ekleyin.
`ngNonBindable`, şablonlardaki interpolasyonu, direktifleri ve bağlamayı devre dışı bırakır.

Aşağıdaki örnekte, `{{ 1 + 1 }}` ifadesi kod editörünüzdeki gibi render edilir ve `2` görüntülemez.

<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable"/>

`ngNonBindable`'ı bir elemana uygulamak, o elemanın çocuk elemanları için bağlamayı durdurur.
Ancak, `ngNonBindable` yine de `ngNonBindable` uyguladığınız eleman üzerinde direktiflerin çalışmasına izin verir.
Aşağıdaki örnekte, `appHighlight` direktifi hala aktiftir ancak Angular `{{ 1 + 1 }}` ifadesini değerlendirmez.

<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable-with-directive"/>

`ngNonBindable`'ı bir üst elemana uygularsanız, Angular elemanın çocukları için özellik bağlama veya olay bağlama gibi her türlü interpolasyonu ve bağlamayı devre dışı bırakır.
# Yapısal direktifler

Yapısal direktifler, bir `<ng-template>` elemanına uygulanan ve o `<ng-template>`'in içeriğini koşullu veya tekrarlı olarak render eden direktiflerdir.

## Örnek kullanım durumu

Bu kılavuzda, belirli bir veri kaynağından veri getiren ve bu veri mevcut olduğunda şablonunu render eden bir yapısal direktif oluşturacaksınız. Bu direktif, SQL anahtar kelimesi `SELECT`'ten sonra `SelectDirective` olarak adlandırılır ve `[select]` nitelik seçicisi ile eşleştirilir.

`SelectDirective`, kullanılacak veri kaynağını adlandıran bir girdiye sahip olacaktır ve buna `selectFrom` diyeceksiniz. Bu girdi için `select` öneki, [kısaltılmış sözdizimi](#yapısal-direktif-kısaltılmış-sözdizimi) açısından önemlidir. Direktif, seçilen veriyi sağlayan bir şablon bağlamı ile `<ng-template>`'ini örneklendirecektir.

Aşağıda, bu direktifin doğrudan bir `<ng-template>` üzerinde kullanılmasına bir örnek verilmiştir:

```html
<ng-template select let-data [selectFrom]="source">
  <p>The data is: {{ data }}</p>
</ng-template>
```

Yapısal direktif, verinin kullanılabilir olmasını bekleyebilir ve ardından `<ng-template>`'ini render edebilir.

HELPFUL: Angular'ın `<ng-template>` elemanının varsayılan olarak hiçbir şey render etmeyen bir şablon tanımladığını unutmayın; elemanları yapısal bir direktif uygulamadan yalnızca bir `<ng-template>` içine sararsanız, bu elemanlar render edilmez.

Daha fazla bilgi için [ng-template API](api/core/ng-template) belgelerine bakın.

## Yapısal direktif kısaltılmış sözdizimi

Angular, açıkça bir `<ng-template>` elemanı yazmak gereğinden kaçınan yapısal direktifler için kısaltılmış sözdizimini destekler.

Yapısal direktifler, direktif nitelik seçicisinin önüne yıldız işareti (`*`) eklenerek doğrudan bir elemana uygulanabilir, örneğin `*select`. Angular, bir yapısal direktifin önündeki yıldız işaretini, direktifi barındıran ve elemanı ile alt öğelerini çevreleyen bir `<ng-template>`'e dönüştürür.

Bunu `SelectDirective` ile aşağıdaki gibi kullanabilirsiniz:

```html
<p *select="let data; from: source">The data is: {{ data }}</p>
```

Bu örnek, bazen _mikrosözdizimi_ olarak adlandırılan yapısal direktif kısaltılmış sözdiziminin esnekliğini gösterir.

Bu şekilde kullanıldığında, `<ng-template>`'e yalnızca yapısal direktif ve bağlamaları uygulanır. `<p>` etiketindeki diğer nitelikler veya bağlamalar olduğu gibi bırakılır. Örneğin, bu iki form eşdeğerdir:

```html

<p class="data-view" *select="let data; from: source">The data is: {{ data }}</p>

<ng-template select let-data [selectFrom]="source">
  <p class="data-view">The data is: {{ data }}</p>
</ng-template>
```

Kısaltılmış sözdizimi bir dizi kural aracılığıyla genişletilir. Daha kapsamlı bir [gramer](#yapısal-direktif-sözdizimi-referansı) aşağıda tanımlanmıştır, ancak yukarıdaki örnekte bu dönüşüm şu şekilde açıklanabilir:

`*select` ifadesinin ilk kısmı `let data`'dır ve bir şablon değişkeni `data` bildirir. Ardından bir atama gelmediği için, şablon değişkeni şablon bağlam özelliği `$implicit`'e bağlanır.

Sözdiziminin ikinci parçası, `from source` anahtar-ifade çiftidir. `from` bir bağlama anahtarıdır ve `source` normal bir şablon ifadesidir. Bağlama anahtarları, PascalCase'e dönüştürülerek ve yapısal direktif seçicisi eklenerek özelliklere eşlenir. `from` anahtarı `selectFrom`'a eşlenir ve ardından `source` ifadesine bağlanır. Bu nedenle birçok yapısal direktifin, yapısal direktifin seçicisi ile ön eklenmiş girdileri olacaktır.

## Her eleman için tek bir yapısal direktif

Kısaltılmış sözdizimini kullanırken her elemana yalnızca bir yapısal direktif uygulayabilirsiniz. Bunun nedeni, o direktifin açıldığı yalnızca bir `<ng-template>` elemanı olmasıdır. Birden fazla direktif, birden fazla iç içe `<ng-template>` gerektirir ve hangi direktifin önce olması gerektiği belirsizdir. Birden fazla yapısal direktifin aynı fiziksel DOM elemanı veya bileşen etrafında uygulanması gerektiğinde, kullanıcının iç içe yapıyı tanımlamasına olanak tanıyan sarma katmanları oluşturmak için `<ng-container>` kullanılabilir.

## Yapısal direktif oluşturma

Bu bölüm, `SelectDirective`'i oluşturma sürecinde size rehberlik eder.

<docs-workflow>
<docs-step title="Direktifi oluşturma">
Angular CLI'yi kullanarak, `select`'in direktifin adı olduğu aşağıdaki komutu çalıştırın:

```shell
ng generate directive select
```

Angular, direktif sınıfını oluşturur ve bir şablondaki direktifi tanımlayan CSS seçicisini `[select]` belirtir.
</docs-step>
<docs-step title="Direktifi yapısal yapma">
`TemplateRef`, `ViewContainerRef` ve `input`'u içe aktarın. `TemplateRef` ve `ViewContainerRef`'i direktife özel özellikler olarak enjekte edin.

```ts
import {Directive, TemplateRef, ViewContainerRef, inject, input} from '@angular/core';

export interface DataSource<T> {
  load(): Promise<T>;
}

@Directive({
  selector: '[select]',
})
export class SelectDirective {
  private templateRef = inject(TemplateRef);
  private viewContainerRef = inject(ViewContainerRef);
}
```

</docs-step>
<docs-step title="'selectFrom' girdisini ekleme">
Bir `selectFrom` `input()` özelliği ekleyin.

```ts
export class SelectDirective {
  // ...
  selectFrom = input.required<DataSource<unknown>>();
}
```

</docs-step>
<docs-step title="İş mantığını ekleme">
`SelectDirective` artık girdisiyle bir yapısal direktif olarak iskelet haline getirildiğine göre, şimdi veriyi getirmek ve şablonu onunla render etmek için mantığı ekleyebilirsiniz:

```ts
export class SelectDirective {
  // ...
  async ngOnInit() {
    const data = await this.selectFrom().load();
    this.viewContainerRef.createEmbeddedView(this.templateRef, {
      // `$implicit` anahtarı aracılığıyla veriyi içeren bir bağlam nesnesiyle
      // gömülü görünümü oluşturun.
      $implicit: data,
    });
  }
}
```

</docs-step>
</docs-workflow>

Hepsi bu - `SelectDirective` çalışır durumda. Bir sonraki adım [şablon tür denetimi desteği eklemek](#direktifin-bağlamını-türlendirme) olabilir.

## Yapısal direktif sözdizimi referansı

Kendi yapısal direktiflerinizi yazarken aşağıdaki sözdizimini kullanın:

```ts
{hideCopy}
_: prefix = "( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )_";
```

Aşağıdaki desenler, yapısal direktif gramerinin her bölümünü tanımlar:

```ts
as = :export "as" :local ";"?
keyExp = :key ":"? :expression ("as" :local)? ";"?
let = "let" :local "=" :export ";"?
```

### Angular kısaltılmış sözdizimini nasıl çevirir

Angular, yapısal direktif kısaltılmış sözdizimini normal bağlama sözdizimine şu şekilde çevirir:

### Kısaltılmış sözdizimi örnekleri

Aşağıdaki tablo kısaltılmış örnekler sağlar:

| Shorthand                                                             | How Angular interprets the syntax                                                                             |
| :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
| `*myDir="let item of [1,2,3]"`                                        | `<ng-template myDir let-item [myDirOf]="[1, 2, 3]">`                                                          |
| `*myDir="let item of [1,2,3] as items; trackBy: myTrack; index as i"` | `<ng-template myDir let-item [myDirOf]="[1,2,3]" let-items="myDirOf" [myDirTrackBy]="myTrack" let-i="index">` |
| `*ngComponentOutlet="componentClass";`                                | `<ng-template [ngComponentOutlet]="componentClass">`                                                          |
| `*ngComponentOutlet="componentClass; inputs: myInputs";`              | `<ng-template [ngComponentOutlet]="componentClass" [ngComponentOutletInputs]="myInputs">`                     |
| `*myDir="exp as value"`                                               | `<ng-template [myDir]="exp" let-value="myDir">`                                                               |

## Özel direktifler için şablon tür denetimini iyileştirme

Direktif tanımınıza şablon korumaları ekleyerek özel direktifler için şablon tür denetimini iyileştirebilirsiniz.
Bu korumalar, Angular şablon tür denetleyicisinin şablondaki hataları derleme zamanında bulmasına yardımcı olur ve çalışma zamanı hatalarından kaçınabilir.
İki farklı koruma türü mümkündür:

- `ngTemplateGuard_(input)`, belirli bir girdinin türüne göre bir girdi ifadesinin nasıl daraltılacağını kontrol etmenize olanak tanır.
- `ngTemplateContextGuard`, direktifin kendi türüne göre şablon için bağlam nesnesinin türünü belirlemek için kullanılır.

Bu bölüm her iki koruma türü için örnekler sağlar.
Daha fazla bilgi için [Şablon tür denetimi](tools/cli/template-typecheck 'Template type-checking guide') bölümüne bakın.

### Şablon korumaları ile tür daraltma

Bir şablondaki yapısal direktif, o şablonun çalışma zamanında render edilip edilmeyeceğini kontrol eder. Bazı yapısal direktifler, girdi ifadesinin türüne göre tür daraltma yapmak ister.

Girdi korumaları ile iki daraltma mümkündür:

- Girdi ifadesini TypeScript tür doğrulama fonksiyonuna göre daraltma.
- Girdi ifadesini doğruluk değerine göre daraltma.

Bir tür doğrulama fonksiyonu tanımlayarak girdi ifadesini daraltmak için:

```ts
// Bu direktif şablonunu yalnızca aktör bir kullanıcı olduğunda render eder.
// Şablon içinde `actor` ifadesinin türünün `User`'a
// daraltıldığını doğrulamak istiyorsunuz.
@Directive(...)
class ActorIsUser {
  actor = input<User | Robot>();

static ngTemplateGuard_actor(dir: ActorIsUser, expr: User | Robot): expr is User {
    // Return ifadesi pratikte gereksizdir, ancak TypeScript hatalarını
    // önlemek için dahil edilmiştir.
    return true;
  }
}
```

Tür denetimi, şablonda `ngTemplateGuard_actor`'ın girdiye bağlanan ifade üzerinde doğrulandığı gibi davranacaktır.

Bazı direktifler şablonlarını yalnızca bir girdi doğru (truthy) olduğunda render eder. Doğruluk değerinin tam semantiğini bir tür doğrulama fonksiyonunda yakalamak mümkün değildir, bu nedenle şablon tür denetleyicisine bağlama ifadesinin kendisinin koruma olarak kullanılması gerektiğini belirtmek için `'binding'` literal türü kullanılabilir:

```ts
@Directive(...)
class CustomIf {
  condition = input.required<boolean>();

static ngTemplateGuard_condition: 'binding';
}
```

Şablon tür denetleyicisi, `condition`'a bağlanan ifadenin şablon içinde doğru olarak doğrulandığı gibi davranacaktır.

### Direktifin bağlamını türlendirme

Yapısal direktifiniz örneklenen şablona bir bağlam sağlıyorsa, statik bir `ngTemplateContextGuard` tür doğrulama fonksiyonu sağlayarak şablon içinde doğru şekilde türlendirebilirsiniz. Bu fonksiyon, bağlamın türünü türetmek için direktifin türünü kullanabilir ve bu, direktifin türü generic olduğunda yararlıdır.

Yukarıda açıklanan `SelectDirective` için, veri kaynağı generic olsa bile veri türünü doğru şekilde belirtmek üzere bir `ngTemplateContextGuard` uygulayabilirsiniz.

```ts
// Şablon bağlamı için bir arayüz bildirin:
export interface SelectTemplateContext<T> {
  $implicit: T;
}

@Directive(...)
export class SelectDirective<T> {
  // Direktifin generic türü `T`, girdiye iletilen `DataSource` türünden
  // çıkarılacaktır.
  selectFrom = input.required<DataSource<T>>();

// Direktifin generic türünü kullanarak bağlamın türünü daraltın.
  static ngTemplateContextGuard<T>(dir: SelectDirective<T>, ctx: any): ctx is SelectTemplateContext<T> {
    // Daha önce olduğu gibi koruma gövdesi çalışma zamanında kullanılmaz ve yalnızca
    // TypeScript hatalarını önlemek için dahil edilmiştir.
    return true;
  }
}
```
# Direktif bileşim API'si

Angular direktifleri, yeniden kullanılabilir davranışları kapsüllemek için harika bir yol sunar -- direktifler bir elemana nitelikler, CSS sınıfları ve olay dinleyicileri uygulayabilir.

_Direktif bileşim API'si_, bileşen TypeScript sınıfı _içinden_ bir bileşenin ana elemanına direktifler uygulamanıza olanak tanır.

## Bir bileşene direktif ekleme

Bir bileşenin dekoratörüne `hostDirectives` özelliği ekleyerek bileşenlere direktifler uygularsınız. Bu tür direktiflere _ana direktifler_ diyoruz.

Bu örnekte, `MenuBehavior` direktifini `AdminMenu`'nun ana elemanına uyguluyoruz. Bu, bir şablonda `<admin-menu>` elemanına `MenuBehavior`'ı uygulamaya benzer şekilde çalışır.

```typescript
@Component({
  selector: 'admin-menu',
  templateUrl: './admin-menu.html',
  hostDirectives: [MenuBehavior],
})
export class AdminMenu {}
```

Framework bir bileşeni render ettiğinde, Angular her ana direktifin de bir örneğini oluşturur. Direktiflerin ana bağlamaları bileşenin ana elemanına uygulanır. Varsayılan olarak, ana direktif girdileri ve çıktıları bileşenin genel API'sinin bir parçası olarak sunulmaz. Daha fazla bilgi için aşağıdaki [Girdiler ve çıktıları dahil etme](#input-ve-outputları-dahil-etme) bölümüne bakın.

**Angular, ana direktifleri derleme zamanında statik olarak uygular.** Çalışma zamanında dinamik olarak direktif ekleyemezsiniz.

**`hostDirectives`'de kullanılan direktifler `standalone: false` belirtemez.**

**Angular, `hostDirectives` özelliğinde uygulanan direktiflerin `selector`'ını yok sayar.**

## Input ve output'ları dahil etme

Bileşeninize `hostDirectives` uyguladığınızda, ana direktiflerden gelen girdiler ve çıktılar varsayılan olarak bileşeninizin API'sine dahil edilmez. `hostDirectives` içindeki girişi genişleterek girdileri ve çıktıları bileşeninizin API'sine açıkça dahil edebilirsiniz:

```typescript
@Component({
  selector: 'admin-menu',
  templateUrl: './admin-menu.html',
  hostDirectives: [
    {
      directive: MenuBehavior,
      inputs: ['menuId'],
      outputs: ['menuClosed'],
    },
  ],
})
export class AdminMenu {}
```

Girdileri ve çıktıları açıkça belirterek, `hostDirective` ile bileşenin tüketicileri bunları bir şablonda bağlayabilir:

```html
<admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()"></admin-menu>
```

Ayrıca, bileşeninizin API'sini özelleştirmek için `hostDirective`'den girdileri ve çıktıları takma adlarla kullanabilirsiniz:

```typescript
@Component({
  selector: 'admin-menu',
  templateUrl: './admin-menu.html',
  hostDirectives: [
    {
      directive: MenuBehavior,
      inputs: ['menuId: id'],
      outputs: ['menuClosed: closed'],
    },
  ],
})
export class AdminMenu {}
```

```html
<admin-menu id="top-menu" (closed)="logMenuClosed()"></admin-menu>
```

## Başka bir direktife direktif ekleme

Bileşenlere ek olarak diğer direktiflere de `hostDirectives` ekleyebilirsiniz. Bu, birden fazla davranışın geçişli olarak birleştirilmesini sağlar.

Aşağıdaki örnekte, `Menu` ve `Tooltip` olmak üzere iki direktif tanımlıyoruz. Ardından bu iki direktifin davranışını `MenuWithTooltip`'te birleştiriyoruz. Son olarak, `MenuWithTooltip`'i `SpecializedMenuWithTooltip`'e uyguluyoruz.

`SpecializedMenuWithTooltip` bir şablonda kullanıldığında, `Menu`, `Tooltip` ve `MenuWithTooltip`'in tümünün örneklerini oluşturur. Bu direktiflerin her birinin ana bağlamaları, `SpecializedMenuWithTooltip`'in ana elemanına uygulanır.

```ts
@Directive({
  /* ... */
})
export class Menu {}

@Directive({
  /* ... */
})
export class Tooltip {}

// MenuWithTooltip birden fazla başka direktiften davranışları birleştirebilir
@Directive({
  hostDirectives: [Tooltip, Menu],
})
export class MenuWithTooltip {}

// CustomWidget, MenuWithTooltip'te halihazırda birleştirilmiş davranışları uygulayabilir
@Directive({
  hostDirectives: [MenuWithTooltip],
})
export class SpecializedMenuWithTooltip {}
```

## Ana direktif semantiği

### Direktif çalıştırma sırası

Ana direktifler, doğrudan bir şablonda kullanılan bileşenler ve direktiflerle aynı yaşam döngüsünden geçer. Ancak, ana direktifler her zaman constructor'larını, yaşam döngüsü kancalarını ve bağlamalarını uygulandıkları bileşen veya direktiften _önce_ yürütür.

Aşağıdaki örnek, bir ana direktifin minimal kullanımını gösterir:

```typescript
@Component({
  selector: 'admin-menu',
  templateUrl: './admin-menu.html',
  hostDirectives: [MenuBehavior],
})
export class AdminMenu {}
```

Buradaki yürütme sırası:

1. `MenuBehavior` örneklendi
2. `AdminMenu` örneklendi
3. `MenuBehavior` girdileri alır (`ngOnInit`)
4. `AdminMenu` girdileri alır (`ngOnInit`)
5. `MenuBehavior` ana bağlamalarını uygular
6. `AdminMenu` ana bağlamalarını uygular

Bu işlem sırası, `hostDirectives` ile bileşenlerin bir ana direktif tarafından belirtilen herhangi bir ana bağlamayı geçersiz kılabileceği anlamına gelir.

Bu işlem sırası, aşağıdaki örnekte gösterildiği gibi iç içe ana direktif zincirlerine de uzanır.

```typescript
@Directive({...})
export class Tooltip { }

@Directive({
  hostDirectives: [Tooltip],
})
export class CustomTooltip { }

@Directive({
  hostDirectives: [CustomTooltip],
})
export class EvenMoreCustomTooltip { }
```

Yukarıdaki örnekte yürütme sırası:

1. `Tooltip` örneklendi
2. `CustomTooltip` örneklendi
3. `EvenMoreCustomTooltip` örneklendi
4. `Tooltip` girdileri alır (`ngOnInit`)
5. `CustomTooltip` girdileri alır (`ngOnInit`)
6. `EvenMoreCustomTooltip` girdileri alır (`ngOnInit`)
7. `Tooltip` ana bağlamalarını uygular
8. `CustomTooltip` ana bağlamalarını uygular
9. `EvenMoreCustomTooltip` ana bağlamalarını uygular

### Bağımlılık enjeksiyonu

`hostDirectives` belirten bir bileşen veya direktif, bu ana direktiflerin örneklerini enjekte edebilir ve tersi de geçerlidir.

Bir bileşene ana direktifler uygulanırken, hem bileşen hem de ana direktifler sağlayıcılar tanımlayabilir.

`hostDirectives` ile bir bileşen veya direktif ve bu ana direktifler aynı enjeksiyon token'ını sağlıyorsa, `hostDirectives` ile sınıf tarafından tanımlanan sağlayıcılar, ana direktifler tarafından tanımlanan sağlayıcılara göre öncelik kazanır.

### Ana direktif tekilleştirmesi

Aynı direktif, çözümlenen ana direktif ağacında birden fazla kez yer aldığında, bir hata fırlatmak yerine otomatik olarak tekilleştirilir. Hangi eşleşmenin kalacağına karar vermek için iki deterministik kural kullanılır.

#### Şablon eşleşmesi öncelik kazanır

Bir direktif bir elemanı bir kez **şablon seçicisi (selector)** aracılığıyla eşleştirir ve aynı zamanda bir **ana direktif** olarak da yer alırsa, Angular yalnızca şablon eşleşmesini tutar ve tüm ana direktif eşleşmelerini atar.

Zihinsel model şudur: bir ana direktif eşleşmesi `Partial<YourDirective>`'i temsil eder, yani yalnızca `hostDirectives` içinde açıkça listelenen girdi ve çıktıların sunulduğu kısmi bir uygulamadır; bir şablon eşleşmesi ise tam genel API'siyle birlikte direktifin tamamını temsil eder.

```ts
@Directive({selector: '[hoverable]'})
export class Hoverable {}

@Component({
  selector: 'app-button',
  hostDirectives: [Hoverable],
})
export class Button {}
```

```html


<app-button hoverable></app-button>
```

#### Birden fazla ana direktif eşleşmesi birleştirilir

Aynı direktif **ana direktif olarak birden fazla kez** yer alırsa, örneğin iki direktif de `hostDirectives` içinde ortak bir bağımlılık bildirdiğinde, Angular tüm örnekleri tek bir direktif örneğinde birleştirir. Tüm örneklerden gelen girdi ve çıktı eşlemeleri birleştirilir.

Bu, ana direktif bileşimindeki klasik [elmas problemini](https://en.wikipedia.org/wiki/Multiple_inheritance#The_diamond_problem) çözer:

```ts
// Her iki tetikleyicinin de ihtiyaç duyduğu paylaşılan bir davranış
@Directive({
  host: {
    '[attr.data-trigger-id]': 'triggerId',
  },
})
export class TriggerRef {
  readonly triggerId = `trigger-${crypto.randomUUID()}`;
}

// Her biri TriggerRef'i ana direktif olarak bildiren iki ayrı tetikleyici
@Directive({
  selector: '[popoverTrigger]',
  hostDirectives: [TriggerRef],
})
export class PopoverTrigger {
  readonly triggerRef = inject(TriggerRef);
}

@Directive({
  selector: '[dropdownTrigger]',
  hostDirectives: [TriggerRef],
})
export class DropdownTrigger {
  readonly triggerRef = inject(TriggerRef);
}
```

```html

<button popoverTrigger dropdownTrigger>Actions</button>
```

HELPFUL: Angular paylaşılan direktifin yalnızca tek bir örneğini ürettiği için, `PopoverTrigger` ve `DropdownTrigger` enjekte ettiklerinde aynı `TriggerRef` örneğini alır.

#### Çakışan takma adlar

Angular, yinelenen ana direktif eşleşmelerini birleştirirken bunların girdi ve çıktı eşlemelerini de birleştirir. Aynı ana direktifin iki örneği **aynı girdi veya çıktıyı farklı takma adlar altında** sunarsa, Angular derleme zamanında bir hata fırlatır ([NG8024](errors/NG8024))

```ts
@Directive({
  selector: '[popoverTrigger]',
  hostDirectives: [{directive: TriggerRef, inputs: ['triggerId: popoverTriggerId']}],
})
export class PopoverTrigger {}

@Directive({
  selector: '[dropdownTrigger]',
  hostDirectives: [
    {directive: TriggerRef, inputs: ['triggerId: dropdownTriggerId']}, // farklı takma ad!
  ],
})
export class DropdownTrigger {}
```

```html

<button popoverTrigger dropdownTrigger></button>
```

Bunu çözmek için, her iki yolun da paylaşılan girdi veya çıktıyı aynı takma ad altında sunmasını sağlayın veya hiç sunmayın.
# NgOptimizedImage ile Başlarken

`NgOptimizedImage` direktifi, görsel yükleme için performans en iyi uygulamalarını benimsemeyi kolaylaştırır.

Direktif, [Largest Contentful Paint (LCP)](http://web.dev/lcp) görselinin yüklenmesinin önceliklendirilmesini şu şekilde sağlar:

- `<img>` etiketinde `fetchpriority` niteliğini otomatik olarak ayarlama
- Diğer görselleri varsayılan olarak tembel yükleme
- Belge başlığında otomatik olarak bir preconnect bağlantı etiketi oluşturma
- Otomatik olarak bir `srcset` niteliği oluşturma
- Uygulama SSR kullanıyorsa bir [preload ipucu](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) oluşturma

LCP görselinin yüklenmesini optimize etmenin yanı sıra, `NgOptimizedImage` aşağıdakiler gibi bir dizi görsel en iyi uygulamasını zorlar:

- [Görsel optimizasyonları uygulamak için görsel CDN URL'lerini](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options) kullanma
- `width` ve `height` gerektirerek düzen kaymasını önleme
- `width` veya `height` yanlış ayarlanmışsa uyarı verme
- Görsel render edildiğinde görsel olarak bozulacaksa uyarı verme

CSS'te bir arka plan görseli kullanıyorsanız, [buradan başlayın](#arka-plan-görselinizi-nasıl-taşırsınız).

**NOTE: `NgOptimizedImage` direktifi Angular sürüm 15'te kararlı bir özellik haline getirilmiş olsa da, geriye taşınmış ve 13.4.0 ile 14.3.0 sürümlerinde de kararlı bir özellik olarak mevcuttur.**

## Başlarken

<docs-workflow>
<docs-step title="`NgOptimizedImage` direktifini içe aktarın">
`NgOptimizedImage` direktifini `@angular/common`'dan içe aktarın:

```ts
import {NgOptimizedImage} from '@angular/common';
```

ve bağımsız bir bileşenin veya NgModule'ün `imports` dizisine ekleyin:

```ts
imports: [
  NgOptimizedImage,
  // ...
],
```

</docs-step>
<docs-step title="(İsteğe bağlı) Bir Yükleyici kurun">
NgOptimizedImage'ı kullanmak için bir görsel yükleyici **gerekli** değildir, ancak bir görsel CDN ile birini kullanmak, görselleriniz için otomatik `srcset`'ler dahil güçlü performans özelliklerini etkinleştirir.

Bir yükleyici kurma hakkında kısa bir kılavuz, bu sayfanın sonundaki [Görsel Yükleyici Yapılandırma](#ngoptimizedimage-için-görsel-yükleyici-yapılandırma) bölümünde bulunabilir.
</docs-step>
<docs-step title="Direktifi etkinleştirin">
`NgOptimizedImage` direktifini etkinleştirmek için görselinizin `src` niteliğini `ngSrc` ile değiştirin.

```html
<img ngSrc="cat.jpg" />
```

Bir [yerleşik üçüncü taraf yükleyici](#yerleşik-yükleyiciler) kullanıyorsanız, yükleyici tarafından otomatik olarak ekleneceği için `src`'den temel URL yolunu çıkardığınızdan emin olun.
</docs-step>
<docs-step title="Resimleri `priority` olarak işaretleyin">
Yüklenmesini önceliklendirmek için sayfanızdaki [LCP görselini](https://web.dev/lcp/#what-elements-are-considered) her zaman `priority` olarak işaretleyin.

```html
<img ngSrc="cat.jpg" width="400" height="200" priority />
```

Bir görseli `priority` olarak işaretlemek aşağıdaki optimizasyonları uygular:

- `fetchpriority=high` ayarlar (öncelik ipuçları hakkında daha fazla bilgi [burada](https://web.dev/priority-hints))
- `loading=eager` ayarlar (yerel tembel yükleme hakkında daha fazla bilgi [burada](https://web.dev/browser-level-image-lazy-loading))
- [Sunucuda render ediliyorsa](guide/ssr) otomatik olarak bir [preload bağlantı öğesi](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) oluşturur.

Angular, LCP öğesi `priority` niteliğine sahip olmayan bir görsel ise geliştirme sırasında bir uyarı görüntüler. Bir sayfanın LCP öğesi, kullanıcının ekranının boyutları gibi birçok faktöre göre değişebilir, bu nedenle bir sayfada `priority` olarak işaretlenmesi gereken birden fazla görsel olabilir. Daha fazla ayrıntı için [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) bölümüne bakın.
</docs-step>
<docs-step title="Genişlik ve Yükseklik ekleyin">
[Görselle ilgili düzen kaymalarını](https://web.dev/css-web-vitals/#images-and-layout-shifts) önlemek için NgOptimizedImage, görseliniz için aşağıdaki gibi bir yükseklik ve genişlik belirtmenizi gerektirir:

```html
<img ngSrc="cat.jpg" width="400" height="200" />
```

**Duyarlı görseller** (görünüm alanına göre büyüyüp küçülecek şekilde stillendirilmiş görseller) için `width` ve `height` nitelikleri görsel dosyasının gerçek boyutu olmalıdır. Duyarlı görseller için ayrıca [`sizes` için bir değer ayarlamak](#duyarlı-görseller) da önemlidir.

**Sabit boyutlu görseller** için `width` ve `height` nitelikleri görselin istenen render boyutunu yansıtmalıdır. Bu niteliklerin en-boy oranı her zaman görselin gerçek en-boy oranıyla eşleşmelidir.

NOTE: Görsellerinizin boyutunu bilmiyorsanız, üst kapsayıcının boyutunu devralmak için aşağıda açıklanan "fill modunu" kullanmayı düşünün.
</docs-step>
</docs-workflow>

## `fill` Modunu Kullanma

Bir görselin bir kapsayıcı öğeyi doldurmasını istediğiniz durumlarda `fill` niteliğini kullanabilirsiniz. Bu, genellikle bir "arka plan görseli" davranışı elde etmek istediğinizde kullanışlıdır. Ayrıca görselinizin tam genişlik ve yüksekliğini bilmediğinizde, ancak görselinizi sığdırmak istediğiniz bilinen bir boyuta sahip bir üst kapsayıcınız olduğunda da yardımcı olabilir (aşağıdaki "object-fit" bölümüne bakın).

Görselinize `fill` niteliğini eklediğinizde, bu örnekte olduğu gibi bir `width` ve `height` eklemenize gerek yoktur ve eklememelisiniz:

```html
<img ngSrc="cat.jpg" fill />
```

Görselin kapsayıcısını nasıl dolduracağını değiştirmek için [object-fit](https://developer.mozilla.org/docs/Web/CSS/object-fit) CSS özelliğini kullanabilirsiniz. Görselinizi `object-fit: "contain"` ile stillerseniz, görsel en-boy oranını koruyacak ve öğeye sığacak şekilde "letterbox" yapılacaktır. `object-fit: "cover"` ayarlarsanız, öğe en-boy oranını koruyacak, öğeyi tamamen dolduracak ve bazı içerikler "kırpılabilir".

Yukarıdakilerin görsel örnekleri için [MDN object-fit belgelerine](https://developer.mozilla.org/docs/Web/CSS/object-fit) bakın.

Ayrıca görselin kapsayıcı öğe içindeki konumunu ayarlamak için [object-position özelliğiyle](https://developer.mozilla.org/docs/Web/CSS/object-position) stilleyebilirsiniz.

IMPORTANT: "fill" görselinin düzgün render edilmesi için üst öğesi `position: "relative"`, `position: "fixed"` veya `position: "absolute"` ile stillendirilmiş **olmalıdır**.

## Arka Plan Görselinizi Nasıl Taşırsınız

`background-image`'dan `NgOptimizedImage`'a geçiş için basit bir adım adım süreç. Bu adımlar için, görsel arka planına sahip öğeyi "kapsayıcı öğe" olarak adlandıracağız:

1. `background-image` stilini kapsayıcı öğeden kaldırın.
2. Kapsayıcı öğenin `position: "relative"`, `position: "fixed"` veya `position: "absolute"` değerine sahip olduğundan emin olun.
3. `NgOptimizedImage` direktifini etkinleştirmek için `ngSrc` kullanarak kapsayıcı öğenin alt öğesi olarak yeni bir görsel öğesi oluşturun.
4. O öğeye `fill` niteliğini verin. Bir `height` ve `width` eklemeyin.
5. Bu görselin [LCP öğeniz](https://web.dev/lcp/) olabileceğini düşünüyorsanız, görsel öğesine `priority` niteliğini ekleyin.

Arka plan görselinin kapsayıcıyı nasıl doldurduğunu [Fill modunu kullanma](#fill-modunu-kullanma) bölümünde açıklandığı gibi ayarlayabilirsiniz.

## Yer Tutucuları Kullanma

### Otomatik Yer Tutucular

NgOptimizedImage, otomatik görsel yeniden boyutlandırma sağlayan bir CDN veya görsel barındırıcı kullanıyorsanız görseliniz için otomatik düşük çözünürlüklü bir yer tutucu görüntüleyebilir. Görselinize `placeholder` niteliğini ekleyerek bu özellikten yararlanın:

```html
<img ngSrc="cat.jpg" width="400" height="200" placeholder />
```

Bu niteliği eklemek, belirttiğiniz görsel yükleyicisini kullanarak otomatik olarak ikinci, daha küçük bir görsel sürümü ister. Bu küçük görsel, görseliniz yüklenirken CSS bulanıklaştırma ile bir `background-image` stili olarak uygulanır. Hiçbir görsel yükleyici sağlanmazsa, yer tutucu görsel oluşturulamaz ve bir hata fırlatılır.

Oluşturulan yer tutucular için varsayılan boyut 30px genişliktedir. Bu boyutu, aşağıda görüldüğü gibi `IMAGE_CONFIG` sağlayıcısında bir piksel değeri belirterek değiştirebilirsiniz:

```ts
providers: [
  {
    provide: IMAGE_CONFIG,
    useValue: {
      placeholderResolution: 40
    }
  },
],
```

Bulanık yer tutucunuzun etrafında keskin kenarlar istiyorsanız, görselinizi `overflow: hidden` stiliyle bir kapsayıcı `<div>` ile sarabilirsiniz. `<div>`, görsel ile aynı boyutta olduğu sürece (örneğin `width: fit-content` stili kullanarak), yer tutucunun "bulanık kenarları" gizlenecektir.

### Data URL Yer Tutucuları

Ayrıca bir görsel yükleyici olmadan base64 [veri URL'si](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) kullanarak bir yer tutucu belirtebilirsiniz. Veri url formatı `data:image/[imagetype];[data]` şeklindedir; burada `[imagetype]` görsel formatıdır, örneğin `png`, ve `[data]` görselin base64 kodlamasıdır. Bu kodlama komut satırı veya JavaScript ile yapılabilir. Belirli komutlar için [MDN belgelerine](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#encoding_data_into_base64_format) bakın. Kısaltılmış veriye sahip bir veri URL yer tutucu örneği aşağıda gösterilmiştir:

```html
<img ngSrc="cat.jpg" width="400" height="200" placeholder="data:image/png;base64,iVBORw0K..." />
```

Ancak, büyük veri URL'leri Angular paketlerinizin boyutunu artırır ve sayfa yüklemesini yavaşlatır. Bir görsel yükleyici kullanamıyorsanız, Angular ekibi base64 yer tutucu görsellerini 4KB'den küçük tutmanızı ve bunları yalnızca kritik görsellerde kullanmanızı önerir. Yer tutucu boyutlarını küçültmenin yanı sıra, görselleri kaydederken kullanılan görsel formatlarını veya parametreleri değiştirmeyi düşünün. Çok düşük çözünürlüklerde, bu parametreler dosya boyutu üzerinde büyük bir etkiye sahip olabilir.

### Bulanıklaştırılmamış Yer Tutucular

Varsayılan olarak, NgOptimizedImage görsel yer tutucularına CSS bulanıklaştırma efekti uygular. Bir yer tutucuyu bulanıklaştırma olmadan render etmek için, `blur` özelliğini false olarak ayarlanmış bir nesne ile bir `placeholderConfig` argümanı sağlayın. Örneğin:

```html
<img ngSrc="cat.jpg" width="400" height="200" placeholder [placeholderConfig]="{blur: false}" />
```

## Görsel Stilini Ayarlama

Görselin stiline bağlı olarak, `width` ve `height` niteliklerini eklemek görselin farklı şekilde render edilmesine neden olabilir. `NgOptimizedImage`, görsel stiliniz görseli bozulmuş bir en-boy oranıyla render ederse sizi uyarır.

Bunu genellikle görsel stillerinize `height: auto` veya `width: auto` ekleyerek düzeltebilirsiniz. Daha fazla bilgi için [`<img>` etiketi hakkında web.dev makalesine](https://web.dev/patterns/web-vitals-patterns/images/img-tag) bakın.

Görseldeki `width` ve `height` nitelikleri CSS ile görseli istediğiniz şekilde boyutlandırmanızı engelliyorsa, bunun yerine `fill` modunu kullanmayı ve görselin üst öğesini stillemeyi düşünün.

## Performans Özellikleri

NgOptimizedImage, uygulamanızda yükleme performansını artırmak için tasarlanmış birçok özellik içerir. Bu özellikler bu bölümde açıklanmaktadır.

### Kaynak İpuçları Ekleme

Görsel kaynağınız için bir [`preconnect` kaynak ipucu](https://web.dev/preconnect-and-dns-prefetch), LCP görselinin mümkün olduğunca hızlı yüklenmesini sağlar.

Preconnect bağlantıları, bir [yükleyiciye](#ngoptimizedimage-için-görsel-yükleyici-yapılandırma) argüman olarak sağlanan alanlar için otomatik olarak oluşturulur. Bir görsel kaynağı otomatik olarak tanımlanamıyorsa ve LCP görseli için bir preconnect bağlantısı algılanmıyorsa, `NgOptimizedImage` geliştirme sırasında uyarı verir. Bu durumda, belge başlığına manuel olarak bir kaynak ipucu eklemelisiniz. Belgenin `<head>` bölümünde, aşağıda gösterildiği gibi `rel="preconnect"` ile bir `link` etiketi ekleyin:

```html
<link rel="preconnect" href="https://my.cdn.origin" />
```

Preconnect uyarılarını devre dışı bırakmak için `PRECONNECT_CHECK_BLOCKLIST` token'ını enjekte edin:

```ts
providers: [
{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'}
],

```

Otomatik preconnect oluşturma hakkında daha fazla bilgi için [buraya](#görsel-alanım-için-neden-bir-preconnect-öğesi-oluşturulmuyor) bakın.

### Otomatik `srcset` ile Doğru Boyutta Görsel İsteme

Bir [`srcset` niteliği](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) tanımlamak, tarayıcının kullanıcınızın görünüm alanı için doğru boyutta bir görsel istemesini sağlar, böylece çok büyük bir görseli indirmek için zaman kaybedilmez. `NgOptimizedImage`, görsel etiketindeki [`sizes` niteliğinin](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) varlığına ve değerine dayalı olarak görsel için uygun bir `srcset` oluşturur.

#### Sabit Boyutlu Görseller

Görselinizin "sabit" boyutta olması gerekiyorsa (yani cihazlar arasında aynı boyut, [piksel yoğunluğu](https://web.dev/codelab-density-descriptors/) hariç), bir `sizes` niteliği ayarlamaya gerek yoktur. Görselin genişlik ve yükseklik niteliklerinden başka bir girdi gerektirmeden otomatik olarak bir `srcset` oluşturulabilir.

Oluşturulan srcset örneği:

```html
<img ... srcset="image-400w.jpg 1x, image-800w.jpg 2x" />
```

#### Duyarlı Görseller

Görselinizin duyarlı olması gerekiyorsa (yani görünüm alanı boyutuna göre büyüyüp küçülüyorsa), `srcset`'i oluşturmak için bir [`sizes` niteliği](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) tanımlamanız gerekir.

Daha önce `sizes` kullanmadıysanız, görünüm alanı genişliğine göre ayarlamak iyi bir başlangıç noktasıdır. Örneğin, CSS'iniz görselin görünüm alanı genişliğinin %100'ünü doldurmasına neden oluyorsa, `sizes`'ı `100vw` olarak ayarlayın ve tarayıcı `srcset`'teki görünüm alanı genişliğine en yakın görseli seçecektir (piksel yoğunluğunu hesaba kattıktan sonra). Görselinizin yalnızca ekranın yarısını kaplayacağı tahmin ediliyorsa (örneğin bir kenar çubuğunda), tarayıcının daha küçük bir görsel seçmesini sağlamak için `sizes`'ı `50vw` olarak ayarlayın. Ve böyle devam eder.

Yukarıdakilerin istediğiniz görsel davranışını karşılamadığını fark ederseniz, [gelişmiş sizes değerleri](#gelişmiş-sizes-değerleri) belgelerine bakın.

`NgOptimizedImage`'ın sağlanan `sizes` değerinin başına otomatik olarak `"auto"` eklediğini unutmayın. Bu, `sizes="auto"` destekleyen tarayıcılarda srcset seçiminin doğruluğunu artıran bir optimizasyondur ve desteklemeyen tarayıcılar tarafından göz ardı edilir.

Varsayılan olarak, duyarlı kesme noktaları şunlardır:

`[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]`

Bu kesme noktalarını özelleştirmek istiyorsanız, `IMAGE_CONFIG` sağlayıcısını kullanarak yapabilirsiniz:

```ts
providers: [
  {
    provide: IMAGE_CONFIG,
    useValue: {
      breakpoints: [16, 48, 96, 128, 384, 640, 750, 828, 1080, 1200, 1920]
    }
  },
],
```

Bir `srcset` niteliğini manuel olarak tanımlamak isterseniz, `ngSrcset` niteliğini kullanarak kendinizinkini sağlayabilirsiniz:

```html
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w" />
```

`ngSrcset` niteliği mevcutsa, `NgOptimizedImage` dahil edilen boyutlara dayalı olarak `srcset`'i oluşturur ve ayarlar. `ngSrcset`'e görsel dosya adlarını eklemeyin - direktif bu bilgiyi `ngSrc`'den çıkarır. Direktif hem genişlik tanımlayıcılarını (örneğin `100w`) hem de yoğunluk tanımlayıcılarını (örneğin `1x`) destekler.

```html
<img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w" sizes="50vw" />
```

### Otomatik srcset Oluşturmayı Devre Dışı Bırakma

Tek bir görsel için srcset oluşturmayı devre dışı bırakmak amacıyla görsele `disableOptimizedSrcset` niteliğini ekleyebilirsiniz:

```html
<img ngSrc="about.jpg" disableOptimizedSrcset />
```

### Görsel Tembel Yüklemeyi Devre Dışı Bırakma

Varsayılan olarak, `NgOptimizedImage` `priority` olarak işaretlenmeyen tüm görseller için `loading=lazy` ayarlar. Öncelikli olmayan görseller için bu davranışı `loading` niteliğini ayarlayarak devre dışı bırakabilirsiniz. Bu nitelik şu değerleri kabul eder: `eager`, `auto` ve `lazy`. [Ayrıntılar için standart görsel `loading` niteliği belgelerine bakın](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/loading#value).

```html
<img ngSrc="cat.jpg" width="400" height="200" loading="eager" />
```

### Görsel Çözümlemeyi Kontrol Etme

Varsayılan olarak, `NgOptimizedImage` tüm görseller için `decoding="auto"` ayarlar. Bu, tarayıcının bir görseli getirdikten sonra onu çözme için en uygun zamanı belirlemesine olanak tanır. Bir görsel `priority` olarak işaretlendiğinde, Angular otomatik olarak `decoding="sync"` ayarlayarak görselin en erken zamanda çözümlenmesini ve boyanmasını sağlar ve **Largest Contentful Paint (LCP)** performansını iyileştirmeye yardımcı olur.

Bu davranışı açıkça `decoding` niteliğini ayarlayarak geçersiz kılabilirsiniz.
[Ayrıntılar için standart görsel `decoding` niteliği belgelerine bakın](https://developer.mozilla.org/docs/Web/HTML/Element/img#decoding).

```html

<img ngSrc="gallery/landscape.jpg" width="1200" height="800" />

<img ngSrc="gallery/preview.jpg" width="600" height="400" decoding="async" />

<img ngSrc="awesome.jpg" width="500" height="625" priority />

<img ngSrc="hero.jpg" width="1600" height="900" decoding="sync" />
```

**İzin verilen değerler**

- `auto` (varsayılan): tarayıcının en uygun stratejiyi seçmesine izin verir.
- `async`: görseli asenkron olarak çözer, mümkün olduğunda ana iş parçacığı engellemesini önler.
- `sync`: görseli hemen çözer; render'ı engelleyebilir ancak görsel mevcut olduğunda piksellerin hazır olmasını sağlar.

### Gelişmiş 'sizes' Değerleri

Görsellerin farklı boyutlu ekranlarda farklı genişliklerde görüntülenmesini isteyebilirsiniz. Bunun yaygın bir örneği, mobil cihazlarda tek sütun ve daha büyük cihazlarda iki sütun render eden ızgara veya sütun tabanlı bir düzendir. Bu davranışı aşağıdaki gibi bir "medya sorgusu" sözdizimi kullanarak `sizes` niteliğinde yakalayabilirsiniz:

```html
<img ngSrc="cat.jpg" width="400" height="200" sizes="(max-width: 768px) 100vw, 50vw" />
```

Yukarıdaki örnekteki `sizes` niteliği "768px'den dar cihazlarda bu görselin ekran genişliğinin yüzde 100'ü olmasını bekliyorum. Aksi takdirde, ekran genişliğinin yüzde 50'si olmasını bekliyorum" demektedir.

`sizes` niteliği hakkında ek bilgi için [web.dev](https://web.dev/learn/design/responsive-images/#sizes) veya [mdn](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) adresine bakın.

## `NgOptimizedImage` için Görsel Yükleyici Yapılandırma

Bir "yükleyici", belirli bir görsel dosyası için bir [görsel dönüştürme URL'si](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options) oluşturan bir fonksiyondur. Uygun olduğunda, `NgOptimizedImage` bir görsel için boyut, format ve görsel kalitesi dönüşümlerini ayarlar.

`NgOptimizedImage`, hiçbir dönüşüm uygulamayan genel bir yükleyicinin yanı sıra çeşitli üçüncü taraf görsel servisleri için yükleyiciler sağlar. Ayrıca kendi özel yükleyicinizi yazmayı da destekler.

| Loader type                                      | Behavior                                                                                                                                                                                                                                       |
| :----------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Genel yükleyici                                  | Genel yükleyici tarafından döndürülen URL her zaman `src` değeriyle eşleşir. Başka bir deyişle, bu yükleyici hiçbir dönüşüm uygulamaz. Görselleri sunmak için Angular kullanan siteler, bu yükleyicinin birincil amaçlanan kullanım durumudur. |
| Üçüncü taraf görsel servisleri için yükleyiciler | Üçüncü taraf görsel servisleri için yükleyiciler tarafından döndürülen URL, o belirli görsel servisi tarafından kullanılan API kurallarını izler.                                                                                              |
| Özel yükleyiciler                                | Bir özel yükleyicinin davranışı geliştiricisi tarafından tanımlanır. Görsel servisiniz `NgOptimizedImage` ile önceden yapılandırılmış yükleyiciler tarafından desteklenmiyorsa özel bir yükleyici kullanmalısınız.                             |

Angular uygulamalarıyla yaygın olarak kullanılan görsel servislerine dayalı olarak, `NgOptimizedImage` aşağıdaki görsel servisleriyle çalışmak üzere önceden yapılandırılmış yükleyiciler sağlar:

**Genel yükleyiciyi** kullanmak için ek kod değişikliği gerekmez. Bu varsayılan davranıştır.

### Yerleşik Yükleyiciler

**Üçüncü taraf görsel servisi** için mevcut bir yükleyici kullanmak üzere, seçtiğiniz servis için sağlayıcı fabrikasını `providers` dizisine ekleyin. Aşağıdaki örnekte Imgix yükleyicisi kullanılmaktadır:

```ts
providers: [
  provideImgixLoader('https://my.base.url/'),
],
```

Görsel varlıklarınızın temel URL'si, sağlayıcı fabrikasına argüman olarak geçirilmelidir. Çoğu site için bu temel URL aşağıdaki kalıplardan biriyle eşleşmelidir:

- <https://yoursite.yourcdn.com>
- <https://subdomain.yoursite.com>
- <https://subdomain.yourcdn.com/yoursite>

Temel URL yapısı hakkında daha fazla bilgiyi ilgili CDN sağlayıcısının belgelerinde öğrenebilirsiniz.

### Özel Yükleyiciler

**Özel yükleyici** kullanmak için, yükleyici fonksiyonunuzu `IMAGE_LOADER` DI token'ı için bir değer olarak sağlayın. Aşağıdaki örnekte, özel yükleyici fonksiyonu `https://example.com` ile başlayan ve URL parametreleri olarak `src`, `width` ve `height` içeren bir URL döndürür.

```ts
providers: [
  {
    provide: IMAGE_LOADER,
    useValue: (config: ImageLoaderConfig) => {
      return `https://example.com/images?src=${config.src}&width=${config.width}&height=${config.height}`;
    },
  },
],
```

`NgOptimizedImage` direktifi için bir yükleyici fonksiyonu, argüman olarak `ImageLoaderConfig` türünde (`@angular/common`'dan) bir nesne alır ve görsel varlığının mutlak URL'sini döndürür. `ImageLoaderConfig` nesnesi `src` özelliğini ve isteğe bağlı `width`, `height` ve `loaderParams` özelliklerini içerir.

NOTE: `width` özelliği her zaman mevcut olmasa da, özel bir yükleyicinin `ngSrcset`'in düzgün çalışması için çeşitli genişliklerde görsel istemeyi desteklemek üzere bunu kullanması gerekir.

### `loaderParams` Özelliği

`NgOptimizedImage` direktifi tarafından desteklenen, özellikle özel yükleyicilerin kullanımını desteklemek için tasarlanmış `loaderParams` adlı ek bir nitelik vardır. `loaderParams` niteliği, değer olarak herhangi bir özelliğe sahip bir nesne alır ve kendi başına hiçbir şey yapmaz. `loaderParams`'taki veriler, özel yükleyicinize geçirilen `ImageLoaderConfig` nesnesine eklenir ve yükleyicinin davranışını kontrol etmek için kullanılabilir.

`loaderParams` için yaygın bir kullanım, gelişmiş görsel CDN özelliklerini kontrol etmektir.

### Yerleşik Yükleyicilerde `transform` Özelliğini Kullanma

Cloudinary, Cloudflare, ImageKit ve Imgix için yerleşik yükleyiciler, `loaderParams` içinde özel bir `transform` özelliğini destekler. Bu özellik, CDN'niz tarafından sağlanan özel görsel dönüşümlerini uygulamanıza olanak tanır.

`transform` özelliği iki format kabul eder:

#### Dize Formatı

CDN'nizin dönüşüm sözdizimini kullanarak dönüşümleri virgülle ayrılmış bir dize olarak sağlayın:

```html
<img
  ngSrc="my-image.jpg"
  width="400"
  height="300"
  [loaderParams]="{transform: 'e_grayscale,r_10'}"
/>
```

#### Nesne Formatı

Dönüşümleri anahtar-değer çiftleri ile bir nesne olarak sağlayın.

```html
<img
  ngSrc="my-image.jpg"
  width="400"
  height="300"
  [loaderParams]="{transform: {e: 'grayscale', r: 10}}"
/>
```

NOTE: `transform` özelliği Netlify yükleyicisi tarafından desteklenmez çünkü Netlify'ın görsel CDN'si özel dönüşüm parametreleri sağlamaz.

### Örnek Özel Yükleyici

Aşağıda bir özel yükleyici fonksiyonu örneği gösterilmektedir. Bu örnek fonksiyon `src`, `width` ve `height`'ı birleştirir ve yuvarlatılmış köşeler için özel bir CDN özelliğini kontrol etmek üzere `loaderParams`'ı kullanır:

```ts
const myCustomLoader = (config: ImageLoaderConfig) => {
  let url = `https://example.com/images/${config.src}?`;
  let queryParams = [];
  if (config.width) {
    queryParams.push(`w=${config.width}`);
  }
  if (config.height) {
    queryParams.push(`h=${config.height}`);
  }
  if (config.loaderParams?.roundedCorners) {
    queryParams.push('mask=corners&corner-radius=5');
  }
  return url + queryParams.join('&');
};
```

Yukarıdaki örnekte, özel yükleyicimizin bir özelliğini kontrol etmek için 'roundedCorners' özellik adını icat ettik. Daha sonra bu özelliği bir görsel oluştururken aşağıdaki gibi kullanabiliriz:

```html
<img ngSrc="profile.jpg" width="300" height="300" [loaderParams]="{roundedCorners: true}" />
```

## Sıkça Sorulan Sorular

### NgOptimizedImage `background-image` CSS özelliğini destekliyor mu?

NgOptimizedImage, `background-image` CSS özelliğini doğrudan desteklemez, ancak bir görselin başka bir öğenin arka planı olarak kullanılması durumunu kolayca karşılamak için tasarlanmıştır.

`background-image`'dan `NgOptimizedImage`'a geçiş için adım adım bir süreç için yukarıdaki [Arka plan görselinizi nasıl geçirirsiniz](#arka-plan-görselinizi-nasıl-taşırsınız) bölümüne bakın.

### `NgOptimizedImage` ile neden `src` kullanamıyorum?

`ngSrc` niteliği, görsellerin tarayıcı tarafından nasıl yüklendiğiyle ilgili teknik nedenlerle NgOptimizedImage'ın tetikleyicisi olarak seçilmiştir. NgOptimizedImage, `loading` niteliğinde programatik değişiklikler yapar -- tarayıcı bu değişiklikler yapılmadan önce `src` niteliğini görürse, görsel dosyasını hevesle indirmeye başlar ve yükleme değişiklikleri göz ardı edilir.

### Görsel alanım için neden bir preconnect öğesi oluşturulmuyor?

Preconnect oluşturma, uygulamanızın statik analizine dayalı olarak gerçekleştirilir. Bu, görsel alanının aşağıdaki örnekte olduğu gibi doğrudan yükleyici parametresine dahil edilmesi gerektiği anlamına gelir:

```ts
providers: [
  provideImgixLoader('https://my.base.url/'),
],
```

Alan dizesini yükleyiciye geçirmek için bir değişken kullanırsanız veya bir yükleyici kullanmıyorsanız, statik analiz alanı tanımlayamaz ve hiçbir preconnect bağlantısı oluşturulmaz. Bu durumda, [yukarıda açıklandığı gibi](#kaynak-ipuçları-ekleme) belge başlığına manuel olarak bir preconnect bağlantısı eklemelisiniz.

### Aynı sayfada iki farklı görsel alanı kullanabilir miyim?

[Görsel yükleyicileri](#ngoptimizedimage-için-görsel-yükleyici-yapılandırma) sağlayıcı kalıbı, bir bileşen içinde yalnızca tek bir görsel CDN kullanmanın yaygın kullanım durumu için mümkün olduğunca basit olacak şekilde tasarlanmıştır. Ancak, tek bir sağlayıcı kullanarak birden fazla görsel CDN'yi yönetmek yine de oldukça mümkündür.

Bunu yapmak için, hangi görsel CDN'sinin kullanılacağını belirten bir bayrak geçirmek üzere [`loaderParams` özelliğini](#loaderparams-özelliği) kullanan bir [özel görsel yükleyici](#özel-yükleyiciler) yazmanızı ve ardından bu bayrağa göre uygun yükleyiciyi çağırmanızı öneririz.

### Tercih ettiğim CDN için yeni bir yerleşik yükleyici ekleyebilir misiniz?

Bakım nedenleriyle, şu anda Angular deposunda ek yerleşik yükleyicileri desteklemeyi planlamıyoruz. Bunun yerine, geliştiricileri ek görsel yükleyicilerini üçüncü taraf paketler olarak yayınlamaya teşvik ediyoruz.

### Bunu `<picture>` etiketiyle kullanabilir miyim?

Hayır, ancak bu yol haritamızda, bu yüzden takipte kalın.

Bu özelliği bekliyorsanız, lütfen [buradaki](https://github.com/angular/angular/issues/56594) GitHub sorununu oylayın.

### Chrome DevTools ile LCP görselimi nasıl bulurum?

1. Chrome DevTools'un performans sekmesini kullanarak, sol üstteki "profillemeyi başlat ve sayfayı yeniden yükle" düğmesine tıklayın. Sayfa yenileme simgesi gibi görünür.

2. Bu, Angular uygulamanızın bir profilleme anlık görüntüsünü tetikler.

3. Profilleme sonucu mevcut olduğunda, zamanlama bölümünde "LCP"yi seçin.

4. Alt panelde bir özet girişi görünmelidir. LCP öğesini "ilgili düğüm" satırında bulabilirsiniz. Üzerine tıklamak, Öğeler panelinde öğeyi gösterecektir.

NOTE: Bu yalnızca test ettiğiniz sayfanın görünüm alanı içindeki LCP öğesini tanımlar. Daha küçük ekranlar için LCP öğesini tanımlamak amacıyla mobil emülasyonu kullanmanız da önerilir.
Angular'da durum oluşturmak ve yönetmek için _sinyaller_ kullanırsınız. Sinyal, bir değerin etrafındaki hafif bir sarmalayıcıdır.

Yerel durumu tutmak üzere bir sinyal oluşturmak için `signal` fonksiyonunu kullanın:

```typescript
import {signal} from '@angular/core';

// `signal` fonksiyonu ile bir sinyal oluşturun.
const firstName = signal('Morgan');

// Sinyal değerini çağırarak okuyun — sinyaller fonksiyondur.
console.log(firstName());

// Bu sinyalin değerini `set` metodunu yeni bir değerle çağırarak değiştirin.
firstName.set('Jaime');

// Değeri önceki değere göre değiştirmek için
// `update` metodunu da kullanabilirsiniz.
firstName.update((name) => name.toUpperCase());
```

Angular, sinyallerin nerede okunduğunu ve ne zaman güncellendiğini takip eder. Çerçeve, DOM'u yeni durumla güncellemek gibi ek işlemler yapmak için bu bilgiyi kullanır. Değişen sinyal değerlerine zaman içinde tepki verebilme yeteneği _reaktivite_ olarak bilinir.

## Hesaplanmış İfadeler

`computed`, değerini diğer sinyallere göre üreten bir sinyaldir.

```typescript
import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());

console.log(firstNameCapitalized()); // MORGAN
```

Bir `computed` sinyali salt okunurdur; `set` veya `update` metodu yoktur. Bunun yerine, `computed` sinyalinin değeri, okuduğu sinyallerden herhangi biri değiştiğinde otomatik olarak değişir:

```typescript
import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());
console.log(firstNameCapitalized()); // MORGAN

firstName.set('Jaime');
console.log(firstNameCapitalized()); // JAIME
```

## Bileşenlerde Sinyal Kullanımı

Durum oluşturmak ve yönetmek için bileşenlerinizin içinde `signal` ve `computed` kullanın:

```ts
@Component({
  /* ... */
})
export class UserProfile {
  isTrial = signal(false);
  isTrialExpired = signal(false);
  showTrialDuration = computed(() => this.isTrial() && !this.isTrialExpired());

activateTrial() {
    this.isTrial.set(true);
  }
}
```

TIP: Angular Sinyalleri hakkında daha fazla bilgi edinmek ister misiniz? Tüm ayrıntılar için [Detaylı Sinyaller kılavuzuna](guide/signals) bakın.

## Sonraki Adım

Dinamik verileri nasıl tanımlayacağınızı ve yöneteceğinizi öğrendiğinize göre, bu verileri şablonlar içinde nasıl kullanacağınızı öğrenmenin zamanı geldi.
# `linkedSignal` ile bağımlı durum

Angular kodunuzda bir miktar durum tutmak için `signal` fonksiyonunu kullanabilirsiniz. Bazen bu durum başka bir duruma bağlıdır. Örneğin, kullanıcının bir sipariş için kargo yöntemi seçmesine olanak tanıyan bir bileşen düşünün:

```typescript
@Component({
  /* ... */
})
export class ShippingMethodPicker {
  shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();

// Varsayılan olarak ilk kargo seçeneğini seç.
  selectedOption = signal(this.shippingOptions()[0]);

changeShipping(newOptionIndex: number) {
    this.selectedOption.set(this.shippingOptions()[newOptionIndex]);
  }
}
```

Bu örnekte, `selectedOption` varsayılan olarak ilk seçenektir, ancak kullanıcı başka bir seçenek seçerse değişir. Fakat `shippingOptions` bir sinyaldir-- değeri değişebilir! `shippingOptions` değişirse, `selectedOption` artık geçerli bir seçenek olmayan bir değer içerebilir.

**`linkedSignal` fonksiyonu, doğası gereği başka bir duruma _bağlı_ olan bir durum tutmak için bir sinyal oluşturmanıza olanak tanır.** Yukarıdaki örneği tekrar ele alırsak, `linkedSignal` `signal`'in yerini alabilir:

```ts
@Component({
  /* ... */
})
export class ShippingMethodPicker {
  shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();

// selectedOption'ı ilk kargo seçeneği ile başlat.
  selectedOption = linkedSignal(() => this.shippingOptions()[0]);

changeShipping(index: number) {
    this.selectedOption.set(this.shippingOptions()[index]);
  }
}
```

`linkedSignal`, bir temel farkla `signal`'e benzer şekilde çalışır-- varsayılan bir değer iletmek yerine, tıpkı `computed` gibi bir _hesaplama fonksiyonu_ iletirsiniz. Hesaplamanın değeri değiştiğinde, `linkedSignal`'in değeri hesaplama sonucuna dönüşür. Bu, `linkedSignal`'in her zaman geçerli bir değere sahip olmasını sağlamaya yardımcı olur.

Aşağıdaki örnek, bir `linkedSignal`'in değerinin bağlı durumuna göre nasıl değişebildiğini gösterir:

```ts
const shippingOptions = signal(['Ground', 'Air', 'Sea']);
const selectedOption = linkedSignal(() => shippingOptions()[0]);
console.log(selectedOption()); // 'Ground'

selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'

shippingOptions.set(['Email', 'Will Call', 'Postal service']);
console.log(selectedOption()); // 'Email'
```

## Önceki durumu dikkate alma

Bazı durumlarda, bir `linkedSignal` için hesaplama, `linkedSignal`'in önceki değerini dikkate almalıdır.

Yukarıdaki örnekte, `shippingOptions` değiştiğinde `selectedOption` her zaman ilk seçeneğe geri döner. Ancak, seçilen seçenek hala listede bir yerdeyse kullanıcının seçimini korumak isteyebilirsiniz. Bunu gerçekleştirmek için ayrı _kaynak_ ve _hesaplama_ ile bir `linkedSignal` oluşturabilirsiniz:

```ts
interface ShippingMethod {
  id: number;
  name: string;
}

@Component({
  /* ... */
})
export class ShippingMethodPicker {
  constructor() {
    this.changeShipping(2);
    this.changeShippingOptions();
    console.log(this.selectedOption()); // {"id":2,"name":"Postal Service"}
  }

shippingOptions = signal<ShippingMethod[]>([
    {id: 0, name: 'Ground'},
    {id: 1, name: 'Air'},
    {id: 2, name: 'Sea'},
  ]);

selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
    // Bu `source` her değiştiğinde `selectedOption` `computation` sonucuna ayarlanır.
    source: this.shippingOptions,
    computation: (newOptions, previous) => {
      // newOptions daha önce seçilen seçeneği içeriyorsa, bu seçimi koru.
      // Aksi takdirde, ilk seçeneği varsayılan olarak kullan.
      return newOptions.find((opt) => opt.id === previous?.value.id) ?? newOptions[0];
    },
  });

changeShipping(index: number) {
    this.selectedOption.set(this.shippingOptions()[index]);
  }

changeShippingOptions() {
    this.shippingOptions.set([
      {id: 0, name: 'Email'},
      {id: 1, name: 'Sea'},
      {id: 2, name: 'Postal Service'},
    ]);
  }
}
```

Bir `linkedSignal` oluştururken, yalnızca bir hesaplama sağlamak yerine ayrı `source` ve `computation` özelliklerine sahip bir nesne iletebilirsiniz.

`source`, bir `computed` veya bileşen `input`'u gibi herhangi bir sinyal olabilir. `linkedSignal`, `source` değiştiğinde veya `computation` içinde referans verilen herhangi bir sinyal değiştiğinde değerini günceller ve sağlanan `computation`'ın sonucu ile değerini günceller.

`computation`, `source`'un yeni değerini ve bir `previous` nesnesini alan bir fonksiyondur. `previous` nesnesinin iki özelliği vardır-- `previous.source` `source`'un önceki değeridir ve `previous.value` `linkedSignal`'in önceki değeridir. Hesaplamanın yeni sonucuna karar vermek için bu önceki değerleri kullanabilirsiniz.

HELPFUL: `previous` parametresini kullanırken, `linkedSignal`'in jenerik tür argümanlarını açıkça sağlamak gereklidir. İlk jenerik tür `source`'un türüne karşılık gelir ve ikinci jenerik tür `computation`'ın çıktı türünü belirler.

## Özel eşitlik karşılaştırması

`linkedSignal`, diğer herhangi bir sinyal gibi, özel bir eşitlik fonksiyonu ile yapılandırılabilir. Bu fonksiyon, `linkedSignal`'in değerinin (hesaplama sonucu) değişip değişmediğini belirlemek için alt bağımlılıklar tarafından kullanılır:

```typescript
const activeUser = signal({id: 123, name: 'Morgan', isAdmin: true});

const activeUserEditCopy = linkedSignal(() => activeUser(), {
  // Aynı `id`'ye sahipse kullanıcıyı aynı kabul et.
  equal: (a, b) => a.id === b.id,
});

// Veya `source` ve `computation` ayrı kullanılırsa
const activeUserEditCopy = linkedSignal({
  source: activeUser,
  computation: (user) => user,
  equal: (a, b) => a.id === b.id,
});
```

## set işlemini özelleştirme

Bazen bir `linkedSignal`'ın `set` ve `update` işlemlerinin değeri doğrudan güncellemek yerine, gerçeğin kaynağına (source of truth) geri yazmasını isteyebilirsiniz. Bu davranışı, seçeneklere bir `set` fonksiyonu geçirerek özelleştirebilirsiniz.

Özel `set` fonksiyonu iki argüman alır:

1. Atanan yeni değer.
2. `linkedSignal`'ın iç durumunu doğrudan güncellemek için çağırabileceğiniz bir `rawSet` fonksiyonu (varsayılan davranışla eşleşir).

NOTE: `rawSet` kullanmak, `linkedSignal`'ın değerini doğrudan güncellemenize olanak tanır. Bu, hesaplamanın çalışmasını önlemek için yararlı olabilir; örneğin pahalı bir türetme söz konusuysa ve sonucu zaten biliyorsanız.

### Bir source signal'a geri yazma

Sıcaklığı Fahrenheit olarak gösteren ve düzenlenmesine izin veren, ancak gerçeğin kaynağı olarak bir Celsius signal kullanan bir bileşeni düşünün:

```typescript
const tempC = signal(0);
const tempF = linkedSignal(() => (tempC() * 9) / 5 + 32, {
  set: (valF) => tempC.set(((valF - 32) * 5) / 9),
});

console.log(tempF()); // 32

// Fahrenheit'i ayarlamak Celsius'u günceller, bu da reaktif olarak Fahrenheit'i günceller
tempF.set(212);
console.log(tempC()); // 100
console.log(tempF()); // 212
```

### Bir üst nesne içindeki bir özelliği güncelleme

Bir başka yaygın senaryo, bir üst nesne içindeki belirli bir özelliği güncellemektir. Üst nesne bir signal içinde tutulur ve siz iç içe geçmiş bir özelliğe bağlanırsınız:

```typescript
interface Order {
  id: number;
  shippingMethod: string;
}

const order = signal<Order>({
  id: 42,
  shippingMethod: 'Ground',
});

const shippingMethod = linkedSignal(() => order().shippingMethod, {
  set: (newMethod) => {
    // Değişikliği order'a geri yazmak için değişmez (immutable) bir güncelleme yap
    order.update((currentOrder) => ({
      ...currentOrder,
      shippingMethod: newMethod,
    }));
  },
});

console.log(shippingMethod()); // 'Ground'

// shippingMethod'u güncellemek üst order nesnesini günceller
shippingMethod.set('Air');
console.log(order()); // { id: 42, shippingMethod: 'Air' }
console.log(shippingMethod()); // 'Air'
```
# Resource'lar ile asenkron reaktivite

Tüm sinyal API'leri senkrondur-- `signal`, `computed`, `input`, vb. Ancak uygulamalar genellikle asenkron olarak kullanılabilen verilerle uğraşmak zorundadır. Bir `Resource`, asenkron verileri uygulamanızın sinyal tabanlı koduna dahil etmenin ve yine de verilerine senkron olarak erişmenin bir yolunu sunar.

Herhangi bir asenkron işlemi gerçekleştirmek için bir `Resource` kullanabilirsiniz, ancak `Resource` için en yaygın kullanım durumu bir sunucudan veri almaktır. Aşağıdaki örnek bazı kullanıcı verilerini almak için bir kaynak oluşturur.

Bir `Resource` oluşturmanın en kolay yolu `resource` fonksiyonudur.

```typescript
import {resource, Signal} from '@angular/core';

const userId: Signal<string> = getUserId();

const userResource = resource({
  // Reaktif bir hesaplama tanımla.
  // params değeri, okunan sinyallerden herhangi biri değiştiğinde yeniden hesaplanır.
  params: () => ({id: userId()}),

// Veri alan asenkron bir loader tanımla.
  // Resource, `params` değeri her değiştiğinde bu fonksiyonu çağırır.
  loader: ({params}) => fetchUser(params),
});

// Resource'un loader fonksiyonunun sonucuna dayalı bir computed sinyal oluştur.
const firstName = computed(() => {
  if (userResource.hasValue()) {
    // `hasValue` iki amaca hizmet eder:
    // - Türden `undefined`'ı çıkaran bir tür koruması görevi görür
    // - Resource hata durumundayken hata fırlatan `value` okumasına karşı korur
    return userResource.value().firstName;
  }

// Resource değeri `undefined` ise veya resource hata durumundaysa yedek değer
  return undefined;
});
```

`resource` fonksiyonu iki ana özelliğe sahip bir `ResourceOptions` nesnesi kabul eder: `params` ve `loader`.

`params` özelliği, bir parametre değeri üreten reaktif bir hesaplama tanımlar. Bu hesaplamada okunan sinyaller değiştiğinde, kaynak `computed`'a benzer şekilde yeni bir parametre değeri üretir.

`loader` özelliği bir `ResourceLoader` tanımlar-- bir miktar durum alan asenkron bir fonksiyon. Kaynak, `params` hesaplaması yeni bir değer ürettiğinde yükleyiciyi çağırır ve o değeri yükleyiciye iletir. Daha fazla ayrıntı için aşağıdaki [Resource yükleyicileri](#resource-loaderları) bölümüne bakın.

`Resource`, yükleyicinin sonuçlarını içeren bir `value` sinyaline sahiptir.

## Resource loader'ları

Bir kaynak oluştururken bir `ResourceLoader` belirtirsiniz. Bu yükleyici, tek bir parametre kabul eden asenkron bir fonksiyondur-- bir `ResourceLoaderParams` nesnesi-- ve bir değer döndürür.

`ResourceLoaderParams` nesnesi üç özellik içerir: `params`, `previous` ve `abortSignal`.

| Property      | Description                                                                                                                                           |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params`      | The value of the resource's `params` computation.                                                                                                     |
| `previous`    | An object with a `status` property, containing the previous `ResourceStatus`.                                                                         |
| `abortSignal` | An [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal). See [Aborting requests](#requestleri-iptal-etme) below for details. |

`params` hesaplaması `undefined` döndürürse, yükleyici fonksiyon çalışmaz ve kaynak durumu `'idle'` olur.

### Request'leri iptal etme

Kaynak, `params` hesaplaması yüklenme sırasında değişirse bekleyen bir yükleme işlemini iptal eder.

İptal edilen isteklere yanıt vermek için `ResourceLoaderParams` içindeki `abortSignal`'i kullanabilirsiniz. Örneğin, yerel `fetch` fonksiyonu bir `AbortSignal` kabul eder:

```typescript
const userId: Signal<string> = getUserId();

const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({params, abortSignal}): Promise<User> => {
    // fetch, verilen `AbortSignal` request'in iptal edildiğini belirttiğinde
    // bekleyen tüm HTTP request'lerini iptal eder.
    return fetch(`users/${params.id}`, {signal: abortSignal});
  },
});
```

`AbortSignal` ile istek iptali hakkında daha fazla ayrıntı için MDN'deki [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) sayfasına bakın.

### Yeniden yükleme

`reload` yöntemini çağırarak bir kaynağın `loader`'ını programatik olarak tetikleyebilirsiniz.

```typescript
const userId: Signal<string> = getUserId();

const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({params}) => fetchUser(params),
});

// ...

userResource.reload();
```

## Resource durumu

Kaynak nesnesi, asenkron yükleyicinin durumunu okumak için çeşitli sinyal özelliklerine sahiptir.

| Property    | Description                                                                                                     |
| ----------- | --------------------------------------------------------------------------------------------------------------- |
| `value`     | The most recent value of the resource, or `undefined` if no value has been received.                            |
| `hasValue`  | Whether the resource has a value.                                                                               |
| `error`     | The most recent error encountered while running the resource's loader, or `undefined` if no error has occurred. |
| `isLoading` | Whether the resource loader is currently running.                                                               |
| `status`    | The resource's specific `ResourceStatus`, as described below.                                                   |

`status` sinyali, kaynağın durumunu bir string sabiti kullanarak tanımlayan belirli bir `ResourceStatus` sağlar.

| Status        | `value()`         | Description                                                                  |
| ------------- | :---------------- | ---------------------------------------------------------------------------- |
| `'idle'`      | `undefined`       | The resource has no valid request and the loader has not run.                |
| `'error'`     | `undefined`       | The loader has encountered an error.                                         |
| `'loading'`   | `undefined`       | The loader is running as a result of the `params` value changing.            |
| `'reloading'` | Previous value    | The loader is running as a result of calling the resource's `reload` method. |
| `'resolved'`  | Resolved value    | The loader has completed.                                                    |
| `'local'`     | Locally set value | The resource's value has been set locally via `.set()` or `.update()`        |

Bu durum bilgisini, yükleme göstergeleri ve hata mesajları gibi kullanıcı arayüzü öğelerini koşullu olarak görüntülemek için kullanabilirsiniz.

## SSR ile `resource` verilerini önbelleğe alma

Bir uygulama sunucuda işlendiğinde, ilk HTML'i üretmek için bir kaynak yükleyicisi bir kez çalışır. Hidrasyon sırasında tarayıcı normalde aynı yükleyiciyi yeniden çalıştırır.

Sunucu sonucunu yeniden kullanmak için kaynak için bir `id` sağlayın. Angular, çözümlenen değeri sunucuda `TransferState` içinde saklar ve kaynağı istemcide `'resolved'` durumunda başlatmak için kullanır.

```ts
const userId: Signal<string> = getUserId();

const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({params}) => fetchUser(params),
  id: 'user-unique-id',
});
```

`id` değeri, Angular'ın önbelleğe alınmış girişi onu isteyen kaynakla eşleştirebilmesi için uygulamanız içinde benzersiz ve sunucu ile istemcide aynı olmalıdır.

IMPORTANT: Önbelleğe alınan değer sayfanın HTML'ine serileştirildiğinden, sunucu tarafı işlemeyi tetikleyen kullanıcıya özgü veri yükleyen kaynaklarda `id` ayarlamaktan kaçının, özellikle işlenen HTML önbelleğe alınabiliyorsa veya kullanıcılar arasında paylaşılabiliyorsa.

## `httpResource` ile reaktif veri çekme

[`httpResource`](/guide/http/http-resource), `HttpClient` etrafında size istek durumunu ve yanıtı sinyal olarak veren bir sarmalayıcıdır. Yakalayıcılar dahil Angular HTTP yığını aracılığıyla HTTP istekleri yapar.

## Snapshot'lar ile Resource bileşimi

`ResourceSnapshot`, bir kaynağın mevcut durumunun yapılandırılmış bir temsilidir. Her kaynağın mevcut durumunun sinyalini sağlayan bir `snapshot` özelliği vardır.

```ts
const userId: Signal<string> = getUserId();

const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({params}) => fetchUser(params),
});

const userSnapshot = userResource.snapshot;
```

Her anlık görüntü bir `status` ve bir `value` veya `error` içerir.

### Snapshot'lar ile resource'ları birleştirme

`resourceFromSnapshots` kullanarak anlık görüntülerden yeni kaynaklar oluşturabilirsiniz. Bu, kaynak davranışını dönüştürmek için `computed` ve `linkedSignal` gibi sinyal API'leri ile bileşimi mümkün kılar.

```ts
import {linkedSignal, resourceFromSnapshots, Resource, ResourceSnapshot} from '@angular/core';

function withPreviousValue<T>(input: Resource<T>): Resource<T> {
  const derived = linkedSignal<ResourceSnapshot<T>, ResourceSnapshot<T>>({
    source: input.snapshot,
    computation: (snap, previous) => {
      if (snap.status === 'loading' && previous && previous.value.status !== 'error') {
        // Giriş resource'u yükleme durumuna geçtiğinde, varsa
        // önceki durumundaki değeri koruruz.
        return {status: 'loading' as const, value: previous.value.value};
      }

// Aksi takdirde giriş resource'unun durumunu olduğu gibi iletiriz.
      return snap;
    },
  });

return resourceFromSnapshots(derived);
}

@Component({
  /*... */
})
export class AwesomeProfile {
  userId = input.required<number>();
  user = withPreviousValue(httpResource(() => `/user/${this.userId()}`));
  // userId değiştiğinde, user.value() yeni veri yüklenene kadar eski kullanıcı verisini korur
}
```
# Enjekte edilebilir bir service oluşturma

Servis, uygulamanızın ihtiyaç duyduğu herhangi bir değeri, fonksiyonu veya özelliği kapsayan geniş bir kategoridir.
Bir servis tipik olarak odaklı ve iyi tanımlanmış bir amaca sahip bir sınıftır.
Bir bileşen, bağımlılık enjeksiyonu (DI) ile kullanabileceğiniz sınıf türlerinden biridir.

Angular, modülerliği ve yeniden kullanılabilirliği artırmak için bileşenleri servislerden ayırır.
Bir bileşenin görünümle ilgili özelliklerini diğer işleme türlerinden ayırarak, bileşen sınıflarınızı yalın ve verimli tutabilirsiniz.

İdeal olarak, bileşeninizin sorumluluğu kullanıcı deneyimini etkinleştirmek ve başka hiçbir şey olmamalıdır.
Bir bileşen, görünüm (şablon tarafından render edilen) ile uygulama mantığı (genellikle bir model kavramı içeren) arasında aracılık etmek için veri bağlama için özellikler ve yöntemler sunmalıdır.

Bir bileşenden servislere, sunucudan veri getirme, kullanıcı girişini doğrulama veya konsola günlükleme gibi görevleri devredebilirsiniz.
Bu tür görevleri enjekte edilebilir bir servis sınıfında tanımlayarak, bu yetenekleri herhangi bir bileşen için kullanılabilir hale getirirsiniz.
Aynı tür servisin farklı sağlayıcılarını farklı koşullara göre yapılandırarak uygulamanızı daha uyarlanabilir hale de getirebilirsiniz.

Angular bu ilkeleri katı bir şekilde zorunlu kılmaz.
Angular, uygulama mantığınızı servisler halinde düzenlemenizi ve bu servisleri DI aracılığıyla bileşenlere sunmanızı kolaylaştırarak bu ilkeleri takip etmenize yardımcı olur.

## Service örnekleri

İşte tarayıcı konsoluna günlük kaydı yapan bir servis sınıfı örneği:

```ts
{header: "logger.service.ts (class)"}
export class Logger {
  log(msg: unknown) {
    console.log(msg);
  }
  error(msg: unknown) {
    console.error(msg);
  }
  warn(msg: unknown) {
    console.warn(msg);
  }
}
```

Servisler diğer servislere bağımlı olabilir.
Örneğin, işte `Logger` servisine bağımlı olan ve ayrıca kahramanları almak için `BackendService` kullanan bir `HeroService`.
Bu servis de sunucudan asenkron olarak kahramanları getirmek için `HttpClient` servisine bağımlı olabilir:

```ts
{header: "hero.service.ts", highlight="[7,8,12,13]"}
import {inject} from '@angular/core';

export class HeroService {
  private heroes: Hero[] = [];

private backend = inject(BackendService);
  private logger = inject(Logger);

async getHeroes() {
    // Getir
    this.heroes = await this.backend.getAll(Hero);
    // Günlükle
    this.logger.log(`Fetched ${this.heroes.length} heroes.`);
    return this.heroes;
  }
}
```

## CLI ile enjekte edilebilir bir service oluşturma

Angular CLI, yeni bir servis oluşturmak için bir komut sağlar. Aşağıdaki örnekte, mevcut bir uygulamaya yeni bir servis eklersiniz.

`src/app/heroes` klasöründe yeni bir `HeroService` sınıfı oluşturmak için şu adımları izleyin:

1. Şu [Angular CLI](/tools/cli) komutunu çalıştırın:

```sh
ng generate service heroes/hero
```

Bu komut aşağıdaki varsayılan `HeroService`'i oluşturur:

```ts
{header: 'heroes/hero.service.ts (CLI-generated)'}
import {Service} from '@angular/core';

@Service()
export class HeroService {}
```

`@Service()` dekoratörü, Angular'ın bu sınıfı DI sisteminde kullanabileceğini ve `HeroService`'in uygulamanız genelinde kullanılabilir olduğunu belirtir.

`mock.heroes.ts` dosyasından kahramanları döndüren bir `getHeroes()` yöntemi ekleyerek kahraman sahte verilerini alın:

```ts
{header: 'hero.service.ts'}
import {Service} from '@angular/core';
import {HEROES} from './mock-heroes';

@Service()
export class HeroService {
  getHeroes() {
    return HEROES;
  }
}
```

Netlik ve bakım kolaylığı açısından, bileşenleri ve servisleri ayrı dosyalarda tanımlamanız önerilir.

## Service'leri enjekte etme

Bir servisi bir bileşene enjekte etmek için, bağımlılık için bir sınıf alanı bildirin ve bunu başlatmak için Angular'ın [`inject`](/api/core/inject) fonksiyonunu kullanın.

Aşağıdaki örnek, `HeroList` içinde `HeroService`'i belirtir.
`heroService`'in türü `HeroService`'dir.

```ts
import {inject} from '@angular/core';

export class HeroList {
  private heroService = inject(HeroService);
}
```

Bir servisi bileşenin constructor'ı kullanarak da enjekte etmek mümkündür:

```ts
{header: 'hero-list.ts (constructor signature)'}
  constructor(private heroService: HeroService)
```

[`inject`](/api/core/inject) yöntemi hem sınıflarda hem de fonksiyonlarda kullanılabilirken, constructor yöntemi doğal olarak yalnızca bir sınıf constructor'ında kullanılabilir. Ancak her iki durumda da bir bağımlılığı yalnızca geçerli bir [enjeksiyon bağlamında](guide/di/dependency-injection-context), genellikle bir bileşenin oluşturulması veya başlatılması sırasında enjekte edebilirsiniz.

## Diğer service'lerde service'leri enjekte etme

Bir servis başka bir servise bağımlı olduğunda, bir bileşene enjekte etmeyle aynı deseni izleyin.
Aşağıdaki örnekte, `HeroService` faaliyetlerini raporlamak için bir `Logger` servisine bağımlıdır:

```ts
{header: 'hero.service.ts, highlight: [[3],[9],[12]]}
import {inject, Service} from '@angular/core';
import {HEROES} from './mock-heroes';
import {Logger} from '../logger.service';

@Service()
export class HeroService {
  private logger = inject(Logger);

getHeroes() {
    this.logger.log('Getting heroes.');
    return HEROES;
  }
}
```

Bu örnekte, `getHeroes()` yöntemi kahramanları getirirken bir mesaj kaydederek `Logger` servisini kullanır.

## Sırada ne var
# Service'leri lazy loading ile yükleme

IMPORTANT: Lazy loading'in çalışması için, yüklediğiniz servisin otomatik olarak sağlanması (auto-provided) gerekir. Onu `@Injectable({providedIn: 'root'})` veya [`@Service()`](guide/di/creating-and-using-services#service-dekoratörünü-kullanma) ile süsleyin. Otomatik sağlama olmadan Angular'ın, servis yüklendikten sonra onu oluşturmasının bir yolu yoktur.

Angular'ın `injectAsync` fonksiyonu, bir servisi yalnızca gerçekten ihtiyaç duyulduğunda, talep üzerine yüklemenize olanak tanır. Bu, bir servis büyük bir kütüphaneye ya da nadiren kullanılan bir özelliğe bağlı olduğunda ve bunun bedelini ilk sayfa yüklemesinde ödemek istemediğinizde kullanışlıdır.

`injectAsync` kullandığınızda, servisin kodu bundler'ınız tarafından ayrı bir JavaScript chunk'ına ayrılır ve örneği ilk kez istediğinizde indirilir. Yüklendikten sonra Angular, servisi normal DI sistemi üzerinden çözer, böylece servis hâlâ diğer enjekte edilebilirlere bağlı olabilir ve diğer herhangi bir singleton gibi davranır.

## Bir service'i lazily enjekte etme

Ağır bir spreadsheet kütüphanesine bağlı olan bir `ReportExporter` düşünün. Çoğu kullanıcı raporu açar; yalnızca birkaçı **Export** düğmesine tıklar. Exporter'ı talep üzerine yükleyin:

```typescript
import {Component, injectAsync} from '@angular/core';

@Component({
  selector: 'app-report',
  template: `<button (click)="export()">Export</button>`,
})
export class Report {
  private exporter = injectAsync(() => import('./report-exporter').then((m) => m.ReportExporter));

async export() {
    const exporter = await this.exporter();
    exporter.export();
  }
}
```

`this.exporter()` çağrısı ilk kez yapıldığında dinamik import tetiklenir ve servis DI'dan çözülür. Sonraki çağrılar aynı promise'i yeniden kullanır, böylece chunk yalnızca bir kez indirilir.

Lazy olarak yüklenen servis [default export](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) ise, dinamik import'u doğrudan geçirin, Angular sizin için `default`'u açar:

```ts
{header: report-exporter.ts}
@Service()
export default class ReportExporter {
  /* … */
}
```

```ts
{header: report.ts}
private exporter = injectAsync(() => import('./report-exporter'));
```

## Bağımlılığı önceden yükleme (prefetch)

Varsayılan olarak lazy chunk, yalnızca döndürülen fonksiyonu çağırdığınızda indirilir. Seçeneklerde bir `prefetch` tetikleyicisi geçirerek indirmeyi daha erken başlatabilirsiniz. Bir tetikleyici, `Promise` döndüren herhangi bir fonksiyondur; promise çözüldüğünde Angular loader'ı başlatır.

Angular, tarayıcı boşta kalana kadar bekleyen yerleşik bir tetikleyici olan `onIdle` ile birlikte gelir:

```ts
import {Component, injectAsync, onIdle} from '@angular/core';

@Component({
  /* … */
})
export class Report {
  private exporter = injectAsync(() => import('./report-exporter').then((m) => m.ReportExporter), {
    prefetch: onIdle,
  });
}
```

Ayrıca `onIdle`'ı bir maksimum bekleme süresiyle yapılandırabilirsiniz, böylece prefetch yoğun sayfalarda bile her zaman bilinen bir zaman aralığı içinde gerçekleşir:

```ts
injectAsync(loader, {prefetch: () => onIdle({timeout: 1_000})});
```

NOTE: Prefetching fırsatçıdır (opportunistic). Kullanıcı, prefetch tetiklenmeden önce özelliği çağırırsa, Angular yine de bağımlılığı hemen yükler ve hazır olur olmaz `await`'inizi çözer.

## Özel bir prefetch tetikleyicisi sağlama

Bir `PrefetchTrigger` yalnızca bir promise döndüren bir fonksiyondur; promise çözülür çözülmez loader çalışır. Prefetching'i bir hover ya da bir scheduler tick gibi kendi sinyallerinizle hizalamak için bunu kullanın:

```ts
import {PrefetchTrigger} from '@angular/core';

export function onHover(target: HTMLElement): PrefetchTrigger {
  return () =>
    new Promise<void>((resolve) => {
      target.addEventListener('pointerenter', () => resolve(), {once: true});
    });
}
```
# Enjeksiyon bağlamı

Bağımlılık enjeksiyonu (DI) sistemi, mevcut enjektörün kullanılabilir olduğu bir çalışma zamanı bağlamına dayanır.

Bu, enjektörlerin yalnızca kodu bu bağlam içinde çalıştırdığınızda çalıştığı anlamına gelir.

Aşağıdaki durumlarda kullanılabilir bir enjeksiyon bağlamınız olur:

- DI sistemi tarafından örneklenen bir sınıfın, örneğin `@Injectable` veya `@Component`, oluşturulması sırasında (`constructor` aracılığıyla).
- Bu tür sınıfların alan başlatıcılarında.
- Bir `Provider` veya `@Injectable` için `useFactory` olarak belirtilen fabrika fonksiyonunda.
- Bir `InjectionToken` için belirtilen `factory` fonksiyonunda.
- Bir enjeksiyon bağlamında çalışan bir yığın çerçevesi içinde.

Bir enjeksiyon bağlamında ne zaman olduğunuzu bilmek, bağımlılıkları almak için [`inject`](api/core/inject) fonksiyonunu kullanmanıza olanak tanır.

NOTE: Sınıf constructor'larında ve alan başlatıcılarında `inject()` kullanmanın temel örnekleri için [genel bakış kılavuzuna](/guide/di#inject-nerede-kullanılabilir) bakın.

## Bağlamdaki yığın çerçevesi

Bazı API'ler bir enjeksiyon bağlamı içinde çalışacak şekilde tasarlanmıştır. Bu, örneğin rota korumaları için geçerlidir. Bu, koruma fonksiyonu içinde servislere erişmek için [`inject`](api/core/inject) kullanmanıza olanak tanır.

İşte `CanActivateFn` için bir örnek

```ts
{highlight: [3]}
const canActivateTeam: CanActivateFn = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  return inject(PermissionsService).canActivate(inject(UserToken), route.params.id);
};
```

## Bir enjeksiyon bağlamında çalıştırma

Zaten bir enjeksiyon bağlamında olmadan bir fonksiyonu bir enjeksiyon bağlamı içinde çalıştırmanız gerekiyorsa, `runInInjectionContext` kullanabilirsiniz.
Bu, `EnvironmentInjector` gibi bir enjektöre erişim gerektirir:

```ts
{highlight: [9], header:"hero.service.ts"}
@Injectable({
  providedIn: 'root',
})
export class HeroService {
  private environmentInjector = inject(EnvironmentInjector);

someMethod() {
    runInInjectionContext(this.environmentInjector, () => {
      inject(SomeService); // Enjekte edilen service ile ihtiyacınız olanı yapın
    });
  }
}
```

[`inject`](/api/core/inject)'in yalnızca enjektör istenen token'ı çözebiliyorsa bir örnek döndürdüğünü unutmayın.

## Bağlamı doğrulama

Angular, mevcut bağlamın bir enjeksiyon bağlamı olduğunu doğrulamak ve değilse net bir hata fırlatmak için `assertInInjectionContext` yardımcı fonksiyonunu sağlar. Hata mesajının doğru API giriş noktasına işaret etmesi için çağıran fonksiyona bir referans iletin. Bu, varsayılan genel enjeksiyon hatasından daha net ve uygulanabilir bir mesaj üretir.

```ts
import {ElementRef, assertInInjectionContext, inject} from '@angular/core';

export function injectNativeElement<T extends Element>(): T {
  assertInInjectionContext(injectNativeElement);
  return inject(ElementRef).nativeElement;
}
```

Bu yardımcıyı **bir enjeksiyon bağlamından** (constructor, alan başlatıcı, sağlayıcı fabrikası veya `runInInjectionContext` aracılığıyla çalıştırılan kod) çağırabilirsiniz:

```ts
import {Component, inject} from '@angular/core';
import {injectNativeElement} from './dom-helpers';

@Component({
  /* … */
})
export class PreviewCard {
  readonly hostEl = injectNativeElement<HTMLElement>(); // Alan başlatıcı bir enjeksiyon bağlamında çalışır.

onAction() {
    const anotherRef = injectNativeElement<HTMLElement>(); // Başarısız: enjeksiyon bağlamı dışında çalışır.
  }
}
```

## Bağlam dışında DI kullanma

Bir enjeksiyon bağlamı dışında [`inject`](api/core/inject) veya `assertInInjectionContext` çağırırsanız, Angular [NG0203 hatasını](/errors/NG0203) fırlatır.
# Hiyerarşik injector'lar

Bu kılavuz, Angular'ın hiyerarşik bağımlılık enjeksiyonu sistemi hakkında çözümleme kuralları, değiştiriciler ve gelişmiş desenler dahil olmak üzere derinlemesine bilgi sağlar.

NOTE: Enjektör hiyerarşisi ve sağlayıcı kapsamı hakkında temel kavramlar için [bağımlılık sağlayıcılarını tanımlama kılavuzuna](guide/di/defining-dependency-providers#angularda-injector-hiyerarşisi) bakın.

## Injector hiyerarşi türleri

Angular'da iki enjektör hiyerarşisi vardır:

| Injector hierarchies            | Details                                                                                                                                                                                        |
| :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `EnvironmentInjector` hierarchy | Bu hiyerarşide `@Service()` veya `ApplicationConfig` içindeki `providers` dizisini kullanarak bir `EnvironmentInjector` yapılandırın.                                                          |
| `ElementInjector` hierarchy     | Her DOM elemanında örtük olarak oluşturulur. Bir `ElementInjector`, `@Directive()` veya `@Component()` üzerindeki `providers` özelliğinde yapılandırmadığınız sürece varsayılan olarak boştur. |
`NgModule` tabanlı uygulamalar için, `@NgModule()` veya `@Injectable()` anotasyonunu kullanarak `ModuleInjector` hiyerarşisi ile bağımlılıklar sağlayabilirsiniz.
### `EnvironmentInjector`

`EnvironmentInjector` iki şekilde yapılandırılabilir:

- `@Service()`
- `ApplicationConfig` `providers` dizisi
`@Service()` dekoratörünü kullanmak, `ApplicationConfig` `providers` dizisini kullanmaktan tercih edilir. `@Service` ile optimizasyon araçları, uygulamanızın kullanmadığı servisleri kaldıran tree-shaking işlemi yapabilir. Bu, daha küçük paket boyutlarıyla sonuçlanır.

Tree-shaking özellikle bir kütüphane için kullanışlıdır çünkü kütüphaneyi kullanan uygulama onu enjekte etme ihtiyacı duymayabilir.
`EnvironmentInjector`, `ApplicationConfig.providers` tarafından yapılandırılır.

Servisleri `@Service()` kullanarak aşağıdaki gibi sağlayın:

```ts
{highlight:[4]}
import {Service} from '@angular/core';

@Service() // <--bu service'i root EnvironmentInjector'da sağlar
export class ItemService {
  name = 'telephone';
}
```

`@Service()` veya `@Injectable()` dekoratörleri bir servis sınıfını tanımlar.

### ModuleInjector

`NgModule` tabanlı uygulamalarda, ModuleInjector iki şekilde yapılandırılabilir:

- `@Service()` dekoratörü,
- `@Injectable()` `providedIn` özelliğini `root` veya `platform` olarak belirtmek için kullanma
- `@NgModule()` `providers` dizisi

`ModuleInjector`, `@NgModule.providers` ve `NgModule.imports` özelliği tarafından yapılandırılır. `ModuleInjector`, `NgModule.imports` özyinelemeli olarak takip edilerek ulaşılabilen tüm providers dizilerinin düzleştirilmiş halidir.

Tembel yüklenen diğer `@NgModule`'lar yüklendiğinde alt `ModuleInjector` hiyerarşileri oluşturulur.

### Platform injector'ı

`root`'un üzerinde iki enjektör daha vardır, ek bir `EnvironmentInjector` ve `NullInjector()`.

Angular'ın uygulamayı `main.ts` içinde nasıl başlattığını düşünün:

```ts
bootstrapApplication(App, appConfig);
```

`bootstrapApplication()` yöntemi, `ApplicationConfig` örneği tarafından yapılandırılan platform enjektörünün bir alt enjektörünü oluşturur.
Bu, `root` `EnvironmentInjector`'dır.

`platformBrowserDynamic()` yöntemi, platforma özgü bağımlılıklar içeren bir `PlatformModule` tarafından yapılandırılmış bir enjektör oluşturur.
Bu, birden fazla uygulamanın bir platform yapılandırmasını paylaşmasına olanak tanır.
Örneğin, bir tarayıcının kaç uygulama çalıştırırsanız çalıştırın yalnızca bir URL çubuğu vardır.
`platformBrowser()` fonksiyonunu kullanarak `extraProviders` sağlayarak platform seviyesinde ek platforma özgü sağlayıcılar yapılandırabilirsiniz.

Hiyerarşideki bir sonraki üst enjektör, ağacın tepesi olan `NullInjector()`'dır.
Ağaçta `NullInjector()` içinde bir servis arayacak kadar yukarı çıktıysanız, `@Optional()` kullanmadığınız sürece bir hata alırsınız çünkü sonuçta her şey `NullInjector()`'da biter ve `@Optional()` durumunda `null` döndürür ya da bir hata fırlatır.
`@Optional()` hakkında daha fazla bilgi için bu kılavuzun [`@Optional()` bölümüne](#optional) bakın.

Aşağıdaki diyagram, önceki paragrafların açıkladığı gibi `root` `ModuleInjector` ile üst enjektörleri arasındaki ilişkiyi temsil eder.

```mermaid
stateDiagram-v2
    elementInjector: EnvironmentInjector<br>(configured by Angular)<br>has special things like DomSanitizer => providedIn 'platform'
    rootInjector: root EnvironmentInjector<br>(configured by AppConfig)<br>has things for your app => bootstrapApplication(..., AppConfig)
    nullInjector: NullInjector<br>always throws an error unless<br>you use @Optional()

direction BT
    rootInjector --> elementInjector
    elementInjector --> nullInjector
```

`root` adı özel bir takma ad olsa da, diğer `EnvironmentInjector` hiyerarşilerinin takma adları yoktur.
Router gibi dinamik olarak yüklenen bir bileşen oluşturulduğunda, alt `EnvironmentInjector` hiyerarşileri oluşturacak olan `EnvironmentInjector` hiyerarşileri oluşturma seçeneğiniz vardır.

Tüm istekler, `bootstrapApplication()` yöntemine iletilen `ApplicationConfig` örneği ile yapılandırdıysanız veya tüm sağlayıcıları kendi servislerinde `root` ile kaydettiyseniz, root enjektöre yönlendirilir.
`bootstrapApplication`'ın `ApplicationConfig`'inde uygulama çapında bir sağlayıcı yapılandırırsanız, `@Injectable()` meta verilerinde `root` için yapılandırılmış olanı geçersiz kılar.
Bunu, birden fazla uygulamayla paylaşılan bir servisin varsayılan olmayan bir sağlayıcısını yapılandırmak için yapabilirsiniz.

İşte bileşen yönlendirici yapılandırmasının, `ApplicationConfig`'in `providers` listesinde sağlayıcısını listeleyerek varsayılan olmayan bir [konum stratejisi](guide/routing/common-router-tasks#locationstrategy-ve-tarayıcı-url-stilleri) içerdiği bir örnek.

```ts
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}];
```

`NgModule` tabanlı uygulamalar için, uygulama çapında sağlayıcıları `AppModule` `providers`'da yapılandırın.
### `ElementInjector`

Angular, her DOM elemanı için örtük olarak `ElementInjector` hiyerarşileri oluşturur.

`@Component()` dekoratöründe `providers` veya `viewProviders` özelliğini kullanarak bir servis sağlamak, bir `ElementInjector` yapılandırır.
Örneğin, aşağıdaki `TestComponent`, servisi şu şekilde sağlayarak `ElementInjector`'ı yapılandırır:

```ts
{highlight:[3]}
@Component({
  /* … */
  providers: [{ provide: ItemService, useValue: { name: 'lamp' } }]
})
export class TestComponent
```

HELPFUL: `EnvironmentInjector` ağacı, `ModuleInjector` ve `ElementInjector` ağacı arasındaki ilişkiyi anlamak için [çözümleme kuralları](#çözümleme-kuralları) bölümüne bakın.

Bir bileşende servisler sağladığınızda, bu servis o bileşen örneğindeki `ElementInjector` aracılığıyla kullanılabilir.
[Çözümleme kuralları](#çözümleme-kuralları) bölümünde açıklanan görünürlük kurallarına göre alt bileşen/direktiflerde de görünür olabilir.

Bileşen örneği yok edildiğinde, o servis örneği de yok edilir.

#### `@Directive()` and `@Component()`

Bir bileşen özel bir direktif türüdür, yani `@Directive()`'in bir `providers` özelliği olduğu gibi, `@Component()`'in de vardır.
Bu, direktiflerin yanı sıra bileşenlerin de `providers` özelliğini kullanarak sağlayıcılar yapılandırabileceği anlamına gelir.
`providers` özelliğini kullanarak bir bileşen veya direktif için bir sağlayıcı yapılandırdığınızda, bu sağlayıcı o bileşen veya direktifin `ElementInjector`'ına aittir.
Aynı eleman üzerindeki bileşenler ve direktifler bir enjektörü paylaşır.

## Çözümleme kuralları

Bir bileşen/direktif için bir token çözümlenirken, Angular bunu iki aşamada çözümler:

1. `ElementInjector` hiyerarşisindeki üst elemanlara karşı.
2. `EnvironmentInjector` hiyerarşisindeki üst elemanlara karşı.

Bir bileşen bir bağımlılık bildirdiğinde, Angular önce bu bağımlılığı kendi `ElementInjector`'ı ile karşılamaya çalışır.
Bileşenin enjektöründe sağlayıcı yoksa, isteği üst bileşenin `ElementInjector`'ına iletir.

İstekler, Angular isteği işleyebilecek bir enjektör bulana veya üst `ElementInjector` hiyerarşileri tükenene kadar yönlendirilmeye devam eder.

Angular herhangi bir `ElementInjector` hiyerarşisinde sağlayıcıyı bulamazsa, isteğin kaynaklandığı elemana geri döner ve `EnvironmentInjector` hiyerarşisine bakar.
Angular hala sağlayıcıyı bulamazsa, bir hata fırlatır.

Aynı DI token'ı için farklı seviyelerde bir sağlayıcı kaydettiyseniz, Angular'ın karşılaştığı ilki bağımlılığı çözmek için kullanılır.
Örneğin, bir sağlayıcı servise ihtiyaç duyan bileşende yerel olarak kayıtlıysa, Angular aynı servisin başka bir sağlayıcısını aramaz.

HELPFUL: `NgModule` tabanlı uygulamalarda, Angular `ElementInjector` hiyerarşilerinde sağlayıcı bulamazsa `ModuleInjector` hiyerarşisinde arama yapacaktır.

## Çözümleme değiştiricileri

Angular'ın çözümleme davranışı `optional`, `self`, `skipSelf` ve `host` ile değiştirilebilir.
Her birini `@angular/core`'dan içe aktarın ve servisinizi enjekte ederken [`inject`](/api/core/inject) yapılandırmasında kullanın.

### Değiştirici türleri

Çözümleme değiştiricileri üç kategoriye ayrılır:

- Angular aradığınızı bulamazsa ne yapılacağı, yani `optional`
- Aramaya nereden başlanacağı, yani `skipSelf`
- Aramanın nerede duracağı, `host` ve `self`

Varsayılan olarak, Angular her zaman mevcut `Injector`'da başlar ve sonuna kadar aramaya devam eder.
Değiştiriciler, başlangıç veya _self_ konumunu ve bitiş konumunu değiştirmenize olanak tanır.

Ayrıca, şunlar hariç tüm değiştiricileri birleştirebilirsiniz:

- `host` ve `self`
- `skipSelf` ve `self`.

### `optional`

`optional`, Angular'ın enjekte ettiğiniz bir servisi isteğe bağlı olarak değerlendirmesine olanak tanır.
Bu şekilde, çalışma zamanında çözümlenemezse, Angular bir hata fırlatmak yerine servisi `null` olarak çözümler.
Aşağıdaki örnekte, `OptionalService` servisi serviste, `ApplicationConfig`'de, `@NgModule()`'da veya bileşen sınıfında sağlanmamıştır, bu nedenle uygulamada hiçbir yerde kullanılamaz.

```ts
{header:"src/app/optional/optional.ts"}
export class Optional {
  public optional? = inject(OptionalService, {optional: true});
}
```

### `self`

Angular'ın yalnızca mevcut bileşen veya direktifin `ElementInjector`'ına bakması için `self` kullanın.

`self` için iyi bir kullanım durumu, bir servisi yalnızca mevcut ana elemanda mevcutsa enjekte etmektir.
Bu durumda hataları önlemek için `self`'i `optional` ile birleştirin.

Örneğin, aşağıdaki `SelfNoData`'da, enjekte edilen `LeafService`'e bir özellik olarak dikkat edin.

```ts
{header: 'self-no-data.ts', highlight: [7]}
@Component({
  selector: 'app-self-no-data',
  templateUrl: './self-no-data.html',
  styleUrls: ['./self-no-data.css'],
})
export class SelfNoData {
  public leaf = inject(LeafService, {optional: true, self: true});
}
```

Bu örnekte, bir üst sağlayıcı vardır ve servisi enjekte etmek değeri döndürür, ancak servisi `self` ve `optional` ile enjekte etmek `null` döndürür çünkü `self` enjektöre mevcut ana elemanda aramayı durdurmasını söyler.

Başka bir örnek, `FlowerService` için bir sağlayıcıya sahip bileşen sınıfını gösterir.
Bu durumda, enjektör `FlowerService`'i bulduğu için mevcut `ElementInjector`'dan daha ileriye bakmaz ve lale 🌷 döndürür.

```ts
{header:"src/app/self/self.ts"}
@Component({
  selector: 'app-self',
  templateUrl: './self.html',
  styleUrls: ['./self.css'],
  providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
})
export class Self {
  public flower = inject(FlowerService, {self: true});
}
```

### `skipSelf`

`skipSelf`, `self`'in tersidir.
`skipSelf` ile Angular, mevcut elemandan değil üst `ElementInjector`'dan başlayarak bir servis arar.
Yani üst `ElementInjector`, `emoji` için eğreltiotu <code>🌿</code> değerini kullanıyorsa, ancak bileşenin `providers` dizisinde akçaağaç yaprağı <code>🍁</code> varsa, Angular akçaağaç yaprağını <code>🍁</code> yok sayar ve eğreltiotu <code>🌿</code> kullanır.

Bunu kodda görmek için, aşağıdaki `emoji` değerinin üst bileşenin kullandığı değer olduğunu varsayın, bu serviste olduğu gibi:

```ts
{header: 'leaf.service.ts'}
export class LeafService {
  emoji = '🌿';
}
```

Alt bileşende farklı bir değeriniz olduğunu, akçaağaç yaprağı 🍁, ancak bunun yerine üst değeri kullanmak istediğinizi hayal edin.
`skipSelf` kullanacağınız yer burasıdır:

```ts
{header:"skipself.ts" highlight:[[6],[10]]}
@Component({
  selector: 'app-skipself',
  templateUrl: './skipself.html',
  styleUrls: ['./skipself.css'],
  // Angular bu LeafService örneğini yok sayar
  providers: [{provide: LeafService, useValue: {emoji: '🍁'}}],
})
export class Skipself {
  // skipSelf'i inject seçeneği olarak kullan
  public leaf = inject(LeafService, {skipSelf: true});
}
```

Bu durumda, `emoji` için alacağınız değer akçaağaç yaprağı <code>🍁</code> değil eğreltiotu <code>🌿</code> olacaktır.

#### `skipSelf` option with `optional`

Değer `null` ise bir hatayı önlemek için `skipSelf` seçeneğini `optional` ile kullanın.

Aşağıdaki örnekte, `Person` servisi özellik başlatma sırasında enjekte edilir.
`skipSelf`, Angular'a mevcut enjektörü atlamasını söyler ve `optional`, `Person` servisi `null` olması durumunda bir hatayı önler.

```ts
class Person {
  parent = inject(Person, {optional: true, skipSelf: true});
}
```

### `host`

`host`, sağlayıcıları ararken enjektör ağacında bir bileşeni son durak olarak belirlemenize olanak tanır.

Ağaçta daha yukarıda bir servis örneği olsa bile, Angular aramaya devam etmez.
`host`'u şu şekilde kullanın:

```ts
{header:"host.ts" highlight:[[6],[9]]}
@Component({
  selector: 'app-host',
  templateUrl: './host.html',
  styleUrls: ['./host.css'],
  // service'i sağla
  providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
})
export class Host {
  // service'i enjekte ederken host kullan
  flower = inject(FlowerService, {host: true, optional: true});
}
```

`Host`, `host` seçeneğine sahip olduğundan, `Host`'un üstünün `flower.emoji` değeri ne olursa olsun, `Host` lale <code>🌷</code> kullanacaktır.

### Constructor injection ile değiştiriciler

Daha önce sunulduğu gibi, constructor enjeksiyonunun davranışı `@Optional()`, `@Self()`, `@SkipSelf()` ve `@Host()` ile değiştirilebilir.

Her birini `@angular/core`'dan içe aktarın ve servisinizi enjekte ederken bileşen sınıfı constructor'ında kullanın.

```ts
{header:"self-no-data.ts" highlight:[2]}
export class SelfNoData {
  constructor(@Self() @Optional() public leaf?: LeafService) {}
}
```

## Şablonun mantıksal yapısı

Bileşen sınıfında servisler sağladığınızda, servisler bu servisleri nerede ve nasıl sağladığınıza göre `ElementInjector` ağacı içinde görünür olur.

Angular şablonunun temel mantıksal yapısını anlamak, servisleri yapılandırmanız ve bunun karşılığında görünürlüklerini kontrol etmeniz için bir temel sağlar.

Bileşenler, aşağıdaki örnekte olduğu gibi şablonlarınızda kullanılır:

```html
<app-root> <app-child />; </app-root>
```

HELPFUL: Genellikle bileşenleri ve şablonlarını ayrı dosyalarda bildirirsiniz.
Enjeksiyon sisteminin nasıl çalıştığını anlamak amacıyla, bunlara birleşik bir mantıksal ağaç açısından bakmak faydalıdır.
_Mantıksal_ terimi bunu render ağacından, yani uygulamanızın DOM ağacından ayırır.
Bileşen şablonlarının nerede bulunduğunu işaretlemek için bu kılavuz, render ağacında gerçekte var olmayan ve yalnızca zihinsel model amaçlı olan `<#VIEW>` sözde elemanını kullanır.

Aşağıda, `<app-root>` ve `<app-child>` görünüm ağaçlarının tek bir mantıksal ağaçta nasıl birleştirildiğine dair bir örnek verilmiştir:

```html
<app-root>
  <#VIEW>
    <app-child>
     <#VIEW>
       …content goes here…
     </#VIEW>
    </app-child>
  </#VIEW>
</app-root>
```

`<#VIEW>` sınırlamasını anlamak, bileşen sınıfında servisleri yapılandırdığınızda özellikle önemlidir.

## Örnek: `@Component()` içinde service'ler sağlama

`@Component()` (veya `@Directive()`) dekoratörünü kullanarak servisleri nasıl sağladığınız, görünürlüklerini belirler.
Aşağıdaki bölümler, servis görünürlüğünü `skipSelf` ve `host` ile değiştirme yollarıyla birlikte `providers` ve `viewProviders`'ı gösterir.

Bir bileşen sınıfı servisleri iki şekilde sağlayabilir:

| Arrays                       | Details                                        |
| :--------------------------- | :--------------------------------------------- |
| With a `providers` array     | `@Component({ providers: [SomeService] })`     |
| With a `viewProviders` array | `@Component({ viewProviders: [SomeService] })` |

Aşağıdaki örneklerde, bir Angular uygulamasının mantıksal ağacını göreceksiniz.
Enjektörün şablonlar bağlamında nasıl çalıştığını göstermek için mantıksal ağaç, uygulamanın HTML yapısını temsil edecektir.
Örneğin, mantıksal ağaç `<child-component>`'in `<parent-component>`'in doğrudan çocuğu olduğunu gösterecektir.

Mantıksal ağaçta özel nitelikler göreceksiniz: `@Provide`, `@Inject` ve `@ApplicationConfig`.
Bunlar gerçek nitelikler değildir, arka planda neler olduğunu göstermek için buradalar.

| Angular service attribute | Details                                                                           |
| :------------------------ | :-------------------------------------------------------------------------------- |
| `@Inject(Token)=>Value`   | Mantıksal ağaçtaki bu konumda `Token` enjekte edilirse, değeri `Value` olacaktır. |
| `@Provide(Token=Value)`   | Mantıksal ağaçtaki bu konumda `Token`'ın `Value` ile sağlandığını gösterir.       |
| `@ApplicationConfig`      | Bu konumda yedek bir `EnvironmentInjector` kullanılması gerektiğini gösterir.     |

### Örnek uygulama yapısı

Örnek uygulamada, `root`'ta kırmızı hibiskus <code>🌺</code> `emoji` değeri ile sağlanan bir `FlowerService` vardır.

```ts
{header:"flower.service.ts"}
@Service()
export class FlowerService {
  emoji = '🌺';
}
```

Yalnızca bir `App` ve bir `Child` olan bir uygulama düşünün.
En temel render edilmiş görünüm, aşağıdaki gibi iç içe HTML elemanları olarak görünecektir:

```html
<app-root>
  
  <app-child>  </app-child>
</app-root>
```

Ancak arka planda, Angular enjeksiyon isteklerini çözerken aşağıdaki gibi mantıksal bir görünüm temsili kullanır:

```html
<app-root> 
  <#VIEW>
    <app-child> 
      <#VIEW>
      </#VIEW>
    </app-child>
  </#VIEW>
</app-root>
```

Buradaki `<#VIEW>` bir şablon örneğini temsil eder.
Her bileşenin kendi `<#VIEW>`'ı olduğuna dikkat edin.

Bu yapıyı bilmek, servislerinizi nasıl sağladığınız ve enjekte ettiğiniz konusunda bilgi verebilir ve servis görünürlüğü üzerinde tam kontrol sağlar.

Şimdi, `<app-root>`'un `FlowerService`'i enjekte ettiğini düşünün:

```typescript
export class App {
  flower = inject(FlowerService);
}
```

Sonucu görselleştirmek için `<app-root>` şablonuna bir bağlama ekleyin:

```html
<p>Emoji from FlowerService: {{flower.emoji}}</p>
```

Görünümdeki çıktı şöyle olacaktır:

```text
{hideCopy}
Emoji from FlowerService: 🌺
```

Mantıksal ağaçta bu, aşağıdaki gibi temsil edilir:

```html
<app-root @ApplicationConfig
        @Inject(FlowerService) flower=>"🌺">
  <#VIEW>
    <p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
    <app-child>
      <#VIEW>
      </#VIEW>
    </app-child>
  </#VIEW>
</app-root>
```

`<app-root>` `FlowerService`'i istediğinde, `FlowerService` token'ını çözmek enjektörün görevidir.
Token'ın çözümlenmesi iki aşamada gerçekleşir:

1. Enjektör, mantıksal ağaçtaki başlangıç konumunu ve aramanın bitiş konumunu belirler.
   Enjektör, başlangıç konumundan başlar ve mantıksal ağaçtaki her görünüm seviyesinde token'ı arar.
   Token bulunursa döndürülür.

1. Token bulunamazsa, enjektör isteği devretmek için en yakın üst `EnvironmentInjector`'ı arar.

Örnek durumda, kısıtlamalar şunlardır:

1. `<app-root>`'a ait `<#VIEW>` ile başlayın ve `<app-root>` ile bitirin.
   - Normalde arama başlangıç noktası enjeksiyon noktasıdır.
     Ancak bu durumda `<app-root>` bir bileşendir. `@Component`'ler özeldir çünkü kendi `viewProviders`'larını da içerirler, bu nedenle arama `<app-root>`'a ait `<#VIEW>`'den başlar.
     Bu, aynı konumda eşleşen bir direktif için geçerli olmaz.
   - Bitiş konumu, bu uygulamadaki en üst bileşen olduğu için bileşenin kendisiyle aynıdır.

1. `ApplicationConfig` tarafından sağlanan `EnvironmentInjector`, enjeksiyon token'ı `ElementInjector` hiyerarşilerinde bulunamadığında yedek enjektör olarak hareket eder.

### `providers` dizisini kullanma

Şimdi, `Child` sınıfında, yaklaşan bölümlerde daha karmaşık çözümleme kurallarını göstermek için `FlowerService` için bir sağlayıcı ekleyin:

```ts
@Component({
  selector: 'app-child',
  templateUrl: './child.html',
  styleUrls: ['./child.css'],
  // bir service sağlamak için providers dizisini kullan
  providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
})
export class Child {
  // service'i enjekte et
  flower = inject(FlowerService);
}
```

Artık `FlowerService`, `@Component()` dekoratöründe sağlandığından, `<app-child>` servisi istediğinde, enjektör yalnızca `<app-child>` içindeki `ElementInjector`'a kadar bakmak zorundadır.
Enjektör ağacında aramaya devam etmesi gerekmez.

Sonraki adım, `Child` şablonuna bir bağlama eklemektir.

```html
<p>Emoji from FlowerService: {{flower.emoji}}</p>
```

Yeni değerleri render etmek için, `App` şablonunun alt kısmına `<app-child>` ekleyin, böylece görünüm ayçiçeğini de göstersin:

```text
{hideCopy}
Child Component
Emoji from FlowerService: 🌻
```

Mantıksal ağaçta bu, aşağıdaki gibi temsil edilir:

```html
<app-root @ApplicationConfig
          @Inject(FlowerService) flower=>"🌺">
  <#VIEW>

<p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
  <app-child @Provide(FlowerService="🌻" )
             @Inject(FlowerService)=>"🌻"> 
    <#VIEW> 
    <h2>Child Component</h2>
    <p>Emoji from FlowerService: {{flower.emoji}} (🌻)</p>
  </
  #VIEW>
  </app-child>
</#VIEW>
</app-root>
```

`<app-child>` `FlowerService`'i istediğinde, enjektör aramaya `<app-child>`'a ait `<#VIEW>`'den başlar $`<#VIEW>` dahildir çünkü `@Component()`'den enjekte edilmiştir$ ve `<app-child>` ile biter.
Bu durumda, `FlowerService`, `<app-child>`'ın ayçiçeği <code>🌻</code> ile `providers` dizisinde çözümlenir.
Enjektörün enjektör ağacında daha ileriye bakması gerekmez.
`FlowerService`'i bulur bulmaz durur ve kırmızı hibiskusu <code>🌺</code> asla görmez.

### `viewProviders` dizisini kullanma

`@Component()` dekoratöründe servis sağlamanın başka bir yolu olarak `viewProviders` dizisini kullanın.
`viewProviders` kullanmak, servisleri `<#VIEW>` içinde görünür kılar.

HELPFUL: Adımlar, `viewProviders` dizisini kullanma dışında `providers` dizisini kullanmakla aynıdır.

Adım adım talimatlar için bu bölümle devam edin.
Kendiniz ayarlayabiliyorsanız, [Servis kullanılabilirliğini değiştirme](#sağlanan-tokenların-görünürlüğü) bölümüne atlayın.

Gösterim için, `viewProviders`'ı göstermek amacıyla bir `AnimalService` oluşturuyoruz.
İlk olarak, balina <code>🐳</code> `emoji` özelliğine sahip bir `AnimalService` oluşturun:

```typescript
import {Service} from '@angular/core';

@Service()
export class AnimalService {
  emoji = '🐳';
}
```

`FlowerService` ile aynı deseni izleyerek, `AnimalService`'i `App` sınıfına enjekte edin:

```ts
export class App {
  public flower = inject(FlowerService);
  public animal = inject(AnimalService);
}
```

HELPFUL: Tüm `FlowerService` ile ilgili kodu yerinde bırakabilirsiniz çünkü `AnimalService` ile bir karşılaştırma yapmanıza olanak tanıyacaktır.

Bir `viewProviders` dizisi ekleyin ve `AnimalService`'i `<app-child>` sınıfına da enjekte edin, ancak `emoji`'ye farklı bir değer verin.
Burada, köpek 🐶 değerine sahiptir.

```typescript
@Component({
  selector: 'app-child',
  templateUrl: './child.html',
  styleUrls: ['./child.css'],
  // service'leri sağla
  providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
  viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}],
})
export class Child {
  // service'leri enjekte et
  flower = inject(FlowerService);
  animal = inject(AnimalService);
}
```

`Child` ve `App` şablonlarına bağlamalar ekleyin.
`Child` şablonuna aşağıdaki bağlamayı ekleyin:

```html
<p>Emoji from AnimalService: {{animal.emoji}}</p>
```

Ayrıca aynısını `App` şablonuna ekleyin:

```html
<p>Emoji from AnimalService: {{animal.emoji}}</p>
```

Şimdi her iki değeri de tarayıcıda görmelisiniz:

```text
{hideCopy}
App
Emoji from AnimalService: 🐳

Child Component
Emoji from AnimalService: 🐶
```

`viewProviders`'ın bu örneği için mantıksal ağaç aşağıdaki gibidir:

```html
<app-root @ApplicationConfig
          @Inject(AnimalService) animal=>"🐳">
  <#VIEW>
  <app-child>
    <#VIEW @Provide(AnimalService="🐶")
    @Inject(AnimalService=>"🐶")>

<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
  </
  #VIEW>
  </app-child>
</#VIEW>
</app-root>
```

`FlowerService` örneğinde olduğu gibi, `AnimalService` `<app-child>` `@Component()` dekoratöründe sağlanır.
Bu, enjektör önce bileşenin `ElementInjector`'ına baktığından, köpek <code>🐶</code> `AnimalService` değerini bulur.
`ElementInjector` ağacında aramaya devam etmesi gerekmez, `ModuleInjector`'da da araması gerekmez.

### `providers` ve `viewProviders` karşılaştırması

`viewProviders` alanı kavramsal olarak `providers`'a benzerdir, ancak önemli bir fark vardır.
`viewProviders`'daki sağlayıcılar yalnızca bileşenin kendi görünümü içinde görünürdür; bileşene `<ng-content>` aracılığıyla yansıtılan içerik bunları göremez.

`providers` ve `viewProviders` kullanma arasındaki farkı görmek için, örneğe başka bir bileşen ekleyin ve `Inspector` olarak adlandırın.
`Inspector`, `Child`'ın bir çocuğu olacaktır.
`inspector.ts`'de, özellik başlatma sırasında `FlowerService` ve `AnimalService`'i enjekte edin:

```typescript
export class Inspector {
  flower = inject(FlowerService);
  animal = inject(AnimalService);
}
```

`providers` veya `viewProviders` dizisine ihtiyacınız yok.
Sonra, `inspector.html`'de önceki bileşenlerle aynı işaretlemeyi ekleyin:

```html
<p>Emoji from FlowerService: {{flower.emoji}}</p>
<p>Emoji from AnimalService: {{animal.emoji}}</p>
```

`Inspector`'ı `Child` `imports` dizisine eklemeyi unutmayın.

```ts
@Component({
  ...
  imports: [Inspector]
})
```

Sonra, `child.html`'e aşağıdakini ekleyin:

```html
...

<div class="container">
  <h3>Content projection</h3>
  <ng-content />
</div>
<h3>Inside the view</h3>

<app-inspector />
```

`<ng-content>` içerik yansıtmanıza olanak tanır ve `Child` şablonu içindeki `<app-inspector>`, `Inspector`'ı `Child`'ın alt bileşeni yapar.

Sonra, içerik yansıtmadan yararlanmak için `app.html`'e aşağıdakini ekleyin.

```html
<app-child>
  <app-inspector />
</app-child>
```

Tarayıcı şimdi aşağıdakini render eder, kısalık için önceki örnekler atlanmıştır:

```text
{hideCopy}
...
Content projection

Emoji from FlowerService: 🌻
Emoji from AnimalService: 🐳

Emoji from FlowerService: 🌻
Emoji from AnimalService: 🐶
```

Bu dört bağlama, `providers` ve `viewProviders` arasındaki farkı gösterir.
Köpek emojisinin <code>🐶</code> `Child`'ın `<#VIEW>` içinde bildirildiğini ve yansıtılmış içerik için görünür olmadığını unutmayın.
Bunun yerine, yansıtılmış içerik balinayı <code>🐳</code> görür.

Yansıtılan `<app-inspector>`'ın neden hâlâ `App`'in `viewProviders`'ından <code>🐳</code> değerini görebildiğini merak edebilirsiniz.
Bunun nedeni, Angular DI'nın bir bileşenin nerede render edildiğini değil, **nerede bildirildiğini** izlemesidir.
`<app-inspector>`, `App`'in şablonunda, yani `App`'in `<#VIEW>` içinde yer alır, bu yüzden `App`'in `viewProviders`'ına erişebilir.
Onu `Child`'a yansıtmak, `Child`'ın `viewProviders`'ına (<code>🐶</code>) erişimi keser, ancak `App`'in sağlayıcılarına (<code>🐳</code>) ağaçta yukarı doğru hâlâ erişilebilir.

Ancak sonraki çıktı bölümünde, `Inspector` `Child`'ın gerçek bir alt bileşenidir, `Inspector` `<#VIEW>` içindedir, bu nedenle `AnimalService`'i istediğinde köpeği <code>🐶</code> görür.

Mantıksal ağaçta `AnimalService` şöyle görünecektir:

```html
<app-root @ApplicationConfig
          @Inject(AnimalService) animal=>"🐳">
  <#VIEW>
  <app-child>
    <#VIEW @Provide(AnimalService="🐶")
    @Inject(AnimalService=>"🐶")>

<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>

<div class="container">
      <h3>Content projection</h3>
      <app-inspector @Inject(AnimalService) animal=>"🐳">
        <p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p>
      </app-inspector>
    </div>

<app-inspector>
      <#VIEW @Inject(AnimalService) animal=>"🐶">
      <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
    </
    #VIEW>
    </app-inspector>
  </
  #VIEW>
  </app-child>

</#VIEW>
</app-root>
```

Yansıtılan `<app-inspector>`, <code>🐳</code> değerini alır çünkü <code>🐶</code> `Child`'ın görünümüne aittir ve yansıtılmış içerik ona erişemez.
<code>🐳</code> erişilebilirdir çünkü `<app-inspector>`, `App`'in şablonunda bildirilmiştir, dolayısıyla `App`'in `viewProviders`'ına kadar yukarı çıkabilir.

`Child`'ın şablonunda doğrudan yer alan (yansıtılmamış) `<app-inspector>` ise <code>🐶</code> değerini alır; `<#VIEW>` içinde olduğu için aşılması gereken bir sınır yoktur.

### Sağlanan token'ların görünürlüğü

Görünürlük dekoratörleri, mantıksal ağaçta enjeksiyon token'ı aramasının nerede başlayıp nerede biteceğini etkiler.
Bunu yapmak için, görünürlük yapılandırmasını bir bildirim noktasına değil, enjeksiyon noktasına, yani `inject()` çağrılırken yerleştirin.

`FlowerService` için enjektörün aramaya nereden başladığını değiştirmek için, `FlowerService`'in enjekte edildiği `<app-child>` `inject()` çağrısına `skipSelf` ekleyin.
Bu çağrı, `child.ts`'de gösterildiği gibi `<app-child>`'ın bir özellik başlatıcısıdır:

```typescript
flower = inject(FlowerService, {skipSelf: true});
```

`skipSelf` ile, `<app-child>` enjektörü `FlowerService` için kendisine bakmaz.
Bunun yerine, enjektör `FlowerService`'i `<app-root>`'un `ElementInjector`'ında aramaya başlar ve burada hiçbir şey bulamaz.
Sonra, `<app-child>` `ModuleInjector`'ına geri döner ve kırmızı hibiskus <code>🌺</code> değerini bulur, bu kullanılabilir çünkü `<app-child>` ve `<app-root>` aynı `ModuleInjector`'ı paylaşır.
Kullanıcı arayüzü aşağıdakini render eder:

```text
{hideCopy}
Emoji from FlowerService: 🌺
```

Mantıksal ağaçta, aynı fikir şöyle görünebilir:

```html
<app-root @ApplicationConfig
          @Inject(FlowerService) flower=>"🌺">
  <#VIEW>
  <app-child @Provide(FlowerService="🌻" )>
    <#VIEW @Inject(FlowerService, SkipSelf)=>"🌺">

</
  #VIEW>
  </app-child>
</#VIEW>
</app-root>
```

`<app-child>` ayçiçeğini <code>🌻</code> sağlasa da, `skipSelf` mevcut enjektörün (app-child) kendisini atlayıp üst elemana bakmasına neden olduğundan uygulama kırmızı hibiskusu <code>🌺</code> render eder.

Şimdi `host`'u (`skipSelf`'e ek olarak) eklerseniz, sonuç `null` olacaktır.
Bunun nedeni, `host`'un aramanın üst sınırını `app-child` `<#VIEW>` ile sınırlamasıdır.
İşte mantıksal ağaçtaki fikir:

```html
<app-root @ApplicationConfig
          @Inject(FlowerService) flower=>"🌺">
  <#VIEW> 
  <app-child @Provide(FlowerService="🌻" )> 
    <#VIEW inject(FlowerService, {skipSelf: true, host: true, optional:true})=>null>
  </
  #VIEW>
  </app-parent>
</#VIEW>
</app-root>
```

Burada, servisler ve değerleri aynıdır, ancak `host` enjektörün `FlowerService` için `<#VIEW>`'den daha ileriye bakmasını engeller, bu nedenle bulamaz ve `null` döndürür.

### `skipSelf` and `viewProviders`

`<app-child>`'ın `AnimalService`'i `viewProviders` dizisinde köpek <code>🐶</code> değeri ile sağladığını hatırlayın.
Enjektörün `AnimalService` için yalnızca `<app-child>`'ın `ElementInjector`'ına bakması gerektiğinden, balinayı <code>🐳</code> asla görmez.

`FlowerService` örneğinde olduğu gibi, `AnimalService`'in `inject()`'ine `skipSelf` eklerseniz, enjektör `AnimalService` için mevcut `<app-child>` `ElementInjector`'ına bakmaz.
Bunun yerine, enjektör `<app-root>` `ElementInjector`'ından başlayacaktır.

```typescript
@Component({
  selector: 'app-child',
  …
  viewProviders: [
    { provide: AnimalService, useValue: { emoji: '🐶' } },
  ],
})
```

`<app-child>`'da `skipSelf` ile mantıksal ağaç şöyle görünür:

```html
<app-root @ApplicationConfig
          @Inject(AnimalService=>"🐳")>
  <#VIEW>
  <app-child>
    <#VIEW @Provide(AnimalService="🐶")
    @Inject(AnimalService, SkipSelf=>"🐳")>

</
  #VIEW>
  </app-child>
</#VIEW>
</app-root>
```

`<app-child>`'da `skipSelf` ile, enjektör `AnimalService` aramasına `<app-root>` `ElementInjector`'ında başlar ve balina 🐳 bulur.

### `host` and `viewProviders`

`AnimalService`'in enjeksiyonu için sadece `host` kullanırsanız, sonuç köpek <code>🐶</code> olacaktır çünkü enjektör `AnimalService`'i `<app-child>` `<#VIEW>` içinde bulur.
`Child`, köpek emojisinin `AnimalService` değeri olarak sağlanması için `viewProviders`'ı yapılandırır.
`inject()` içinde `host`'u da görebilirsiniz:

```typescript
@Component({
  selector: 'app-child',
  …
  viewProviders: [
    { provide: AnimalService, useValue: { emoji: '🐶' } },
  ]
})
export class Child {
  animal = inject(AnimalService, { host: true })
}
```

`host: true`, enjektörün `<#VIEW>`'ün kenarına ulaşana kadar bakmasına neden olur.

```html
<app-root @ApplicationConfig
          @Inject(AnimalService=>"🐳")>
  <#VIEW>
  <app-child>
    <#VIEW @Provide(AnimalService="🐶")
    inject(AnimalService, {host: true}=>"🐶")> 
  </
  #VIEW>
  </app-child>
</#VIEW>
</app-root>
```

`app.ts` `@Component()` meta verisine üçüncü bir hayvan olan kirpi <code>🦔</code> ile bir `viewProviders` dizisi ekleyin:

```typescript
@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrls: [ './app.css' ],
  viewProviders: [
    { provide: AnimalService, useValue: { emoji: '🦔' } },
  ],
})
```

Sonra, `child.ts`'deki `AnimalService` enjeksiyonunun `inject()`'ine `host` ile birlikte `skipSelf` ekleyin.
İşte `animal` özellik başlatmadaki `host` ve `skipSelf`:

```typescript
export class Child {
  animal = inject(AnimalService, {host: true, skipSelf: true});
}
```

`host` ve `skipSelf`, `providers` dizisindeki `FlowerService`'e uygulandığında, sonuç `null` idi çünkü `skipSelf` aramasına `<app-child>` enjektöründe başlar, ancak `host` aramayı `<#VIEW>`'de durdurur - burada `FlowerService` yoktur.
Mantıksal ağaçta, `FlowerService`'in `<app-child>` içinde görünür olduğunu, `<#VIEW>` içinde değil görebilirsiniz.

Ancak, `App` `viewProviders` dizisinde sağlanan `AnimalService` görünür durumdadır.

Mantıksal ağaç temsili bunun nedenini gösterir:

```html
<app-root @ApplicationConfig
          @Inject(AnimalService=>"🐳")>
  <#VIEW @Provide(AnimalService="🦔")
  @Inject(AnimalService, @Optional)=>"🦔">

<app-child>
    <#VIEW @Provide(AnimalService="🐶")
    inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"🦔">
    
  </
  #VIEW>
  </app-child>
</#VIEW>
</app-root>
```

`skipSelf`, enjektörün `AnimalService` aramasına isteğin kaynaklandığı `<app-child>` değil `<app-root>`'tan başlamasına neden olur ve `host`, aramayı `<app-root>` `<#VIEW>`'de durdurur.
`AnimalService`, `viewProviders` dizisi aracılığıyla sağlandığından, enjektör `<#VIEW>` içinde kirpiyi <code>🦔</code> bulur.

## Örnek: `ElementInjector` kullanım senaryoları

Farklı seviyelerde bir veya daha fazla sağlayıcı yapılandırma yeteneği yararlı olasılıklar açar.

### Senaryo: service izolasyonu

Mimari nedenler, bir servise erişimi ait olduğu uygulama alanıyla sınırlamanıza yol açabilir.
Örneğin, kötü karakterlerin bir listesini görüntüleyen bir `VillainsList` oluşturduğumuzu düşünün.
Bu kötü karakterleri bir `VillainsService`'den alır.

`VillainsService`'i root `AppModule`'da sağlarsanız, `VillainsService` uygulamada her yerde görünür olacaktır.
`VillainsService`'i daha sonra değiştirirseniz, bu servise kazayla bağımlı olmaya başlayan diğer bileşenlerde bir şeyleri bozabilirsiniz.

Bunun yerine, `VillainsService`'i `VillainsList`'in `providers` meta verisinde şu şekilde sağlamalısınız:

```typescript
@Component({
  selector: 'app-villains-list',
  templateUrl: './villains-list.html',
  providers: [VillainsService],
})
export class VillainsList {}
```

`VillainsService`'i `VillainsList` meta verisinde ve başka hiçbir yerde sağlamayarak, servis yalnızca `VillainsList` ve alt bileşen ağacında kullanılabilir olur.

`VillainsService`, bildirildiği yer olduğu için `VillainsList`'e göre bir tekil örnektir.
`VillainsList` yok edilmediği sürece aynı `VillainsService` örneği olacaktır, ancak birden fazla `VillainsList` örneği varsa, her `VillainsList` örneğinin kendi `VillainsService` örneği olacaktır.

### Senaryo: birden fazla düzenleme oturumu

Birçok uygulama, kullanıcıların aynı anda birkaç açık görev üzerinde çalışmasına olanak tanır.
Örneğin, bir vergi hazırlama uygulamasında, hazırlayıcı gün boyunca birinden diğerine geçerek birkaç vergi beyannamesi üzerinde çalışıyor olabilir.

Bu senaryoyu göstermek için, süper kahramanların bir listesini görüntüleyen bir `HeroList` hayal edin.

Bir kahramanın vergi beyannamesini açmak için, hazırlayıcı bir kahraman adına tıklar ve bu beyanı düzenlemek için bir bileşen açılır.
Seçilen her kahraman vergi beyannamesi kendi bileşeninde açılır ve aynı anda birden fazla beyan açık olabilir.

Her vergi beyannamesi bileşeni şu özelliklere sahiptir:

- Kendi vergi beyannamesi düzenleme oturumudur
- Başka bir bileşendeki bir beyanı etkilemeden bir vergi beyannamesini değiştirebilir
- Vergi beyannamesindeki değişiklikleri kaydetme veya iptal etme yeteneğine sahiptir

`HeroTaxReturn`'ın değişiklikleri yönetme ve geri yükleme mantığına sahip olduğunu varsayalım.
Bu, bir kahraman vergi beyannamesi için basit bir görev olurdu.
Gerçek dünyada, zengin bir vergi beyannamesi veri modeli ile değişiklik yönetimi karmaşık olurdu.
Bu yönetimi, bu örneğin yaptığı gibi bir yardımcı servise devredebilirsiniz.

`HeroTaxReturnService`, tek bir `HeroTaxReturn`'ı önbelleğe alır, bu beyandaki değişiklikleri izler ve kaydetme veya geri yükleme yapabilir.
Ayrıca enjeksiyon yoluyla aldığı uygulama çapında tekil `HeroService`'e de delege eder.

```typescript
import {inject, Service} from '@angular/core';
import {HeroTaxReturn} from './hero';
import {HeroesService} from './heroes.service';

@Service({autoProvided: false})
export class HeroTaxReturnService {
  private currentTaxReturn!: HeroTaxReturn;
  private originalTaxReturn!: HeroTaxReturn;

private heroService = inject(HeroesService);

set taxReturn(htr: HeroTaxReturn) {
    this.originalTaxReturn = htr;
    this.currentTaxReturn = htr.clone();
  }

get taxReturn(): HeroTaxReturn {
    return this.currentTaxReturn;
  }

restoreTaxReturn() {
    this.taxReturn = this.originalTaxReturn;
  }

saveTaxReturn() {
    this.taxReturn = this.currentTaxReturn;
    this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
  }
}
```

İşte `HeroTaxReturnService`'i kullanan `HeroTaxReturn`.

```typescript
import {Component, input, output} from '@angular/core';
import {HeroTaxReturn} from './hero';
import {HeroTaxReturnService} from './hero-tax-return.service';

@Component({
  selector: 'app-hero-tax-return',
  templateUrl: './hero-tax-return.html',
  styleUrls: ['./hero-tax-return.css'],
  providers: [HeroTaxReturnService],
})
export class HeroTaxReturn {
  message = '';

close = output<void>();

get taxReturn(): HeroTaxReturn {
    return this.heroTaxReturnService.taxReturn;
  }

taxReturn = input.required<HeroTaxReturn>();

constructor() {
    effect(() => {
      this.heroTaxReturnService.taxReturn = this.taxReturn();
    });
  }

private heroTaxReturnService = inject(HeroTaxReturnService);

onCanceled() {
    this.flashMessage('Canceled');
    this.heroTaxReturnService.restoreTaxReturn();
  }

onClose() {
    this.close.emit();
  }

onSaved() {
    this.flashMessage('Saved');
    this.heroTaxReturnService.saveTaxReturn();
  }

flashMessage(msg: string) {
    this.message = msg;
    setTimeout(() => (this.message = ''), 500);
  }
}
```

_Düzenlenecek vergi beyannamesi_, getter ve setter'larla uygulanan `input` özelliği aracılığıyla gelir.
Setter, bileşenin kendi `HeroTaxReturnService` örneğini gelen beyan ile başlatır.
Getter her zaman servisin kahramanın mevcut durumu olarak söylediğini döndürür.
Bileşen ayrıca servisten bu vergi beyannamesini kaydetmesini ve geri yüklemesini ister.

Servis uygulama çapında bir tekil olsaydı bu çalışmazdı.
Her bileşen aynı servis örneğini paylaşırdı ve her bileşen başka bir kahramana ait vergi beyannamesinin üzerine yazardı.

Bunu önlemek için, `HeroTaxReturn`'ın bileşen seviyesi enjektörünü, bileşen meta verisindeki `providers` özelliğini kullanarak servisi sağlayacak şekilde yapılandırın.

```typescript
providers: [HeroTaxReturnService];
```

`HeroTaxReturn`'ın `HeroTaxReturnService`'in kendi sağlayıcısı vardır.
Her bileşen _örneğinin_ kendi enjektörü olduğunu hatırlayın.
Servisi bileşen seviyesinde sağlamak, bileşenin _her_ örneğinin servisin özel bir örneğini almasını sağlar. Bu, hiçbir vergi beyannamesinin üzerine yazılmamasını garanti eder.

HELPFUL: Senaryonun geri kalan kodu, belgelerin başka yerlerinde öğrenebileceğiniz diğer Angular özelliklerine ve tekniklerine dayanır.

### Senaryo: özelleştirilmiş provider'lar

Bir servisi başka bir seviyede tekrar sağlamanın bir diğer nedeni, bileşen ağacında daha derinde o servisin _daha özelleştirilmiş_ bir uygulamasını ikame etmektir.

Örneğin, lastik servisi bilgileri içeren ve araç hakkında daha fazla ayrıntı sağlamak için diğer servislere bağımlı olan bir `Car` bileşeni düşünün.

(A) olarak işaretlenen root enjektör, `CarService` ve `EngineService` hakkında ayrıntılar için _genel_ sağlayıcılar kullanır.

1. `Car` bileşeni (A). Bileşen (A) araç hakkında lastik servisi verilerini görüntüler ve araç hakkında daha fazla bilgi sağlamak için genel servisler belirtir.

2. Alt bileşen (B). Bileşen (B), bileşen (B)'de olan şeyler için uygun özel yeteneklere sahip `CarService` ve `EngineService` için kendi _özelleştirilmiş_ sağlayıcılarını tanımlar.

3. Bileşen (B)'nin çocuğu olarak alt bileşen (C). Bileşen (C), `CarService` için kendi, daha da _özelleştirilmiş_ sağlayıcısını tanımlar.

```mermaid
graph TD;
subgraph COMPONENT_A[Component A]
subgraph COMPONENT_B[Component B]
COMPONENT_C[Component C]
end
end

style COMPONENT_A fill:#BDD7EE
style COMPONENT_B fill:#FFE699
style COMPONENT_C fill:#A9D18E,color:#000
classDef noShadow filter:none
class COMPONENT_A,COMPONENT_B,COMPONENT_C noShadow
```

Arka planda, her bileşen o bileşen için tanımlanan sıfır, bir veya daha fazla sağlayıcı ile kendi enjektörünü kurar.

En derin bileşende (C) bir `Car` örneğini çözümlediğinizde, enjektör şunları üretir:

- Enjektör (C) tarafından çözümlenen bir `Car` örneği
- Enjektör (B) tarafından çözümlenen bir `Engine`
- Root enjektör (A) tarafından çözümlenen `Tires`.

```mermaid
graph BT;

subgraph A[" "]
direction LR
RootInjector["(A) RootInjector"]
ServicesA["CarService, EngineService, TiresService"]
end

subgraph B[" "]
direction LR
ParentInjector["(B) ParentInjector"]
ServicesB["CarService2, EngineService2"]
end

subgraph C[" "]
direction LR
ChildInjector["(C) ChildInjector"]
ServicesC["CarService3"]
end

direction LR
car["(C) Car"]
engine["(B) Engine"]
tires["(A) Tires"]

direction BT
car-->ChildInjector
ChildInjector-->ParentInjector-->RootInjector

class car,engine,tires,RootInjector,ParentInjector,ChildInjector,ServicesA,ServicesB,ServicesC,A,B,C noShadow
style car fill:#A9D18E,color:#000
style ChildInjector fill:#A9D18E,color:#000
style engine fill:#FFE699,color:#000
style ParentInjector fill:#FFE699,color:#000
style tires fill:#BDD7EE,color:#000
style RootInjector fill:#BDD7EE,color:#000
```

## More on dependency injection
# Hafif enjeksiyon token'ları ile istemci uygulama boyutunu optimize etme

Bu sayfa, kütüphane geliştiricileri için önerilen bir bağımlılık enjeksiyonu tekniğinin kavramsal bir genel bakışını sağlar.
Kütüphanenizi _hafif enjeksiyon token'ları_ ile tasarlamak, kütüphanenizi kullanan istemci uygulamalarının paket boyutunu optimize etmeye yardımcı olur.

Tree-shakeable sağlayıcılar kullanarak bileşenleriniz ve enjekte edilebilir servisleriniz arasındaki bağımlılık yapısını yönetip paket boyutunu optimize edebilirsiniz.
Bu normalde, sağlanan bir bileşen veya servis uygulama tarafından hiçbir zaman gerçekten kullanılmıyorsa, derleyicinin kodunu paketten kaldırabilmesini sağlar.

Angular'ın enjeksiyon token'larını saklama şekli nedeniyle, böyle kullanılmayan bir bileşen veya servis yine de pakete dahil olabilir.
Bu sayfa, hafif enjeksiyon token'ları kullanarak uygun tree-shaking'i destekleyen bir bağımlılık enjeksiyonu tasarım deseni tanımlar.

Hafif enjeksiyon token'ı tasarım deseni özellikle kütüphane geliştiricileri için önemlidir.
Bir uygulama kütüphanenizin yalnızca bazı yeteneklerini kullandığında, kullanılmayan kodun istemci uygulamasının paketinden çıkarılabilmesini sağlar.

Bir uygulama kütüphanenizi kullandığında, kütüphanenizin sağladığı bazı servisler istemci uygulaması tarafından kullanılmayabilir.
Bu durumda, uygulama geliştiricisi bu servisin tree-shaken edilmesini ve derlenmiş uygulamanın boyutuna katkıda bulunmamasını bekler.
Uygulama geliştiricisi kütüphanedeki bir tree-shaking sorunu hakkında bilgi sahibi olamayacağı veya düzeltemeyeceği için, bunu yapmak kütüphane geliştiricisinin sorumluluğundadır.
Kullanılmayan bileşenlerin tutulmasını önlemek için, kütüphaneniz hafif enjeksiyon token'ı tasarım desenini kullanmalıdır.

## Token'lar ne zaman tutulur

Token tutulmasının hangi koşullarda gerçekleştiğini daha iyi açıklamak için, bir library-card bileşeni sağlayan bir kütüphane düşünün.
Bu bileşen bir gövde içerir ve isteğe bağlı bir başlık içerebilir:

```html
<lib-card>
  <lib-header>…</lib-header>
</lib-card>
```

Muhtemel bir uygulamada, `<lib-card>` bileşeni `<lib-header>` ve `<lib-body>` almak için `contentChild` veya `contentChildren` kullanır, aşağıdaki gibi:

```ts
{highlight: [14]}
import {Component, contentChild} from '@angular/core';

@Component({
  selector: 'lib-header',
  …,
})
class LibHeader {}

@Component({
  selector: 'lib-card',
  …,
})
class LibCard {
  readonly header = contentChild(LibHeader);
}
```

`<lib-header>` isteğe bağlı olduğundan, eleman şablonda minimal formunda `<lib-card />` olarak görünebilir.
Bu durumda, `<lib-header>` kullanılmaz ve tree-shaken edilmesini beklersiniz, ancak olan bu değildir.
Bunun nedeni, `LibCard`'ın aslında `LibHeader`'a iki referans içermesidir:

```ts
readonly header = contentChild(LibHeader);
```

- Bu referanslardan biri _tür konumundadır_ -- yani, `LibHeader`'ı bir tür olarak belirtir: `readonly header: Signal<LibHeader|undefined>`.
- Diğer referans _değer konumundadır_ -- yani, `LibHeader`, `contentChild` fonksiyonuna iletilen değerdir: `contentChild(LibHeader)`.

Derleyici, bu konumlardaki token referanslarını farklı şekilde ele alır:

- Derleyici, TypeScript'ten dönüştürme sonrası _tür konumundaki_ referansları siler, bu nedenle tree-shaking üzerinde etkisi yoktur.
- Derleyici, _değer konumundaki_ referansları çalışma zamanında tutmalıdır, bu da bileşenin tree-shaken edilmesini **engeller**.

Örnekte, derleyici değer konumunda oluşan `LibHeader` token'ını tutar.
Bu, uygulama aslında hiçbir yerde `<lib-header>` kullanmasa bile referans verilen bileşenin tree-shaken edilmesini engeller.
`LibHeader`'ın kodu, şablonu ve stilleri birleşerek çok büyükse, gereksiz yere dahil etmek istemci uygulamasının boyutunu önemli ölçüde artırabilir.

## Hafif enjeksiyon token'ı deseni ne zaman kullanılır

Tree-shaking sorunu, bir bileşen enjeksiyon token'ı olarak kullanıldığında ortaya çıkar.
Bunun gerçekleşebileceği iki durum vardır:

- Token, bir [içerik sorgusunun](guide/components/queries#içerik-sorguları) değer konumunda kullanılır.
- Token, `inject` fonksiyonu ile kullanılır.

Aşağıdaki örnekte, `CustomOther` token'ının her iki kullanımı da `CustomOther`'ın tutulmasına neden olur ve kullanılmadığında tree-shaken edilmesini engeller:

```ts
{highlight: [[2],[4]]}
class App {
  private readonly other = inject(CustomOther, {optional: true});

readonly header = contentChild(CustomOther);
}
```

Yalnızca tür belirleyici olarak kullanılan token'lar JavaScript'e dönüştürülürken kaldırılsa da, bağımlılık enjeksiyonu için kullanılan tüm token'lar çalışma zamanında gereklidir.
`inject(CustomOther)` kullanıldığında, `CustomOther` bir değer argümanı olarak iletilir.
Token artık bir değer konumundadır, bu da tree-shaker'ın referansı tutmasına neden olur.

HELPFUL: Kütüphaneler tüm servisler için [tree-shakeable sağlayıcılar](guide/di/defining-dependency-providers) kullanmalı ve bağımlılıkları bileşenler veya modüller yerine root seviyesinde sağlamalıdır.

## Hafif enjeksiyon token'larını kullanma

Hafif enjeksiyon token'ı tasarım deseni, enjeksiyon token'ı olarak küçük bir soyut sınıf kullanmaktan ve gerçek uygulamayı daha sonraki bir aşamada sağlamaktan oluşur.
Soyut sınıf tutulur, tree-shaken edilmez, ancak küçüktür ve uygulama boyutu üzerinde maddi bir etkisi yoktur.

Aşağıdaki örnek, bunun `LibHeader` için nasıl çalıştığını gösterir:

```ts
{highlight: [[1],[5], [15]]}
abstract class LibHeaderToken {}

@Component({
  selector: 'lib-header',
  providers: [{provide: LibHeaderToken, useExisting: LibHeader}],
  …,
})
class LibHeader extends LibHeaderToken {}

@Component({
  selector: 'lib-card',
  …,
})
class LibCard {
  readonly header = contentChild(LibHeaderToken);
}
```

Bu örnekte, `LibCard` uygulaması artık ne tür konumunda ne de değer konumunda `LibHeader`'a referans vermez.
Bu, `LibHeader`'ın tam tree-shaking'inin gerçekleşmesine olanak tanır.
`LibHeaderToken` tutulur, ancak somut bir uygulaması olmayan yalnızca bir sınıf bildirimidir.
Küçüktür ve derleme sonrası tutulduğunda uygulama boyutunu maddi olarak etkilemez.

Bunun yerine, `LibHeader`'ın kendisi soyut `LibHeaderToken` sınıfını uygular.
Bu token'ı bileşen tanımında sağlayıcı olarak güvenle kullanabilirsiniz, bu da Angular'ın somut türü doğru şekilde enjekte etmesine olanak tanır.

Özetlemek gerekirse, hafif enjeksiyon token'ı deseni şunlardan oluşur:

1. Soyut bir sınıf olarak temsil edilen hafif bir enjeksiyon token'ı.
2. Soyut sınıfı uygulayan bir bileşen tanımı.
3. `contentChild` veya `contentChildren` kullanılarak hafif desenin enjeksiyonu.
4. Hafif enjeksiyon token'ının uygulamasında, hafif enjeksiyon token'ını uygulama ile ilişkilendiren bir sağlayıcı.

### API tanımı için hafif enjeksiyon token'ını kullanma

Hafif bir enjeksiyon token'ı enjekte eden bir bileşenin, enjekte edilen sınıfta bir yöntemi çağırması gerekebilir.
Token artık soyut bir sınıftır. Enjekte edilebilir bileşen bu sınıfı uyguladığından, soyut hafif enjeksiyon token'ı sınıfında da soyut bir yöntem bildirmelisiniz.
Tüm kod yükü ile yöntemin uygulaması, tree-shaken edilebilen enjekte edilebilir bileşende bulunur.
Bu, üst elementin alt elemanla, varsa, tür güvenli bir şekilde iletişim kurmasına olanak tanır.

Örneğin, `LibCard` artık `LibHeader` yerine `LibHeaderToken`'ı sorgular.
Aşağıdaki örnek, desenin `LibCard`'ın `LibHeader`'a gerçekten referans vermeden `LibHeader` ile nasıl iletişim kurmasına olanak tanıdığını gösterir:

```ts
{highlight: [[2],[7],[11],[19]]}
abstract class LibHeaderToken {
  abstract doSomething(): void;
}

@Component({
  selector: 'lib-header',
  providers: [{provide: LibHeaderToken, useExisting: LibHeader}],
})
class LibHeader extends LibHeaderToken {
  doSomething(): void {
    // `doSomething`'in somut uygulaması
  }
}

@Component({
  selector: 'lib-card',
})
class LibCard implements AfterContentInit {
  readonly header = contentChild(LibHeaderToken);

ngAfterContentInit(): void {
    if (this.header() !== undefined) {
      this.header()!.doSomething();
    }
  }
}
```

Bu örnekte, üst eleman alt bileşeni almak için token'ı sorgular ve varsa ortaya çıkan bileşen referansını saklar.
Alt elemanda bir yöntem çağırmadan önce, üst bileşen alt bileşenin mevcut olup olmadığını kontrol eder.
Alt bileşen tree-shaken edilmişse, ona çalışma zamanı referansı yoktur ve yöntemine çağrı yapılmaz.

### Hafif enjeksiyon token'ınızı adlandırma

Hafif enjeksiyon token'ları yalnızca bileşenlerle yararlıdır.
[Angular Stil Kılavuzu](style-guide), bileşenleri `Component` son eki olmadan adlandırmanızı önerir.
`LibHeader` örneği bu kuralı izler.

Bileşen ile token'ı arasındaki ilişkiyi korurken yine de aralarında ayrım yapmalısınız.
Önerilen stil, hafif enjeksiyon token'larınızı adlandırmak için bileşen temel adını `Token` son eki ile kullanmaktır: `LibHeaderToken`.
# Angular sinyalleri ile RxJS birlikte çalışması

`@angular/core/rxjs-interop` paketi, RxJS ve Angular sinyallerini entegre etmenize yardımcı olan API'ler sunar.

## `toSignal` ile bir RxJS Observable'dan sinyal oluşturma

Bir Observable'ın değerini takip eden bir sinyal oluşturmak için `toSignal` fonksiyonunu kullanın. Şablonlardaki `async` pipe'ına benzer şekilde davranır, ancak daha esnektir ve bir uygulamanın herhangi bir yerinde kullanılabilir.

```typescript
import {Component} from '@angular/core';
import {AsyncPipe} from '@angular/common';
import {interval} from 'rxjs';
import {toSignal} from '@angular/core/rxjs-interop';

@Component({
  template: `{{ counter() }}`,
})
export class Ticker {
  counterObservable = interval(1000);

// `counterObservable`'ın değerini temsil eden bir `Signal` al.
  counter = toSignal(this.counterObservable, {initialValue: 0});
}
```

`async` pipe'ı gibi, `toSignal` da Observable'a hemen abone olur ve bu yan etkileri tetikleyebilir. `toSignal` tarafından oluşturulan abonelik, `toSignal`'ı çağıran bileşen veya servis yok edildiğinde otomatik olarak verilen Observable'dan aboneliği iptal eder.

IMPORTANT: `toSignal` bir abonelik oluşturur. Aynı Observable için tekrar tekrar çağırmaktan kaçınmalı ve bunun yerine döndürdüğü sinyali yeniden kullanmalısınız.

### Enjeksiyon bağlamı

`toSignal` varsayılan olarak bir [enjeksiyon bağlamında](guide/di/dependency-injection-context) çalışmalıdır; örneğin bir bileşen veya servisin oluşturulması sırasında. Eğer bir enjeksiyon bağlamı mevcut değilse, bunun yerine kullanılacak `Injector`'ı manuel olarak belirtebilirsiniz.

### Başlangıç değerleri

Observable'lar abonelik sırasında eşzamanlı olarak bir değer üretmeyebilir, ancak sinyaller her zaman geçerli bir değere sahip olmayı gerektirir. `toSignal` sinyallerinin bu "başlangıç" değeriyle başa çıkmanın birkaç yolu vardır.

#### `initialValue` seçeneği

Yukarıdaki örnekte olduğu gibi, Observable ilk kez yayınlamadan önce sinyalin döndürmesi gereken değer için bir `initialValue` seçeneği belirtebilirsiniz.

#### `undefined` başlangıç değerleri

Bir `initialValue` sağlamazsanız, elde edilen sinyal Observable yayın yapana kadar `undefined` döndürür. Bu, `async` pipe'ının `null` döndürme davranışına benzerdir.

#### `requireSync` seçeneği

Bazı Observable'lar, `BehaviorSubject` gibi, eşzamanlı olarak yayın yapmayı garanti eder. Bu durumlarda `requireSync: true` seçeneğini belirtebilirsiniz.

`requireSync` `true` olduğunda, `toSignal` Observable'ın abonelik sırasında eşzamanlı olarak yayın yapmasını zorunlu kılar. Bu, sinyalin her zaman bir değere sahip olmasını garanti eder ve `undefined` türü veya başlangıç değeri gerekmez.

### `manualCleanup`

Varsayılan olarak, `toSignal` bileşen veya servis yok edildiğinde Observable'dan otomatik olarak aboneliği iptal eder.

Bu davranışı geçersiz kılmak için `manualCleanup` seçeneğini geçirebilirsiniz. Bu ayarı, kendiliğinden tamamlanan Observable'lar için kullanabilirsiniz.

#### Özel eşitlik karşılaştırması

Bazı observable'lar, referans veya küçük ayrıntılar açısından farklılık göstermelerine rağmen **eşit** olan değerler yayabilir. `equal` seçeneği, ardışık iki değerin ne zaman aynı kabul edilmesi gerektiğini belirlemek için **özel bir eşitlik fonksiyonu** tanımlamanızı sağlar.

Yayılan iki değer eşit kabul edildiğinde, elde edilen sinyal **güncellenmez**. Bu, gereksiz hesaplamaların, DOM güncellemelerinin veya efektlerin gereksiz yere yeniden çalışmasını önler.

```ts
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {interval, map} from 'rxjs';

@Component(/* ... */)
export class EqualExample {
  temperature$ = interval(1000).pipe(
    map(() => ({temperature: Math.floor(Math.random() * 3) + 20})), // Rastgele 20, 21 veya 22
  );

// Yalnızca sıcaklık değiştiğinde güncelle
  temperature = toSignal(this.temperature$, {
    initialValue: {temperature: 20},
    equal: (prev, curr) => prev.temperature === curr.temperature,
  });
}
```

### Hata ve Tamamlanma

`toSignal` içinde kullanılan bir Observable bir hata üretirse, sinyal okunduğunda bu hata fırlatılır.

`toSignal` içinde kullanılan bir Observable tamamlanırsa, sinyal tamamlanmadan önce yayılan en son değeri döndürmeye devam eder.

## `toObservable` ile bir sinyalden RxJS Observable oluşturma

Bir sinyalin değerini takip eden bir `Observable` oluşturmak için `toObservable` yardımcı fonksiyonunu kullanın. Sinyalin değeri, değiştiğinde Observable'a yayın yapan bir `effect` ile izlenir.

```ts
import {Component, signal} from '@angular/core';
import {toObservable} from '@angular/core/rxjs-interop';

@Component(/* ... */)
export class SearchResults {
  query: Signal<string> = inject(QueryService).query;
  query$ = toObservable(this.query);

results$ = this.query$.pipe(switchMap((query) => this.http.get('/search?q=' + query)));
}
```

`query` sinyali değiştikçe, `query$` Observable'ı en son sorguyu yayar ve yeni bir HTTP isteği tetikler.

### Enjeksiyon bağlamı

`toObservable` varsayılan olarak bir [enjeksiyon bağlamında](guide/di/dependency-injection-context) çalışmalıdır; örneğin bir bileşen veya servisin oluşturulması sırasında. Eğer bir enjeksiyon bağlamı mevcut değilse, bunun yerine kullanılacak `Injector`'ı manuel olarak belirtebilirsiniz.

### `toObservable` zamanlaması

`toObservable`, sinyalin değerini bir `ReplaySubject` içinde takip etmek için bir efekt kullanır. Abonelik sırasında ilk değer (varsa) eşzamanlı olarak yayılabilir ve sonraki tüm değerler eşzamansız olacaktır.

Observable'ların aksine, sinyaller asla değişikliklerin eşzamanlı bildirimini sağlamaz. Bir sinyalin değerini birden çok kez güncelleseniz bile, `toObservable` yalnızca sinyal kararlı hale geldikten sonra değeri yayar.

```ts
const obs$ = toObservable(mySignal);
obs$.subscribe((value) => console.log(value));

mySignal.set(1);
mySignal.set(2);
mySignal.set(3);
```

Burada yalnızca son değer (3) günlüğe kaydedilir.

## Asenkron veri için `rxResource` kullanımı

Angular'ın [`resource` fonksiyonu](/guide/signals/resource), uygulamanızın sinyal tabanlı koduna asenkron veriyi dahil etmenin bir yolunu sunar. Bu kalıbın üzerine inşa edilen `rxResource`, veri kaynağınızı bir RxJS `Observable` cinsinden tanımladığınız bir kaynak tanımlamanıza olanak tanır. Bir `loader` fonksiyonu kabul etmek yerine, `rxResource` bir RxJS `Observable` kabul eden bir `stream` fonksiyonu alır.

```typescript
import {Component, inject} from '@angular/core';
import {rxResource} from '@angular/core/rxjs-interop';

@Component(/* ... */)
export class UserProfile {
  // Bu bileşen, verileri bir RxJS Observable aracılığıyla sunan bir servise dayanır.
  private userData = inject(MyUserDataClient);

protected userId = input<string>();

private userResource = rxResource({
    params: () => ({userId: this.userId()}),

// `stream` özelliği, bir RxJS Observable olarak veri akışı döndüren
    // bir fabrika fonksiyonu bekler.
    stream: ({params}) => this.userData.load(params.userId),
  });
}
```

`stream` özelliği, bir RxJS `Observable` için bir fabrika fonksiyonu kabul eder. Bu fabrika fonksiyonuna kaynağın `params` değeri geçirilir ve bir `Observable` döndürür. Kaynak, `params` hesaplaması her yeni değer ürettiğinde bu fabrika fonksiyonunu çağırır. Fabrika fonksiyonuna geçirilen parametreler hakkında daha fazla bilgi için [Kaynak yükleyiciler](/guide/signals/resource#resource-loaderları) bölümüne bakın.

Diğer tüm açılardan, `rxResource`, parametreleri belirlemek, değerleri okumak, yükleme durumunu kontrol etmek ve hataları incelemek için `resource` ile aynı şekilde davranır ve aynı API'leri sağlar.
# Bileşen ve direktif çıktıları ile RxJS birlikte çalışması

TIP: Bu kılavuz, [bileşen ve direktif çıktılarına](guide/components/outputs) aşina olduğunuzu varsayar.

`@angular/rxjs-interop` paketi, bileşen ve direktif çıktılarıyla ilgili iki API sunar.

## Bir RxJS Observable'a dayalı çıktı oluşturma

`outputFromObservable`, bir RxJS observable'a dayalı olarak yayın yapan bir bileşen veya direktif çıktısı oluşturmanıza olanak tanır:

```ts
{highlight:[11]}
import {Directive} from '@angular/core';
import {outputFromObservable} from '@angular/core/rxjs-interop';

@Directive({
  /*...*/
})
class Draggable {
  pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();

// `pointerMoves$` her yayın yaptığında, `pointerMove` olayı tetiklenir.
  pointerMove = outputFromObservable(this.pointerMoves$);
}
```

`outputFromObservable` fonksiyonunun Angular derleyicisi için özel bir anlamı vardır. **`outputFromObservable`'ı yalnızca bileşen ve direktif özellik başlatıcılarında çağırabilirsiniz.**

Çıktıya `subscribe` olduğunuzda, Angular aboneliği otomatik olarak temel observable'a yönlendirir. Angular, bileşen veya direktif yok edildiğinde değerleri yönlendirmeyi durdurur.

HELPFUL: Değerleri zorunlu olarak yayabiliyorsanız doğrudan `output()` kullanmayı düşünün.

## Bir bileşen veya direktif çıktısından RxJS Observable oluşturma

`outputToObservable` fonksiyonu, bir bileşen çıktısından RxJS observable oluşturmanıza olanak tanır.

```ts
{highlight:[11]}
import {outputToObservable} from '@angular/core/rxjs-interop';

@Component(/*...*/)
class CustomSlider {
    valueChange = output<number>();
}

// `CustomSlider` örnek referansı.
const slider: CustomSlider = createSlider();

outputToObservable(slider.valueChange) // Observable<number>
    .pipe(...)
    .subscribe(...);
```

HELPFUL: İhtiyaçlarınızı karşılıyorsa doğrudan `OutputRef` üzerindeki `subscribe` metodunu kullanmayı düşünün.
# `HttpClient` Kurulumu

Uygulamanızda `HttpClient` kullanabilmeniz için önce onu [bağımlılık enjeksiyonu](guide/di) ile yapılandırmanız gerekir.

## Bağımlılık Enjeksiyonu ile `HttpClient` Sağlama

`HttpClient`, çoğu uygulamanın `app.config.ts` dosyasındaki uygulama `providers` içine dahil ettiği `provideHttpClient` yardımcı fonksiyonu kullanılarak sağlanır.

```ts
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()],
};
```

Uygulamanız bunun yerine NgModule tabanlı önyükleme kullanıyorsa, `provideHttpClient`'ı uygulamanızın NgModule'ünün providers'ına dahil edebilirsiniz:

```ts
@NgModule({
  providers: [provideHttpClient()],
  // ... diğer uygulama yapılandırması
})
export class AppModule {}
```

Ardından `HttpClient` hizmetini bileşenlerinizin, servislerinizin veya diğer sınıflarınızın bağımlılığı olarak enjekte edebilirsiniz:

```ts
@Service()
export class ConfigService {
  private http = inject(HttpClient);
  // Bu servis artık `this.http` aracılığıyla HTTP istekleri yapabilir.
}
```

## `HttpClient` Özelliklerini Yapılandırma

`provideHttpClient`, istemcinin farklı yönlerini etkinleştirmek veya yapılandırmak için isteğe bağlı özellik yapılandırmalarının bir listesini kabul eder. Bu bölüm isteğe bağlı özellikleri ve kullanımlarını açıklar.

### `withXhr`

```ts
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(withXhr())],
};
```

Varsayılan olarak, `HttpClient` istekleri yapmak için [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) API'sini kullanır. `withXhr` özelliği istemciyi bunun yerine [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) API'sini kullanacak şekilde değiştirir.

`fetch` daha modern bir API'dir ve `XMLHttpRequest`'in desteklenmediği bazı ortamlarda kullanılabilir. Yükleme ilerleme olayları üretmemesi gibi bazı sınırlamaları vardır.
Sunucuda XHR desteği **kullanımdan kaldırılmıştır** ve Angular 23'te kaldırılması planlanmaktadır. Temel `xhr2` kütüphanesi yönlendirmeleri güvenli bir şekilde işlemez: alan adları arası yönlendirmelerde `Authorization` başlıklarını iletebilir ve yönlendirme döngüleri aracılığıyla hizmet reddi (DoS) saldırılarına karşı savunmasızdır. SSR uygulamaları için bunun yerine varsayılan `fetch` arka ucunu kullanın.
### `withInterceptors(...)`

`withInterceptors`, `HttpClient` üzerinden yapılan istekleri işleyecek yakalayıcı fonksiyonları kümesini yapılandırır. Daha fazla bilgi için [yakalayıcılar kılavuzuna](guide/http/interceptors) bakın.

### `withInterceptorsFromDi()`

`withInterceptorsFromDi`, eski tarz sınıf tabanlı yakalayıcıları `HttpClient` yapılandırmasına dahil eder. Daha fazla bilgi için [yakalayıcılar kılavuzuna](guide/http/interceptors) bakın.

HELPFUL: Fonksiyonel yakalayıcılar (`withInterceptors` aracılığıyla) daha öngörülebilir sıralamaya sahiptir ve bunları DI tabanlı yakalayıcılar yerine öneriyoruz.

### `withRequestsMadeViaParent()`

Varsayılan olarak, belirli bir enjektör içinde `provideHttpClient` kullanarak `HttpClient`'ı yapılandırdığınızda, bu yapılandırma üst enjektörde bulunabilecek herhangi bir `HttpClient` yapılandırmasını geçersiz kılar.

`withRequestsMadeViaParent()` eklediğinizde, `HttpClient` bu seviyedeki yapılandırılmış yakalayıcılardan geçtikten sonra istekleri üst enjektördeki `HttpClient` örneğine iletecek şekilde yapılandırılır. Bu, isteği üst enjektörün yakalayıcılarından da geçirerek gönderirken bir alt enjektörde yakalayıcılar _eklemek_ istiyorsanız kullanışlıdır.

CRITICAL: Mevcut enjektörün üstünde bir `HttpClient` örneği yapılandırmanız gerekir, aksi takdirde bu seçenek geçerli değildir ve kullanmaya çalıştığınızda çalışma zamanı hatası alırsınız.

### `withJsonpSupport()`

`withJsonpSupport` dahil edildiğinde, `HttpClient` üzerinde alan adları arası veri yükleme için [JSONP kuralı](https://en.wikipedia.org/wiki/JSONP) aracılığıyla GET isteği yapan `.jsonp()` yöntemi etkinleştirilir.

HELPFUL: Mümkün olduğunda alan adları arası istekler yapmak için JSONP yerine [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) kullanmayı tercih edin.

### `withXsrfConfiguration(...)`

Bu seçeneği dahil etmek, `HttpClient`'ın yerleşik XSRF güvenlik işlevselliğini özelleştirmenize olanak tanır. Daha fazla bilgi için [güvenlik kılavuzuna](best-practices/security) bakın.

### `withNoXsrfProtection()`

Bu seçeneği dahil etmek, `HttpClient`'ın yerleşik XSRF güvenlik işlevselliğini devre dışı bırakır. Daha fazla bilgi için [güvenlik kılavuzuna](best-practices/security) bakın.

## `HttpClientModule` Tabanlı Yapılandırma

Bazı uygulamalar `HttpClient`'ı NgModule'lere dayalı eski API kullanarak yapılandırabilir.

Bu tablo, `@angular/common/http`'den kullanılabilir NgModule'leri ve bunların yukarıdaki sağlayıcı yapılandırma fonksiyonlarıyla nasıl ilişkilendiğini listeler.

| **NgModule**                            | `provideHttpClient()` equivalent                         |
| --------------------------------------- | -------------------------------------------------------- |
| `HttpClientModule`                      | `provideHttpClient(withInterceptorsFromDi(), withXhr())` |
| `HttpClientJsonpModule`                 | `withJsonpSupport()`                                     |
| `HttpClientXsrfModule.withOptions(...)` | `withXsrfConfiguration(...)`                             |
| `HttpClientXsrfModule.disable()`        | `withNoXsrfProtection()`                                 |
`HttpClientModule` birden fazla enjektörde bulunduğunda, yakalayıcıların davranışı belirsizdir ve tam seçenekler ile sağlayıcı/içe aktarma sıralamasına bağlıdır.

Daha kararlı davranışa sahip olduğu için çoklu enjektör yapılandırmalarında `provideHttpClient`'ı tercih edin. Yukarıdaki `withRequestsMadeViaParent` özelliğine bakın.

# HTTP İstekleri Yapma

`HttpClient`, hem veri yüklemek hem de sunucuda değişiklikler uygulamak için istek yapmak üzere kullanılan farklı HTTP fiillerine karşılık gelen yöntemlere sahiptir. Her yöntem, abone olunduğunda isteği gönderen ve ardından sunucu yanıt verdiğinde sonuçları yayınlayan bir [RxJS `Observable`](https://rxjs.dev/guide/observable) döndürür.

NOTE: `HttpClient` tarafından oluşturulan `Observable`'lara istenilen sayıda abone olunabilir ve her abonelik için yeni bir arka uç isteği yapılır.

İstek yöntemine iletilen bir seçenekler nesnesi aracılığıyla, isteğin çeşitli özellikleri ve döndürülen yanıt türü ayarlanabilir.

## JSON Verisi Alma

Bir arka uçtan veri almak genellikle [`HttpClient.get()`](api/common/http/HttpClient#get) yöntemi kullanılarak bir GET isteği yapmayı gerektirir. Bu yöntem iki argüman alır: veri alınacak uç nokta URL'si olan bir string ve isteği yapılandırmak için _isteğe bağlı bir seçenekler_ nesnesi.

Örneğin, `HttpClient.get()` yöntemini kullanarak varsayımsal bir API'den yapılandırma verilerini almak için:

```ts
http.get<Config>('/api/config').subscribe((config) => {
  // yapılandırmayı işle.
});
```

Sunucu tarafından döndürülen verilerin `Config` türünde olacağını belirten jenerik tür argümanına dikkat edin. Bu argüman isteğe bağlıdır ve atlarsanız döndürülen veri `Object` türünde olacaktır.

TIP: Belirsiz yapıya sahip verilerle ve potansiyel `undefined` veya `null` değerlerle çalışırken, yanıt türü olarak `Object` yerine `unknown` türünü kullanmayı düşünün.

CRITICAL: İstek yöntemlerinin jenerik türü, sunucu tarafından döndürülen veriler hakkında bir tür **varsayımıdır**. `HttpClient` gerçek dönüş verilerinin bu türle eşleştiğini doğrulamaz.

## Diğer Veri Türlerini Alma

Varsayılan olarak, `HttpClient` sunucuların JSON verisi döndüreceğini varsayar. JSON olmayan bir API ile etkileşim kurarken, istek yaparken `HttpClient`'a hangi yanıt türünü bekleyeceğini söyleyebilirsiniz. Bu, `responseType` seçeneği ile yapılır.

| **`responseType` value** | **Returned response type**                                                                                                                |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `'json'` (default)       | JSON data of the given generic type                                                                                                       |
| `'text'`                 | string data                                                                                                                               |
| `'arraybuffer'`          | [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) containing the raw response bytes |
| `'blob'`                 | [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) instance                                                                        |

Örneğin, `HttpClient`'tan bir `.jpeg` görüntüsünün ham baytlarını bir `ArrayBuffer`'a indirmesini isteyebilirsiniz:

```ts
http.get('/images/dog.jpg', {responseType: 'arraybuffer'}).subscribe((buffer) => {
  console.log('The image is ' + buffer.byteLength + ' bytes large');
});
```
`responseType` değeri `HttpClient` tarafından döndürülen türü etkilediğinden, bir `string` türü değil literal bir tür olmalıdır.

İstek yöntemine iletilen seçenekler nesnesi bir literal nesne ise bu otomatik olarak gerçekleşir, ancak istek seçeneklerini bir değişkene veya yardımcı yönteme çıkarıyorsanız, bunu `responseType: 'text' as const` gibi açıkça literal olarak belirtmeniz gerekebilir.
## Sunucu Durumunu Değiştirme

Sunucu API'lerinde durum değişiklikleri yapan işlemler genellikle yeni durumu veya yapılacak değişikliği belirten bir istek gövdesi ile POST istekleri yapmayı gerektirir.

[`HttpClient.post()`](api/common/http/HttpClient#post) yöntemi `get()` ile benzer şekilde davranır ve seçeneklerinden önce ek bir `body` argümanı kabul eder:

```ts
http.post<Config>('/api/config', newConfig).subscribe((config) => {
  console.log('Updated config:', config);
});
```

İsteğin `body`'si olarak birçok farklı türde değer sağlanabilir ve `HttpClient` bunları buna göre serileştirir:

| **`body` type**                                                                                                               | **Serialized as**                                    |
| ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| string                                                                                                                        | Plain text                                           |
| number, boolean, array, or plain object                                                                                       | JSON                                                 |
| [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)                       | raw data from the buffer                             |
| [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob)                                                                     | raw data with the `Blob`'s content type              |
| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)                                                             | `multipart/form-data` encoded data                   |
| [`HttpParams`](api/common/http/HttpParams) or [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | `application/x-www-form-urlencoded` formatted string |

IMPORTANT: İsteğin gerçekten gönderilmesi için değiştirici istek `Observable`'larına `.subscribe()` yapmayı unutmayın.

## URL Parametrelerini Ayarlama

İstek URL'sine dahil edilmesi gereken istek parametrelerini `params` seçeneğini kullanarak belirtin.

Bir nesne literali iletmek, URL parametrelerini yapılandırmanın en basit yoludur:

```ts
http
  .get('/api/config', {
    params: {filter: 'all'},
  })
  .subscribe((config) => {
    // ...
  });
```

Alternatif olarak, parametrelerin oluşturulması veya serileştirilmesi üzerinde daha fazla kontrole ihtiyacınız varsa bir `HttpParams` örneği iletin.

IMPORTANT: `HttpParams` örnekleri _değiştirilemezdir_ ve doğrudan değiştirilemez. Bunun yerine, `append()` gibi değiştirme yöntemleri, değişikliğin uygulandığı yeni bir `HttpParams` örneği döndürür.

```ts
const baseParams = new HttpParams().set('filter', 'all');

http
  .get('/api/config', {
    params: baseParams.set('details', 'enabled'),
  })
  .subscribe((config) => {
    // ...
  });
```

`HttpClient`'ın parametreleri URL'ye nasıl kodlayacağını belirleyen özel bir `HttpParameterCodec` ile `HttpParams`'ı örnekleyebilirsiniz.

### Özel Parametre Kodlaması

Varsayılan olarak, `HttpParams` parametre anahtarlarını ve değerlerini kodlamak ve çözmek için yerleşik [`HttpUrlEncodingCodec`](api/common/http/HttpUrlEncodingCodec) kullanır.

Kodlama ve çözmenin nasıl uygulanacağını özelleştirmek için kendi [`HttpParameterCodec`](api/common/http/HttpParameterCodec) uygulamanızı sağlayabilirsiniz.

```ts
import {HttpClient, HttpParams, HttpParameterCodec} from '@angular/common/http';
import {inject} from '@angular/core';

export class CustomHttpParamEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

export class ApiService {
  private http = inject(HttpClient);

search() {
    const params = new HttpParams({
      encoder: new CustomHttpParamEncoder(),
    })
      .set('email', 'dev+alerts@example.com')
      .set('q', 'a & b? c/d = e');

return this.http.get('/api/items', {params});
  }
}
```

## Request Header'larını Ayarlama

İsteğe dahil edilmesi gereken istek başlıklarını `headers` seçeneğini kullanarak belirtin.

Bir nesne literali iletmek, istek başlıklarını yapılandırmanın en basit yoludur:

```ts
http
  .get('/api/config', {
    headers: {
      'X-Debug-Level': 'verbose',
    },
  })
  .subscribe((config) => {
    // ...
  });
```

Alternatif olarak, başlıkların oluşturulması üzerinde daha fazla kontrole ihtiyacınız varsa bir `HttpHeaders` örneği iletin.

IMPORTANT: `HttpHeaders` örnekleri _değiştirilemezdir_ ve doğrudan değiştirilemez. Bunun yerine, `append()` gibi değiştirme yöntemleri, değişikliğin uygulandığı yeni bir `HttpHeaders` örneği döndürür.

```ts
const baseHeaders = new HttpHeaders().set('X-Debug-Level', 'minimal');

http
  .get<Config>('/api/config', {
    headers: baseHeaders.set('X-Debug-Level', 'verbose'),
  })
  .subscribe((config) => {
    // ...
  });
```

## Sunucu Response Olaylarıyla Etkileşim

Kolaylık sağlamak için, `HttpClient` varsayılan olarak sunucu tarafından döndürülen verinin (yanıt gövdesi) bir `Observable`'ını döndürür. Bazen gerçek yanıtı incelemek istenebilir, örneğin belirli yanıt başlıklarını almak için.

Tüm yanıta erişmek için `observe` seçeneğini `'response'` olarak ayarlayın:

```ts
http.get<Config>('/api/config', {observe: 'response'}).subscribe((res) => {
  console.log('Response status:', res.status);
  console.log('Body:', res.body);
});
```
`observe` değeri `HttpClient` tarafından döndürülen türü etkilediğinden, bir `string` türü değil literal bir tür olmalıdır.

İstek yöntemine iletilen seçenekler nesnesi bir literal nesne ise bu otomatik olarak gerçekleşir, ancak istek seçeneklerini bir değişkene veya yardımcı yönteme çıkarıyorsanız, bunu `observe: 'response' as const` gibi açıkça literal olarak belirtmeniz gerekebilir.
## Ham İlerleme Olaylarını Alma

Yanıt gövdesi veya yanıt nesnesine ek olarak, `HttpClient` istek yaşam döngüsündeki belirli anlara karşılık gelen ham _olaylar_ akışını da döndürebilir. Bu olaylar isteğin ne zaman gönderildiğini, yanıt başlığının ne zaman döndüğünü ve gövdenin ne zaman tamamlandığını içerir. Bu olaylar ayrıca büyük istek veya yanıt gövdeleri için yükleme ve indirme durumunu bildiren _ilerleme olaylarını_ da içerebilir.

İlerleme olayları varsayılan olarak devre dışıdır (performans maliyeti olduğundan) ancak `reportProgress` seçeneği ile etkinleştirilebilir.

NOTE: `HttpClient`'ın varsayılan fetch arka ucu _yükleme_ ilerleme olaylarını bildirmez. Uygulamanız yükleme ilerleme olaylarına ihtiyaç duyuyorsa, `HttpClient`'ı `provideHttpClient(...)` içinde `withXhr()` ile yapılandırın.

Olay akışını gözlemlemek için `observe` seçeneğini `'events'` olarak ayarlayın:

```ts
http
  .post('/api/upload', myData, {
    reportProgress: true,
    observe: 'events',
  })
  .subscribe((event) => {
    switch (event.type) {
      case HttpEventType.UploadProgress:
        console.log('Uploaded ' + event.loaded + ' out of ' + event.total + ' bytes');
        break;
      case HttpEventType.Response:
        console.log('Finished uploading!');
        break;
    }
  });
```
`observe` değeri `HttpClient` tarafından döndürülen türü etkilediğinden, bir `string` türü değil literal bir tür olmalıdır.

İstek yöntemine iletilen seçenekler nesnesi bir literal nesne ise bu otomatik olarak gerçekleşir, ancak istek seçeneklerini bir değişkene veya yardımcı yönteme çıkarıyorsanız, bunu `observe: 'events' as const` gibi açıkça literal olarak belirtmeniz gerekebilir.
Olay akışında bildirilen her `HttpEvent`, olayın neyi temsil ettiğini ayırt eden bir `type` özelliğine sahiptir:

| **`type` value**                 | **Event meaning**                                                                  |
| -------------------------------- | ---------------------------------------------------------------------------------- |
| `HttpEventType.Sent`             | The request has been dispatched to the server                                      |
| `HttpEventType.UploadProgress`   | An `HttpUploadProgressEvent` reporting progress on uploading the request body      |
| `HttpEventType.ResponseHeader`   | The head of the response has been received, including status and headers           |
| `HttpEventType.DownloadProgress` | An `HttpDownloadProgressEvent` reporting progress on downloading the response body |
| `HttpEventType.Response`         | The entire response has been received, including the response body                 |
| `HttpEventType.User`             | A custom event from an HTTP interceptor.                                           |

## İstek Hatalarını Yönetme

Bir HTTP isteğinin başarısız olmasının üç yolu vardır:

- Bir ağ veya bağlantı hatası, isteğin arka uç sunucusuna ulaşmasını engelleyebilir.
- Zaman aşımı seçeneği ayarlandığında istek zamanında yanıt vermeyebilir.
- Arka uç isteği alabilir ancak işlemekte başarısız olabilir ve bir hata yanıtı döndürebilir.

`HttpClient` yukarıdaki tüm hata türlerini, `Observable`'ın hata kanalı aracılığıyla döndürdüğü bir `HttpErrorResponse` içinde yakalar. Ağ ve zaman aşımı hataları `0` `status` koduna ve [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent) örneği olan bir `error`'a sahiptir. Arka uç hataları, arka uç tarafından döndürülen başarısız `status` koduna ve hata yanıtını `error` olarak içerir. Hatanın nedenini ve hatayı ele almak için uygun eylemi belirlemek üzere yanıtı inceleyin.

[RxJS kütüphanesi](https://rxjs.dev/) hata yönetimi için kullanışlı olabilecek çeşitli operatörler sunar.

Bir hata yanıtını kullanıcı arayüzü için bir değere dönüştürmek üzere `catchError` operatörünü kullanabilirsiniz. Bu değer kullanıcı arayüzüne bir hata sayfası veya değeri göstermesini söyleyebilir ve gerekirse hatanın nedenini yakalayabilir.

Bazen ağ kesintileri gibi geçici hatalar bir isteğin beklenmedik şekilde başarısız olmasına neden olabilir ve isteği basitçe yeniden denemek başarılı olmasını sağlayabilir. RxJS, başarısız bir `Observable`'a belirli koşullar altında otomatik olarak yeniden abone olan çeşitli _yeniden deneme_ operatörleri sağlar. Örneğin, `retry()` operatörü otomatik olarak belirtilen sayıda yeniden abone olmayı deneyecektir.

### Zaman Aşımları

Bir istek için zaman aşımı ayarlamak üzere, diğer istek seçenekleriyle birlikte `timeout` seçeneğini milisaniye cinsinden bir sayıya ayarlayabilirsiniz. Arka uç isteği belirtilen süre içinde tamamlanmazsa, istek iptal edilir ve bir hata yayınlanır.

NOTE: Zaman aşımı yalnızca arka uç HTTP isteğinin kendisine uygulanır. Tüm istek işleme zinciri için bir zaman aşımı değildir. Bu nedenle bu seçenek, yakalayıcılar tarafından oluşturulan herhangi bir gecikmeden etkilenmez.

```ts
http
  .get('/api/config', {
    timeout: 3000,
  })
  .subscribe({
    next: (config) => {
      console.log('Config fetched successfully:', config);
    },
    error: (err) => {
      // İstek zaman aşımına uğrarsa, bir hata yayınlanmış olacaktır.
    },
  });
```

## Gelişmiş Fetch Seçenekleri

Angular'ın `HttpClient`'ı, performansı ve kullanıcı deneyimini iyileştirebilecek gelişmiş fetch API seçeneklerini destekler. Bu seçenekler, varsayılan olan fetch arka ucu kullanılırken mevcuttur.

### Fetch Seçenekleri

Aşağıdaki seçenekler, fetch arka ucu kullanılırken istek davranışı üzerinde ayrıntılı kontrol sağlar.

#### Keep-alive Bağlantıları

`keepalive` seçeneği, bir isteğin onu başlatan sayfadan daha uzun yaşamasına olanak tanır. Bu, özellikle kullanıcı sayfadan ayrılsa bile tamamlanması gereken analitik veya günlükleme istekleri için kullanışlıdır.

```ts
http
  .post('/api/analytics', analyticsData, {
    keepalive: true,
  })
  .subscribe();
```

#### HTTP Önbellek Kontrolü

`cache` seçeneği, isteğin tarayıcının HTTP önbelleği ile nasıl etkileşime gireceğini kontrol eder ve tekrarlanan istekler için performansı önemli ölçüde iyileştirebilir.

```ts
// Tazeliğe bakılmaksızın önbelleğe alınmış yanıtı kullan
http
  .get('/api/config', {
    cache: 'force-cache',
  })
  .subscribe((config) => {
    // ...
  });

// Her zaman ağdan al, önbelleği atla
http
  .get('/api/live-data', {
    cache: 'no-cache',
  })
  .subscribe((data) => {
    // ...
  });

// Yalnızca önbelleğe alınmış yanıtı kullan, önbellekte yoksa başarısız ol
http
  .get('/api/static-data', {
    cache: 'only-if-cached',
  })
  .subscribe((data) => {
    // ...
  });
```

#### Core Web Vitals için İstek Önceliği

`priority` seçeneği, bir isteğin göreli önemini belirtmenize olanak tanır ve tarayıcıların daha iyi Core Web Vitals puanları için kaynak yüklemesini optimize etmesine yardımcı olur.

```ts
// Kritik kaynaklar için yüksek öncelik
http
  .get('/api/user-profile', {
    priority: 'high',
  })
  .subscribe((profile) => {
    // ...
  });

// Kritik olmayan kaynaklar için düşük öncelik
http
  .get('/api/recommendations', {
    priority: 'low',
  })
  .subscribe((recommendations) => {
    // ...
  });

// Otomatik öncelik (varsayılan) tarayıcının karar vermesine izin verir
http
  .get('/api/settings', {
    priority: 'auto',
  })
  .subscribe((settings) => {
    // ...
  });
```

Kullanılabilir `priority` değerleri:

- `'high'`: Yüksek öncelik, erken yüklenir (örn. kritik kullanıcı verileri, ekranın üst kısmındaki içerik)
- `'low'`: Düşük öncelik, kaynaklar mevcut olduğunda yüklenir (örn. analitik, ön yükleme verileri)
- `'auto'`: Tarayıcı, istek bağlamına göre önceliği belirler (varsayılan)

TIP: Largest Contentful Paint (LCP) etkileyen istekler için `priority: 'high'` ve ilk kullanıcı deneyimini etkilemeyen istekler için `priority: 'low'` kullanın.

#### İstek Modu

`mode` seçeneği, isteğin çapraz köken isteklerini nasıl ele aldığını kontrol eder ve yanıt türünü belirler.

```ts
// Yalnızca aynı kökenli istekler
http
  .get('/api/local-data', {
    mode: 'same-origin',
  })
  .subscribe((data) => {
    // ...
  });

// CORS etkin çapraz köken istekleri
http
  .get('https://api.external.com/data', {
    mode: 'cors',
  })
  .subscribe((data) => {
    // ...
  });

// Basit çapraz köken istekleri için No-CORS modu
http
  .get('https://external-api.com/public-data', {
    mode: 'no-cors',
  })
  .subscribe((data) => {
    // ...
  });
```

Kullanılabilir `mode` değerleri:

- `'same-origin'`: Yalnızca aynı kökenli isteklere izin verir, çapraz köken isteklerinde başarısız olur
- `'cors'`: CORS ile çapraz köken isteklere izin verir (varsayılan)
- `'no-cors'`: CORS olmadan basit çapraz köken isteklere izin verir, yanıt opaktır

TIP: Hassas istekler için hiçbir zaman çapraz köken olmaması gereken durumlarda `mode: 'same-origin'` kullanın.

#### Yönlendirme Yönetimi

`redirect` seçeneği, sunucudan gelen yönlendirme yanıtlarının nasıl ele alınacağını belirtir.

```ts
// Yönlendirmeleri otomatik olarak takip et (varsayılan davranış)
http
  .get('/api/resource', {
    redirect: 'follow',
  })
  .subscribe((data) => {
    // ...
  });

// Otomatik yönlendirmeleri engelle
http
  .get('/api/resource', {
    redirect: 'manual',
  })
  .subscribe((response) => {
    // Yönlendirmeyi manuel olarak yönet
  });

// Yönlendirmeleri hata olarak ele al
http
  .get('/api/resource', {
    redirect: 'error',
  })
  .subscribe({
    next: (data) => {
      // Başarılı yanıt
    },
    error: (err) => {
      // Yönlendirme yanıtları bu hata işleyicisini tetikleyecektir
    },
  });
```

Kullanılabilir `redirect` değerleri:

- `'follow'`: Yönlendirmeleri otomatik olarak takip eder (varsayılan)
- `'error'`: Yönlendirmeleri hata olarak ele alır
- `'manual'`: Yönlendirmeleri otomatik olarak takip etmez, yönlendirme yanıtını döndürür

TIP: Yönlendirmeleri özel mantıkla ele almanız gerektiğinde `redirect: 'manual'` kullanın.

#### Kimlik Bilgisi Yönetimi

`credentials` seçeneği, çerezlerin, yetkilendirme başlıklarının ve diğer kimlik bilgilerinin çapraz köken istekleriyle gönderilip gönderilmeyeceğini kontrol eder. Bu, özellikle kimlik doğrulama senaryoları için önemlidir.

```ts
// Çapraz köken istekler için kimlik bilgilerini dahil et
http
  .get('https://api.example.com/protected-data', {
    credentials: 'include',
  })
  .subscribe((data) => {
    // ...
  });

// Asla kimlik bilgisi gönderme (çapraz köken için varsayılan)
http
  .get('https://api.example.com/public-data', {
    credentials: 'omit',
  })
  .subscribe((data) => {
    // ...
  });

// Kimlik bilgilerini yalnızca aynı kökenli istekler için gönder
http
  .get('/api/user-data', {
    credentials: 'same-origin',
  })
  .subscribe((data) => {
    // ...
  });

// withCredentials, credentials ayarını geçersiz kılar
http
  .get('https://api.example.com/data', {
    credentials: 'omit', // Bu göz ardı edilecek
    withCredentials: true, // Bu credentials: 'include' olarak zorlar
  })
  .subscribe((data) => {
    // İstek, credentials: 'omit' olmasına rağmen kimlik bilgilerini dahil edecek
  });

// Eski yaklaşım (hâlâ destekleniyor)
http
  .get('https://api.example.com/data', {
    withCredentials: true,
  })
  .subscribe((data) => {
    // credentials: 'include' ile eşdeğer
  });
```

IMPORTANT: `withCredentials` seçeneği `credentials` seçeneğinden önceliklidir. Her ikisi de belirtilmişse, `withCredentials: true` açık `credentials` değerinden bağımsız olarak her zaman `credentials: 'include'` sonucunu verecektir.

Kullanılabilir `credentials` değerleri:

- `'omit'`: Kimlik bilgilerini asla göndermez
- `'same-origin'`: Kimlik bilgilerini yalnızca aynı kökenli istekler için gönderir (varsayılan)
- `'include'`: Çapraz köken istekler dahil her zaman kimlik bilgilerini gönderir

TIP: CORS'u destekleyen farklı bir alan adına kimlik doğrulama çerezleri veya başlıkları göndermeniz gerektiğinde `credentials: 'include'` kullanın. Karışıklığı önlemek için `credentials` ve `withCredentials` seçeneklerini birlikte kullanmaktan kaçının.

#### Referrer (Yönlendiren)

`referrer` seçeneği, istekle birlikte hangi yönlendiren bilgisinin gönderileceğini kontrol etmenize olanak tanır. Bu, gizlilik ve güvenlik açısından önemlidir.

```ts
// Belirli bir referrer URL'si gönder
http
  .get('/api/data', {
    referrer: 'https://example.com/page',
  })
  .subscribe((data) => {
    // ...
  });

// Mevcut sayfayı referrer olarak kullan (varsayılan davranış)
http
  .get('/api/analytics', {
    referrer: 'about:client',
  })
  .subscribe((data) => {
    // ...
  });
```

`referrer` seçeneği şunları kabul eder:

- Geçerli bir URL string: Gönderilecek belirli yönlendiren URL'sini ayarlar
- Boş bir string `''`: Yönlendiren bilgisi göndermez
- `'about:client'`: Varsayılan yönlendireni (mevcut sayfa URL'si) kullanır

TIP: Yönlendiren sayfa URL'sini sızdırmak istemediğiniz hassas istekler için `referrer: ''` kullanın.

#### Referrer Politikası

`referrerPolicy` seçeneği, ne kadar yönlendiren bilgisinin (isteği yapan sayfanın URL'si) bir HTTP isteğiyle birlikte gönderileceğini kontrol eder. Bu ayar hem gizlilik hem de analitikleri etkiler ve veri görünürlüğü ile güvenlik değerlendirmeleri arasında denge kurmanıza olanak tanır.

```ts
// Mevcut sayfadan bağımsız olarak referrer bilgisi gönderme
http
  .get('/api/data', {
    referrerPolicy: 'no-referrer',
  })
  .subscribe();

// Yalnızca kökeni gönder (örn. https://example.com)
http
  .get('/api/analytics', {
    referrerPolicy: 'origin',
  })
  .subscribe();
```

`referrerPolicy` seçeneği şunları kabul eder:

- `'no-referrer'` `Referer` başlığını asla göndermez.
- `'no-referrer-when-downgrade'` Aynı köken ve güvenli (HTTPS->HTTPS) istekler için yönlendireni gönderir, ancak güvenli bir kökenden daha az güvenli bir kökene (HTTPS->HTTP) geçerken atlar.
- `'origin'` Yönlendirenin yalnızca kökenini (şema, ana bilgisayar, port) gönderir, yol ve sorgu bilgilerini atlar.
- `'origin-when-cross-origin'` Aynı köken istekler için tam URL gönderir, ancak çapraz köken istekler için yalnızca kökeni gönderir.
- `'same-origin'` Aynı köken istekler için tam URL gönderir ve çapraz köken istekler için yönlendiren göndermez.
- `'strict-origin'` Yalnızca kökeni gönderir ve yalnızca protokol güvenlik seviyesi düşürülmemişse (örn. HTTPS->HTTPS). Düşürmede yönlendireni atlar.
- `'strict-origin-when-cross-origin'` Varsayılan tarayıcı davranışı. Aynı köken istekler için tam URL, düşürülmemiş çapraz köken istekler için köken gönderir ve düşürmede yönlendireni atlar.
- `'unsafe-url'` Her zaman tam URL'yi (yol ve sorgu dahil) gönderir. Bu hassas verileri açığa çıkarabilir ve dikkatli kullanılmalıdır.

TIP: Gizlilik açısından hassas istekler için `'no-referrer'`, `'origin'` veya `'strict-origin-when-cross-origin'` gibi muhafazakar değerleri tercih edin.

#### Bütünlük (Integrity)

`integrity` seçeneği, beklenen içeriğin kriptografik özetini sağlayarak yanıtın değiştirilmediğini doğrulamanıza olanak tanır. Bu, özellikle CDN'lerden betik veya diğer kaynakları yüklerken kullanışlıdır.

```ts
// SHA-256 özetiyle yanıt bütünlüğünü doğrula
http
  .get('/api/script.js', {
    integrity: 'sha256-ABC123...',
    responseType: 'text',
  })
  .subscribe((script) => {
    // Betik içeriği özete göre doğrulanır
  });
```

IMPORTANT: `integrity` seçeneği, yanıt içeriği ile sağlanan özet arasında tam bir eşleşme gerektirir. İçerik eşleşmezse, istek bir ağ hatası ile başarısız olur.

TIP: Değiştirilmediğinden emin olmak için harici kaynaklardan kritik kaynaklar yüklerken alt kaynak bütünlüğünü kullanın. Özetleri `openssl` gibi araçlar kullanarak oluşturun.

## HTTP `Observable`'lar

`HttpClient` üzerindeki her istek yöntemi, istenen yanıt türünün bir `Observable`'ını oluşturur ve döndürür. `HttpClient` kullanırken bu `Observable`'ların nasıl çalıştığını anlamak önemlidir.

`HttpClient`, RxJS'in "soğuk" `Observable`'lar dediği şeyi üretir, yani `Observable`'a abone olunana kadar gerçek bir istek yapılmaz. Ancak o zaman istek sunucuya gönderilir. Aynı `Observable`'a birden fazla kez abone olmak birden fazla arka uç isteğini tetikler. Her abonelik bağımsızdır.

TIP: `HttpClient` `Observable`'larını gerçek sunucu istekleri için _planlar_ olarak düşünebilirsiniz.

Abone olduktan sonra, abonelikten çıkmak devam eden isteği iptal eder. Bu, `Observable`'a `async` pipe aracılığıyla abone olunmuşsa çok kullanışlıdır, çünkü kullanıcı mevcut sayfadan ayrıldığında isteği otomatik olarak iptal eder. Ek olarak, `Observable`'ı `switchMap` gibi bir RxJS birleştiricisi ile kullanırsanız, bu iptal eski istekleri temizler.

Yanıt döndüğünde, `HttpClient`'tan gelen `Observable`'lar genellikle tamamlanır (ancak yakalayıcılar bunu etkileyebilir).

Otomatik tamamlama nedeniyle, `HttpClient` abonelikleri temizlenmezse genellikle bellek sızıntısı riski yoktur. Ancak, herhangi bir asenkron işlemde olduğu gibi, abonelik geri çağrısının aksi takdirde çalışıp yok edilmiş bileşenle etkileşime girmeye çalıştığında hatalarla karşılaşabileceğinden, onları kullanan bileşen yok edildiğinde abonelikleri temizlemenizi şiddetle öneriyoruz.

TIP: `Observable`'lara abone olmak için `async` pipe veya `toSignal` işlemini kullanmak, aboneliklerin düzgün şekilde elden çıkarılmasını sağlar.

## En İyi Uygulamalar

`HttpClient` doğrudan bileşenlerden enjekte edilip kullanılabilse de, genellikle veri erişim mantığını izole eden ve kapsülleyen yeniden kullanılabilir, enjekte edilebilir servisler oluşturmanızı öneririz. Örneğin, bu `UserService` bir kullanıcıyı id'sine göre veri isteme mantığını kapsüller:

```ts
@Service()
export class UserService {
  private http = inject(HttpClient);

getUser(id: string): Observable<User> {
    return this.http.get<User>(`/api/user/${id}`);
  }
}
```

Bir bileşen içinde, veri yalnızca yüklenmesi tamamlandığında kullanıcı arayüzünü oluşturmak için `@if` ile `async` pipe'ı birleştirebilirsiniz:

```typescript
import {AsyncPipe} from '@angular/common';

@Component({
  imports: [AsyncPipe],
  template: `
    @if (user$ | async; as user) {
      <p>Name: {{ user.name }}</p>
      <p>Biography: {{ user.biography }}</p>
    }
  `,
})
export class UserProfile {
  userId = input.required<string>();
  user$!: Observable<User>;

private userService = inject(UserService);

constructor(): void {
    effect(() => {
      this.user$ = this.userService.getUser(this.userId());
    });
  }
}
```
# Interceptor'lar

`HttpClient`, _yakalayıcılar_ olarak bilinen bir ara yazılım biçimini destekler.

TLDR: Yakalayıcılar, yeniden deneme, önbellekleme, günlükleme ve kimlik doğrulama gibi yaygın kalıpların bireysel isteklerden soyutlanmasına olanak tanıyan ara yazılımlardır.

`HttpClient` iki tür yakalayıcıyı destekler: fonksiyonel ve DI tabanlı. Önerimiz, özellikle karmaşık kurulumlarda daha öngörülebilir davranışa sahip olan fonksiyonel yakalayıcıları kullanmanızdır. Bu kılavuzdaki örneklerimiz fonksiyonel yakalayıcıları kullanır ve [DI tabanlı yakalayıcıları](#di-tabanlı-interceptorlar) sonunda kendi bölümlerinde ele alırız.

## Interceptor'lar

Yakalayıcılar genellikle her istek için çalıştırabileceğiniz fonksiyonlardır ve istekler ile yanıtların içeriklerini ve genel akışını etkileme konusunda geniş yeteneklere sahiptirler. Birden fazla yakalayıcı kurabilirsiniz ve bunlar, her yakalayıcının isteği veya yanıtı zincirdeki bir sonraki yakalayıcıya iletmeden önce işlediği bir yakalayıcı zinciri oluşturur.

Yakalayıcıları çeşitli yaygın kalıpları uygulamak için kullanabilirsiniz, örneğin:

- Belirli bir API'ye giden isteklere kimlik doğrulama başlıkları ekleme.
- Başarısız istekleri üstel geri çekilme ile yeniden deneme.
- Yanıtları belirli bir süre boyunca veya değişikliklerle geçersiz kılınana kadar önbellekleme.
- Yanıtların ayrıştırılmasını özelleştirme.
- Sunucu yanıt sürelerini ölçme ve günlükleme.
- Ağ işlemleri devam ederken yükleme göstergesi gibi kullanıcı arayüzü öğelerini yönetme.
- Belirli bir zaman dilimi içinde yapılan istekleri toplama ve gruplama.
- Yapılandırılabilir bir son tarih veya zaman aşımından sonra istekleri otomatik olarak başarısız kılma.
- Sunucuyu düzenli olarak yoklama ve sonuçları yenileme.

## Bir Interceptor Tanımlama

Bir yakalayıcının temel biçimi, giden `HttpRequest`'i ve yakalayıcı zincirindeki bir sonraki işleme adımını temsil eden bir `next` fonksiyonunu alan bir fonksiyondur.

Örneğin, bu `loggingInterceptor` isteği iletmeden önce giden istek URL'sini `console.log`'a günlükler:

```ts
export function loggingInterceptor(
  req: HttpRequest<unknown>,
  next: HttpHandlerFn,
): Observable<HttpEvent<unknown>> {
  console.log(req.url);
  return next(req);
}
```

Bu yakalayıcının gerçekten istekleri yakalaması için `HttpClient`'ı bunu kullanacak şekilde yapılandırmanız gerekir.

## Interceptor'ları Yapılandırma

Yakalayıcıları kullanacağınız kümeyi, `withInterceptors` özelliğini kullanarak bağımlılık enjeksiyonu aracılığıyla `HttpClient`'ı yapılandırırken bildirirsiniz:

```ts
bootstrapApplication(App, {
  providers: [provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))],
});
```

Yapılandırdığınız yakalayıcılar, providers'da listelediğiniz sırada zincirlenir. Yukarıdaki örnekte, `loggingInterceptor` isteği işler ve ardından `cachingInterceptor`'a iletir.

### Response Olaylarını Yakalama

Bir yakalayıcı, yanıta erişmek veya onu değiştirmek için `next` tarafından döndürülen `HttpEvent`'lerin `Observable` akışını dönüştürebilir. Bu akış tüm yanıt olaylarını içerdiğinden, son yanıt nesnesini tanımlamak için her olayın `.type`'ını incelemek gerekebilir.

```ts
export function loggingInterceptor(
  req: HttpRequest<unknown>,
  next: HttpHandlerFn,
): Observable<HttpEvent<unknown>> {
  return next(req).pipe(
    tap((event) => {
      if (event.type === HttpEventType.Response) {
        console.log(req.url, 'returned a response with status', event.status);
      }
    }),
  );
}
```

TIP: Yakalayıcılar, istek nesnesini yakalayan bir closure içinde yanıt akışını dönüştürdükleri için yanıtları giden istekleriyle doğal olarak ilişkilendirir.

## Request'leri Değiştirme

`HttpRequest` ve `HttpResponse` örneklerinin çoğu yönü _değiştirilemezdir_ ve yakalayıcılar bunları doğrudan değiştiremez. Bunun yerine, yakalayıcılar `.clone()` işlemini kullanarak bu nesneleri klonlayarak ve yeni örnekte hangi özelliklerin değiştirilmesi gerektiğini belirterek değişiklikleri uygular. Bu, değerin kendisinde değiştirilemez güncellemeler yapmayı içerebilir (`HttpHeaders` veya `HttpParams` gibi).

Örneğin, bir isteğe başlık eklemek için:

```ts
const reqWithHeader = req.clone({
  headers: req.headers.set('X-New-Header', 'new header value'),
});
```

Bu değiştirilemezlik, aynı `HttpRequest` yakalayıcı zincirine birden fazla kez gönderildiğinde çoğu yakalayıcının idempotent olmasını sağlar. Bu, bir isteğin başarısızlık sonrası yeniden denenmesi dahil çeşitli nedenlerle gerçekleşebilir.

CRITICAL: Bir istek veya yanıtın gövdesi derin değişikliklere karşı korunmaz. Bir yakalayıcının gövdeyi değiştirmesi gerekiyorsa, aynı istekte birden fazla kez çalışmayı ele almaya dikkat edin.

## Interceptor'larda Bağımlılık Enjeksiyonu

Yakalayıcılar, onları kaydeden enjektörün _enjeksiyon bağlamında_ çalışır ve bağımlılıkları almak için Angular'ın [`inject`](/api/core/inject) API'sini kullanabilir.

Örneğin, bir uygulamanın giden istekler için kimlik doğrulama belirteçleri oluşturan `AuthService` adında bir servisi olduğunu varsayalım. Bir yakalayıcı bu servisi enjekte edip kullanabilir:

```ts
export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn) {
  // Mevcut `AuthService`'i enjekte et ve kimlik doğrulama belirteci almak için kullan:
  const authToken = inject(AuthService).getAuthToken();

// Kimlik doğrulama header'ını eklemek için isteği klonla.
  const newReq = req.clone({
    headers: req.headers.append('X-Authentication-Token', authToken),
  });
  return next(newReq);
}
```

## Request ve Response Meta Verileri

Genellikle bir isteğe arka uca gönderilmeyen, özellikle yakalayıcılara yönelik bilgiler eklemek yararlıdır. `HttpRequest`'ler, bu tür meta verileri bir `HttpContext` örneği olarak depolayan bir `.context` nesnesine sahiptir. Bu nesne, `HttpContextToken` türünde anahtarlara sahip tipli bir harita olarak işlev görür.

Bu sistemin nasıl çalıştığını göstermek için, belirli bir istek için bir önbellekleme yakalayıcısının etkin olup olmadığını kontrol etmek üzere meta verileri kullanalım.

### Context Token'larını Tanımlama

Önbellekleme yakalayıcısının belirli bir isteği önbelleğe alıp almayacağını o isteğin `.context` haritasında saklamak için, anahtar olarak kullanılacak yeni bir `HttpContextToken` tanımlayın:

```ts
export const CACHING_ENABLED = new HttpContextToken<boolean>(() => true);
```

Sağlanan fonksiyon, bunun için açıkça bir değer ayarlanmamış istekler için belirtecin varsayılan değerini oluşturur. Bir fonksiyon kullanmak, belirtecin değeri bir nesne veya dizi ise her isteğin kendi örneğini almasını sağlar.

### Interceptor'da Token'ı Okuma

Bir yakalayıcı daha sonra belirteci okuyabilir ve değerine göre önbellekleme mantığını uygulayıp uygulamamayı seçebilir:

```ts
export function cachingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
  if (req.context.get(CACHING_ENABLED)) {
    // önbellekleme mantığını uygula
    return ...;
  } else {
    // bu istek için önbellekleme devre dışı bırakılmış
    return next(req);
  }
}
```

### İstek Yaparken Context Token'larını Ayarlama

`HttpClient` API'si aracılığıyla istek yaparken, `HttpContextToken`'lar için değerler sağlayabilirsiniz:

```ts
const data$ = http.get('/sensitive/data', {
  context: new HttpContext().set(CACHING_ENABLED, false),
});
```

Yakalayıcılar bu değerleri isteğin `HttpContext`'inden okuyabilir.

### Request Context Değiştirilebilirdir

`HttpRequest`'lerin diğer özelliklerinden farklı olarak, ilişkili `HttpContext` _değiştirilebilirdir_. Bir yakalayıcı daha sonra yeniden denenen bir isteğin bağlamını değiştirirse, aynı yakalayıcı tekrar çalıştığında bağlam değişikliğini gözlemler. Gerektiğinde birden fazla yeniden deneme arasında durum aktarmak için bu kullanışlıdır.

## Sentetik Response'lar

Çoğu yakalayıcı, isteği veya yanıtı dönüştürürken basitçe `next` işleyicisini çağıracaktır, ancak bu kesinlikle bir gereklilik değildir. Bu bölüm, bir yakalayıcının daha gelişmiş davranışlar içerebilmesinin çeşitli yollarını açıklar.

Yakalayıcıların `next`'i çağırması zorunlu değildir. Bunun yerine, yanıtları bir önbellekten veya isteği alternatif bir mekanizma aracılığıyla göndererek başka bir yolla oluşturmayı seçebilirler.

`HttpResponse` yapıcısını kullanarak bir yanıt oluşturmak mümkündür:

```ts
const resp = new HttpResponse({
  body: 'response body',
});
```

## Yönlendirme Bilgisiyle Çalışma

`HttpClient` fetch arka ucunu kullandığında, yanıtlar yanıtın bir yönlendirmenin sonucu olup olmadığını gösteren bir `redirected` özelliği içerir. Bu özellik yerel Fetch API spesifikasyonu ile uyumludur ve yönlendirme senaryolarını ele almak için yakalayıcılarda kullanışlı olabilir.

Bir yakalayıcı yönlendirme bilgisine erişebilir ve buna göre davranabilir:

```ts
export function redirectTrackingInterceptor(
  req: HttpRequest<unknown>,
  next: HttpHandlerFn,
): Observable<HttpEvent<unknown>> {
  return next(req).pipe(
    tap((event) => {
      if (event.type === HttpEventType.Response && event.redirected) {
        console.log('Request to', req.url, 'was redirected to', event.url);
        // Yönlendirme mantığını yönet - analitik, güvenlik kontrolleri vb. güncelle
      }
    }),
  );
}
```

Yakalayıcılarınızda koşullu mantık uygulamak için yönlendirme bilgisini de kullanabilirsiniz:

```ts
export function authRedirectInterceptor(
  req: HttpRequest<unknown>,
  next: HttpHandlerFn,
): Observable<HttpEvent<unknown>> {
  return next(req).pipe(
    tap((event) => {
      if (event.type === HttpEventType.Response && event.redirected) {
        // Giriş sayfasına yönlendirilip yönlendirilmediğimizi kontrol et
        if (event.url?.includes('/login')) {
          // Kimlik doğrulama yönlendirmesini yönet
          handleAuthRedirect();
        }
      }
    }),
  );
}
```

## Response Türleriyle Çalışma

`HttpClient` fetch arka ucunu kullandığında, yanıtlar tarayıcının CORS politikaları ve istek moduna göre yanıtı nasıl işlediğini gösteren bir `type` özelliği içerir. Bu özellik yerel Fetch API spesifikasyonu ile uyumludur ve CORS sorunlarını ayıklamak ve yanıt erişilebilirliğini anlamak için değerli bilgiler sağlar.

Yanıt `type` özelliği aşağıdaki değerlere sahip olabilir:

- `'basic'` - Tüm başlıkların erişilebilir olduğu aynı kökenli yanıt
- `'cors'` - CORS başlıkları doğru şekilde yapılandırılmış çapraz kökenli yanıt
- `'opaque'` - CORS olmadan çapraz kökenli yanıt, başlıklar ve gövde sınırlı olabilir
- `'opaqueredirect'` - no-cors modunda yönlendirilmiş bir istekten gelen yanıt
- `'error'` - Ağ hatası oluştu

Bir yakalayıcı, CORS ayıklama ve hata yönetimi için yanıt türü bilgisini kullanabilir:

```ts
export function responseTypeInterceptor(
  req: HttpRequest<unknown>,
  next: HttpHandlerFn,
): Observable<HttpEvent<unknown>> {
  return next(req).pipe(
    map((event) => {
      if (event.type === HttpEventType.Response) {
        // Farklı response türlerini uygun şekilde yönet
        switch (event.responseType) {
          case 'opaque':
            // Response verilerine sınırlı erişim
            console.warn('Limited response data due to CORS policy');
            break;
          case 'cors':
          case 'basic':
            // Response verilerine tam erişim
            break;
          case 'error':
            // Ağ hatalarını yönet
            console.error('Network error in response');
            break;
        }
      }
    }),
  );
}
```

## DI Tabanlı Interceptor'lar

`HttpClient` ayrıca enjekte edilebilir sınıflar olarak tanımlanan ve DI sistemi aracılığıyla yapılandırılan yakalayıcıları da destekler. DI tabanlı yakalayıcıların yetenekleri fonksiyonel yakalayıcılarla aynıdır, ancak yapılandırma mekanizması farklıdır.

DI tabanlı bir yakalayıcı, `HttpInterceptor` arayüzünü uygulayan enjekte edilebilir bir sınıftır:

```ts
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, handler: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Request URL: ' + req.url);
    return handler.handle(req);
  }
}
```

DI tabanlı yakalayıcılar, bir bağımlılık enjeksiyonu çoklu sağlayıcı aracılığıyla yapılandırılır:

```ts
bootstrapApplication(App, {
  providers: [
    provideHttpClient(
      // DI tabanlı interceptor'lar açıkça etkinleştirilmelidir.
      withInterceptorsFromDi(),
    ),

{provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true},
  ],
});
```

DI tabanlı yakalayıcılar, sağlayıcılarının kaydedildiği sırada çalışır. Kapsamlı ve hiyerarşik bir DI yapılandırmasına sahip bir uygulamada, bu sırayı tahmin etmek çok zor olabilir.
# Request'leri Test Etme

Herhangi bir dış bağımlılık için olduğu gibi, testlerinizin uzak bir sunucu ile etkileşimi simüle edebilmesi için HTTP arka ucunu taklit etmeniz gerekir. `@angular/common/http/testing` kütüphanesi, uygulama tarafından yapılan istekleri yakalamak, bunlar hakkında doğrulamalar yapmak ve arka ucunuzun davranışını taklit etmek için yanıtları simüle etmek amacıyla araçlar sağlar.

Test kütüphanesi, uygulamanın önce kodu yürütüp istekleri yaptığı bir kalıp için tasarlanmıştır. Ardından test, belirli isteklerin yapılıp yapılmadığını bekler, bu istekler üzerinde doğrulamalar yapar ve son olarak beklenen her isteği "temizleyerek" yanıtları sağlar.

Son olarak, testler uygulamanın beklenmeyen istekler yapmadığını doğrulayabilir.

## Test Kurulumu

`HttpClient` kullanımını test etmeye başlamak için `TestBed`'i yapılandırın ve testinizin kurulumuna `provideHttpClientTesting()`'i dahil edin. `HttpClient`, Angular'ın test ortamı tarafından sağlanır ve `provideHttpClientTesting()` onu gerçek ağ yerine bir test arka ucu kullanacak şekilde yapılandırır. Ayrıca test arka ucu ile etkileşim kurmak, hangi isteklerin yapıldığına dair beklentiler belirlemek ve bu isteklere yanıtları temizlemek için kullanacağınız `HttpTestingController`'ı da sağlar. `HttpTestingController`, yapılandırıldıktan sonra `TestBed`'den enjekte edilebilir.

```ts
TestBed.configureTestingModule({
  providers: [
    // ... diğer test sağlayıcıları
    provideHttpClientTesting(),
  ],
});

const httpTesting = TestBed.inject(HttpTestingController);
```

Artık testleriniz istek yaptığında, normal arka uç yerine test arka ucuna ulaşacaktır. `httpTesting`'i bu istekler hakkında doğrulamalar yapmak için kullanabilirsiniz.

### Testlerde `HttpClient`'ı yapılandırma

Bir testin, interceptor'lar gibi `HttpClient` özelliklerini yapılandırması gerekiyorsa, `provideHttpClient(...)`'ı `provideHttpClientTesting()`'den önce dahil edin.
IMPORTANT: `provideHttpClient()`'ı `provideHttpClientTesting()`'den **önce** sağlamayı unutmayın, çünkü `provideHttpClientTesting()` `provideHttpClient()`'ın bazı kısımlarını geçersiz kılacaktır. Ters sırada yapmak testlerinizi potansiyel olarak bozabilir.

```ts
TestBed.configureTestingModule({
  providers: [provideHttpClient(withInterceptors([authInterceptor])), provideHttpClientTesting()],
});
```

## Request'leri Bekleme ve Yanıtlama

Örneğin, bir GET isteğinin oluşmasını bekleyen ve sahte bir yanıt sağlayan bir test yazabilirsiniz:

```ts
TestBed.configureTestingModule({
  providers: [ConfigService, provideHttpClientTesting()],
});

const httpTesting = TestBed.inject(HttpTestingController);

// `ConfigService`'i yükle ve mevcut yapılandırmayı iste.
const service = TestBed.inject(ConfigService);
const config$ = service.getConfig<Config>();

// `firstValueFrom`, HTTP isteğini yapan `Observable`'a abone olur
// ve yanıtın bir `Promise`'ini oluşturur.
const configPromise = firstValueFrom(config$);

// Bu noktada istek beklemede ve `HttpTestingController`
// aracılığıyla yapıldığını doğrulayabiliriz:
const req = httpTesting.expectOne('/api/config', 'Request to load the configuration');

// İstenirse isteğin çeşitli özelliklerini doğrulayabiliriz.
expect(req.request.method).toBe('GET');

// İsteği temizlemek tamamlanmasına ve sonucun iletilmesine neden olur.
req.flush(DEFAULT_CONFIG);

// Ardından yanıtın `ConfigService` tarafından başarıyla iletildiğini doğrulayabiliriz:
expect(await configPromise).toEqual(DEFAULT_CONFIG);

// Son olarak, başka istek yapılmadığını doğrulayabiliriz.
httpTesting.verify();
```

NOTE: Verilen kriterlere uyan birden fazla istek yapılmışsa `expectOne` başarısız olacaktır.

`req.method` üzerinde doğrulama yapmaya alternatif olarak, istek yöntemini de eşleştiren `expectOne`'ın genişletilmiş biçimini kullanabilirsiniz:

```ts
const req = httpTesting.expectOne(
  {
    method: 'GET',
    url: '/api/config',
  },
  'Request to load the configuration',
);
```

HELPFUL: Beklenti API'leri, sorgu parametreleri dahil isteklerin tam URL'sine göre eşleşir.

Bekleyen istek kalmadığını doğrulayan son adım, bir `afterEach()` adımına taşınabilecek kadar yaygındır:

```ts
afterEach(() => {
  // Testlerin hiçbirinin fazladan HTTP isteği yapmadığını doğrula.
  TestBed.inject(HttpTestingController).verify();
});
```

## Aynı Anda Birden Fazla İsteği Yönetme

Testinizde yinelenen isteklere yanıt vermeniz gerekiyorsa, `expectOne()` yerine `match()` API'sini kullanın. Aynı argümanları alır ancak eşleşen isteklerin bir dizisini döndürür. Döndürüldükten sonra, bu istekler gelecekteki eşleşmelerden çıkarılır ve bunları temizlemek ve doğrulamaktan siz sorumlusunuz.

```ts
const allGetRequests = httpTesting.match({method: 'GET'});
for (const req of allGetRequests) {
  // Her isteğe yanıt vermeyi yönet.
}
```

## Gelişmiş Eşleştirme

Tüm eşleştirme fonksiyonları, özel eşleştirme mantığı için bir yüklem fonksiyonu kabul eder:

```ts
// İstek gövdesi olan bir istek ara.
const requestsWithBody = httpTesting.expectOne((req) => req.body !== null);
```

`expectNone` fonksiyonu, verilen kriterlere uyan hiçbir isteğin olmadığını doğrular.

```ts
// Değişiklik isteği yapılmadığını doğrula.
httpTesting.expectNone((req) => req.method !== 'GET');
```

## Hata Yönetimini Test Etme

Uygulamanızın HTTP istekleri başarısız olduğundaki yanıtlarını test etmelisiniz.

### Arka Uç Hataları

Arka uç hatalarını (sunucu başarısız bir durum kodu döndürdüğünde) test etmek için, arka ucunuzun bir istek başarısız olduğunda döndüreceğini taklit eden bir hata yanıtı ile istekleri temizleyin.

```ts
const req = httpTesting.expectOne('/api/config');
req.flush('Failed!', {status: 500, statusText: 'Internal Server Error'});

// Uygulamanın arka uç hatasını başarıyla yönettiğini doğrula.
```

### Ağ Hataları

İstekler ağ hataları nedeniyle de başarısız olabilir ve bunlar `ProgressEvent` hataları olarak ortaya çıkar. Bunlar `error()` yöntemi ile iletilebilir:

```ts
const req = httpTesting.expectOne('/api/config');
req.error(new ProgressEvent('network error!'));

// Uygulamanın ağ hatasını başarıyla yönettiğini doğrula.
```

## Bir Interceptor'ı Test Etme

Yakalayıcılarınızın istenen koşullarda çalıştığını test etmelisiniz.

Örneğin, bir uygulamanın her giden isteğe bir servis tarafından üretilen kimlik doğrulama belirteci eklemesi gerekebilir.
Bu davranış bir yakalayıcı kullanılarak uygulanabilir:

```ts
export function authInterceptor(
  request: HttpRequest<unknown>,
  next: HttpHandlerFn,
): Observable<HttpEvent<unknown>> {
  const authService = inject(AuthService);

const clonedRequest = request.clone({
    headers: request.headers.append('X-Authentication-Token', authService.getAuthToken()),
  });
  return next(clonedRequest);
}
```

Bu yakalayıcı için `TestBed` yapılandırması `withInterceptors` özelliğine dayanmalıdır.

```ts
TestBed.configureTestingModule({
  providers: [
    AuthService,
    // Aynı anda tek bir interceptor'ı test etmek önerilir.
    provideHttpClient(withInterceptors([authInterceptor])),
    provideHttpClientTesting(),
  ],
});
```

`HttpTestingController`, isteğin değiştirildiğinden emin olmak için incelenebilecek istek örneğini alabilir.

```ts
const service = TestBed.inject(AuthService);
const req = httpTesting.expectOne('/api/config');

expect(req.request.headers.get('X-Authentication-Token')).toEqual(service.getAuthToken());
```

Benzer bir yakalayıcı sınıf tabanlı yakalayıcılarla da uygulanabilir:

```ts
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  private authService = inject(AuthService);

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const clonedRequest = request.clone({
      headers: request.headers.append('X-Authentication-Token', this.authService.getAuthToken()),
    });
    return next.handle(clonedRequest);
  }
}
```

Bunu test etmek için `TestBed` yapılandırması bunun yerine şöyle olmalıdır:

```ts
TestBed.configureTestingModule({
  providers: [
    AuthService,
    provideHttpClient(withInterceptorsFromDi()),
    provideHttpClientTesting(),
    // AuthInterceptor'ı bir HttpInterceptor olarak kaydetmek için HTTP_INTERCEPTORS token'ına güveniyoruz
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
  ],
});
```
# Reactive Form'lar

Reaktif formlar, değerleri zamanla değişen form girdilerini yönetmek için model odaklı bir yaklaşım sunar.
Bu kılavuz, temel bir form kontrolünü nasıl oluşturacağınızı ve güncelleyeceğinizi, bir grupta birden fazla kontrolü nasıl kullanacağınızı, form değerlerini nasıl doğrulayacağınızı ve çalışma zamanında kontroller ekleyip kaldırabileceğiniz dinamik formlar oluşturmayı gösterir.

## Reactive form'lara genel bakış

Reaktif formlar, belirli bir zamanda formun durumunu yönetmek için açık ve değişmez bir yaklaşım kullanır.
Form durumundaki her değişiklik yeni bir durum döndürür ve değişiklikler arasında modelin bütünlüğünü korur.
Reaktif formlar, observable akışlar etrafında inşa edilmiştir; burada form girdileri ve değerleri, senkron olarak erişilebilen akışlar olarak sağlanır.

Reaktif formlar ayrıca test etmek için basit bir yol sağlar çünkü verilerinizin istendiğinde tutarlı ve öngörülebilir olduğundan emin olursunuz.
Akışların tüm tüketicileri bu verilere güvenli bir şekilde erişebilir ve işleyebilir.

Reaktif formlar, [şablon odaklı formlardan](guide/forms/template-driven-forms) belirgin şekillerde farklıdır.
Reaktif formlar, veri modeline senkron erişim, observable operatörleriyle değişmezlik ve observable akışlar aracılığıyla değişiklik takibi sağlar.

Şablon odaklı formlar, şablonunuzdaki verilere doğrudan erişim ve değiştirme izni verir, ancak reaktif formlardan daha az açıktır çünkü şablona gömülü direktiflere dayanırlar ve değişiklikleri asenkron olarak takip etmek için değiştirilebilir veriler kullanırlar.
İki paradigma arasındaki ayrıntılı karşılaştırmalar için [Formlara Genel Bakış](guide/forms) bölümüne bakın.

## Temel bir form kontrolü ekleme

Form kontrollerini kullanmanın üç adımı vardır.

1. Yeni bir bileşen oluşturun ve reaktif formlar modülünü kaydedin. Bu modül, reaktif formları kullanmak için gereken reaktif form direktiflerini bildirir.
1. Yeni bir `FormControl` örneği oluşturun.
1. `FormControl`'ü şablonda kaydedin.

Daha sonra bileşeni şablona ekleyerek formu görüntüleyebilirsiniz.

Aşağıdaki örnekler, tek bir form kontrolünün nasıl ekleneceğini gösterir.
Örnekte, kullanıcı bir girdi alanına adını girer, bu girdi değeri yakalanır ve form kontrol öğesinin geçerli değeri görüntülenir.

<docs-workflow>

<docs-step title="Yeni bir bileşen oluşturun ve ReactiveFormsModule'ü içe aktarın">
`@angular/forms` paketinden `ReactiveFormsModule`'ü içe aktarıp Component'inizin `imports` dizisine eklemek için CLI komutu `ng generate component` kullanarak projenizde bir bileşen oluşturun.

<docs-code header="name-editor.component.ts (excerpt)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" region="imports" />
</docs-step>

<docs-step title="Bir FormControl örneği bildirin">
Başlangıç değerini ayarlamak için `FormControl` yapıcısını kullanın; bu örnekte boş bir dizedir. Bu kontrolleri bileşen sınıfınızda oluşturarak, form girdisinin durumunu dinlemek, güncellemek ve doğrulamak için anında erişim elde edersiniz.

<docs-code header="name-editor.component.ts" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" region="create-control"/>
</docs-step>

<docs-step title="Kontrolü şablonda kaydedin">
Kontrolü bileşen sınıfında oluşturduktan sonra, onu şablondaki bir form kontrol öğesiyle ilişkilendirmeniz gerekir. `ReactiveFormsModule`'de de bulunan `FormControlDirective` tarafından sağlanan `formControl` bağlamasını kullanarak şablonu form kontrolüyle güncelleyin.

<docs-code header="name-editor.component.html" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" region="control-binding" />

Şablon bağlama sözdizimini kullanarak, form kontrolü artık şablondaki `name` girdi öğesine kaydedilmiştir. Form kontrolü ve DOM öğesi birbirleriyle iletişim kurar: görünüm modeldeki değişiklikleri yansıtır ve model görünümdeki değişiklikleri yansıtır.
</docs-step>

<docs-step title="Bileşeni görüntüleyin">
`name` özelliğine atanan `FormControl`, `<app-name-editor>` bileşeni bir şablona eklendiğinde görüntülenir.

<docs-code header="app.component.html (name editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" region="app-name-editor"/>
</docs-step>
</docs-workflow>

### Form kontrol değerini görüntüleme

Değeri aşağıdaki yollarla görüntüleyebilirsiniz:

- `valueChanges` observable'ı aracılığıyla; şablonda `AsyncPipe` kullanarak veya bileşen sınıfında `subscribe()` yöntemiyle formun değerindeki değişiklikleri dinleyebilirsiniz
- Geçerli değerin anlık görüntüsünü veren `value` özelliğiyle

Aşağıdaki örnek, şablonda interpolasyon kullanarak geçerli değerin nasıl görüntüleneceğini gösterir.

<docs-code header="name-editor.component.html (control value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" region="display-value"/>

Görüntülenen değer, form kontrol öğesini güncellediğinizde değişir.

Reaktif formlar, her örnekle sağlanan özellikler ve yöntemler aracılığıyla belirli bir kontrol hakkında bilgiye erişim sağlar.
Altta yatan [AbstractControl](api/forms/AbstractControl 'API reference') sınıfının bu özellikleri ve yöntemleri, form durumunu kontrol etmek ve [girdi doğrulamasını](#form-girdisini-doğrulama 'Learn more about validating form input') yönetirken mesajların ne zaman görüntüleneceğini belirlemek için kullanılır.

Diğer `FormControl` özellikleri ve yöntemleri hakkında [API Referansı](api/forms/FormControl 'Detailed syntax reference') bölümünden bilgi alabilirsiniz.

### Form kontrol değerini değiştirme

Reaktif formlar, bir kontrolün değerini programatik olarak değiştirmek için yöntemlere sahiptir ve bu size kullanıcı etkileşimi olmadan değeri güncelleme esnekliği sağlar.
Bir form kontrol örneği, form kontrolünün değerini güncelleyen ve sağlanan değerin yapısını kontrolün yapısına göre doğrulayan bir `setValue()` yöntemi sağlar.
Örneğin, bir arka uç API'sinden veya hizmetinden form verilerini alırken, kontrolü yeni değerine güncellemek ve eski değeri tamamen değiştirmek için `setValue()` yöntemini kullanın.

Aşağıdaki örnek, `setValue()` yöntemini kullanarak kontrolün değerini _Nancy_ olarak güncellemek için bileşen sınıfına bir yöntem ekler.

<docs-code header="name-editor.component.ts (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" region="update-value"/>

Bir ad güncellemesini simüle etmek için şablonu bir düğmeyle güncelleyin.
**Update Name** düğmesine tıkladığınızda, form kontrol öğesine girilen değer geçerli değeri olarak yansıtılır.

<docs-code header="name-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" region="update-value"/>

Form modeli kontrol için doğruluk kaynağıdır, bu nedenle düğmeye tıkladığınızda girdinin değeri bileşen sınıfı içinde değiştirilir ve geçerli değerini geçersiz kılar.

HELPFUL: Bu örnekte tek bir kontrol kullanıyorsunuz.
`setValue()` yöntemini bir [form grubu](#form-kontrollerini-gruplama) veya [form dizisi](#dinamik-formlar-oluşturma) örneğiyle kullanırken, değerin grubun veya dizinin yapısıyla eşleşmesi gerekir.

## Form kontrollerini gruplama

Formlar genellikle birbiriyle ilişkili birkaç kontrol içerir.
Reaktif formlar, birden fazla ilişkili kontrolü tek bir girdi formunda gruplamak için iki yol sunar.

| Form grupları | Ayrıntılar                                                                                                                                                                                                                                                                                 |
| :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Form grubu    | Birlikte yönetebileceğiniz sabit bir kontrol kümesi ile bir form tanımlar. Form grubu temelleri bu bölümde tartışılmaktadır. Daha karmaşık formlar oluşturmak için [form gruplarını iç içe yerleştirebilirsiniz](#iç-içe-form-grupları-oluşturma 'See more about nesting groups').         |
| Form dizisi   | Çalışma zamanında kontroller ekleyip kaldırabileceğiniz dinamik bir form tanımlar. Daha karmaşık formlar oluşturmak için form dizilerini de iç içe yerleştirebilirsiniz. Bu seçenek hakkında daha fazla bilgi için [Dinamik formlar oluşturma](#dinamik-formlar-oluşturma) bölümüne bakın. |

Bir form kontrol örneğinin tek bir girdi alanı üzerinde kontrol sağlaması gibi, bir form grubu örneği de bir form kontrol örnekleri grubunun form durumunu takip eder $örneğin, bir form$.
Form grubu oluşturulurken, form grubundaki her kontrol ada göre takip edilir.
Aşağıdaki örnek, birden fazla form kontrol örneğinin tek bir grupta nasıl yönetileceğini gösterir.

Bir `ProfileEditor` bileşeni oluşturun ve `@angular/forms` paketinden `FormGroup` ve `FormControl` sınıflarını içe aktarın.

```shell
ng generate component ProfileEditor
```

<docs-code header="profile-editor.component.ts (imports)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="imports"/>

Bu bileşene bir form grubu eklemek için aşağıdaki adımları izleyin.

1. Bir `FormGroup` örneği oluşturun.
1. `FormGroup` modelini ve görünümü ilişkilendirin.
1. Form verilerini kaydedin.

<docs-workflow>

<docs-step title="Bir FormGroup örneği oluşturun">
Bileşen sınıfında `profileForm` adlı bir özellik oluşturun ve özelliğin değerini yeni bir form grubu örneği olarak ayarlayın. Form grubunu başlatmak için yapıcıya, adlandırılmış anahtarları kontrollerine eşleyen bir nesne sağlayın.

Profil formu için, `firstName` ve `lastName` adlarıyla iki form kontrol örneği ekleyin

<docs-code header="profile-editor.component.ts (form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="formgroup"/>

Bireysel form kontrolleri artık bir grup içinde toplanmıştır. Bir `FormGroup` örneği, model değerini gruptaki her kontrolün değerlerinden oluşan bir nesne olarak sağlar. Bir form grubu örneği, bir form kontrol örneğiyle aynı özelliklere (örneğin `value` ve `untouched`) ve yöntemlere (örneğin `setValue()`) sahiptir.
</docs-step>

<docs-step title="FormGroup modelini ve görünümünü ilişkilendirin">
Bir form grubu, kontrollerinin her biri için durum ve değişiklikleri takip eder, bu nedenle kontrollerden biri değişirse, üst kontrol de yeni bir durum veya değer değişikliği yayar. Grubun modeli, üyelerinden sürdürülür. Modeli tanımladıktan sonra, görünümdeki modeli yansıtmak için şablonu güncellemeniz gerekir.

<docs-code header="profile-editor.component.html (template form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" region="formgroup"/>

Bir form grubunun bir kontrol grubunu içermesi gibi, _profileForm_ `FormGroup`'u, `FormGroup` direktifiyle `form` öğesine bağlanır ve model ile girdileri içeren form arasında bir iletişim katmanı oluşturur. `FormControlName` direktifi tarafından sağlanan `formControlName` girdisi, her bireysel girdiyi `FormGroup`'ta tanımlanan form kontrolüne bağlar. Form kontrolleri ilgili öğeleriyle iletişim kurar. Ayrıca değişiklikleri, model değeri için doğruluk kaynağını sağlayan form grubu örneğine de iletirler.
</docs-step>

<docs-step title="Form verilerini kaydedin">
`ProfileEditor` bileşeni kullanıcıdan girdi kabul eder, ancak gerçek bir senaryoda form değerini yakalamak ve bileşen dışında daha fazla işlem için kullanılabilir hale getirmek istersiniz. `FormGroup` direktifi, `form` öğesi tarafından yayılan `submit` olayını dinler ve bir geri çağırma fonksiyonuna bağlayabileceğiniz bir `ngSubmit` olayı yayar. `onSubmit()` geri çağırma yöntemiyle `form` etiketine bir `ngSubmit` olay dinleyicisi ekleyin.

<docs-code header="profile-editor.component.html (submit event)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" region="ng-submit"/>

`ProfileEditor` bileşenindeki `onSubmit()` yöntemi, `profileForm`'un geçerli değerini yakalar. Formu kapsüllenmiş tutmak ve form değerini bileşen dışında sağlamak için `output()` kullanın. Aşağıdaki örnek, tarayıcı konsoluna bir mesaj kaydetmek için `console.warn` kullanır.

<docs-code header="profile-editor.component.ts (submit method)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="on-submit"/>

`submit` olayı, yerleşik DOM olayı kullanılarak `form` etiketi tarafından yayılır. `submit` türünde bir düğmeye tıklayarak olayı tetiklersiniz. Bu, kullanıcının tamamlanmış formu göndermek için **Enter** tuşuna basmasına olanak tanır.

Form gönderimini tetiklemek için formun altına bir düğme eklemek üzere bir `button` öğesi kullanın.

<docs-code header="profile-editor.component.html (submit button)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" region="submit-button"/>

Önceki kod parçacığındaki düğme, `profileForm` geçersiz olduğunda düğmeyi devre dışı bırakmak için kendisine bağlı bir `disabled` bağlamasına da sahiptir. Henüz herhangi bir doğrulama yapmıyorsunuz, bu nedenle düğme her zaman etkindir. Temel form doğrulama, [Form girdisini doğrulama](#form-girdisini-doğrulama) bölümünde ele alınmaktadır.
</docs-step>

<docs-step title="Bileşeni görüntüleyin">
Formu içeren `ProfileEditor` bileşenini görüntülemek için, onu bir bileşen şablonuna ekleyin.

<docs-code header="app.component.html (profile editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" region="app-profile-editor"/>

`ProfileEditor`, form grubu örneği içindeki `firstName` ve `lastName` kontrolleri için form kontrol örneklerini yönetmenize olanak tanır.

### İç içe form grupları oluşturma

Form grupları, alt öğe olarak hem bireysel form kontrol örneklerini hem de diğer form grubu örneklerini kabul edebilir.
Bu, karmaşık form modellerinin oluşturulmasını kolaylaştırır ve mantıksal olarak birlikte gruplandırır.

Karmaşık formlar oluştururken, bilgilerin farklı alanlarını daha küçük bölümlerde yönetmek daha kolaydır.
İç içe yerleştirilmiş bir form grubu örneği kullanmak, büyük form gruplarını daha küçük, daha yönetilebilir gruplara bölmenize olanak tanır.

Daha karmaşık formlar oluşturmak için aşağıdaki adımları kullanın.

1. İç içe bir grup oluşturun.
1. İç içe formu şablonda gruplayın.

Bazı bilgi türleri doğal olarak aynı gruba düşer.
Bir ad ve adres, bu tür iç içe grupların tipik örnekleridir ve aşağıdaki örneklerde kullanılmaktadır.

<docs-workflow>
<docs-step title="İç içe bir grup oluşturun">
`profileForm`'da iç içe bir grup oluşturmak için, form grubu örneğine iç içe bir `address` öğesi ekleyin.

<docs-code header="profile-editor.component.ts (nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="nested-formgroup"/>

Bu örnekte, `address group` mevcut `firstName` ve `lastName` kontrollerini yeni `street`, `city`, `state` ve `zip` kontrolleriyle birleştirir. Form grubundaki `address` öğesi, form grubundaki genel `profileForm` öğesinin bir alt öğesi olmasına rağmen, değer ve durum değişiklikleri için aynı kurallar geçerlidir. İç içe form grubundaki durum ve değer değişiklikleri, üst form grubuna yayılır ve genel modelle tutarlılığı korur.
</docs-step>

<docs-step title="İç içe formu şablonda gruplandırın">
Bileşen sınıfındaki modeli güncelledikten sonra, form grubu örneğini ve girdi öğelerini bağlamak için şablonu güncelleyin. `street`, `city`, `state` ve `zip` alanlarını içeren `address` form grubunu `ProfileEditor` şablonuna ekleyin.

<docs-code header="profile-editor.component.html (template nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" region="formgroupname"/>

`ProfileEditor` formu tek bir grup olarak görüntülenir, ancak model mantıksal gruplama alanlarını temsil etmek üzere daha ayrıntılı olarak bölünmüştür.

Form grubu örneğinin değerini bileşen şablonunda `value` özelliği ve `JsonPipe` kullanarak görüntüleyin.
</docs-step>
</docs-workflow>

### Veri modelinin bölümlerini güncelleme

Birden fazla kontrol içeren bir form grubu örneğinin değerini güncellerken, modelin yalnızca belirli bölümlerini güncellemek isteyebilirsiniz.
Bu bölüm, form kontrol veri modelinin belirli bölümlerinin nasıl güncelleneceğini kapsar.

Model değerini güncellemenin iki yolu vardır:

| Yöntemler      | Ayrıntılar                                                                                                                                             |
| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setValue()`   | Bireysel bir kontrol için yeni bir değer ayarlayın. `setValue()` yöntemi, form grubunun yapısına kesinlikle uyar ve kontrolün tüm değerini değiştirir. |
| `patchValue()` | Form modelinde değişen nesne içinde tanımlanan özellikleri değiştirin.                                                                                 |

`setValue()` yönteminin katı kontrolleri, karmaşık formlardaki iç içe yerleştirme hatalarını yakalamaya yardımcı olurken, `patchValue()` bu hatalarda sessizce başarısız olur.

`ProfileEditorComponent`'te, kullanıcı için ad ve sokak adresini güncellemek üzere `updateProfile` yöntemini aşağıdaki örnekle kullanın.

<docs-code header="profile-editor.component.ts (patch value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" region="patch-value"/>

Kullanıcı profilini talep üzerine güncellemek için şablona bir düğme ekleyerek bir güncellemeyi simüle edin.

<docs-code header="profile-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" region="patch-value"/>

Kullanıcı düğmeye tıkladığında, `profileForm` modeli `firstName` ve `street` için yeni değerlerle güncellenir. `street`'in `address` özelliği içinde bir nesne olarak sağlandığına dikkat edin.
Bu gereklidir çünkü `patchValue()` yöntemi güncellemeyi model yapısına göre uygular.
`patchValue()` yalnızca form modelinin tanımladığı özellikleri günceller.

## Kontrol oluşturmak için FormBuilder hizmetini kullanma

Birden fazla formla uğraşırken form kontrol örneklerini manuel olarak oluşturmak tekrarlayıcı hale gelebilir.
`FormBuilder` hizmeti, kontroller oluşturmak için kullanışlı yöntemler sağlar.

Bu hizmetten yararlanmak için aşağıdaki adımları kullanın.

1. `FormBuilder` sınıfını içe aktarın.
1. `FormBuilder` hizmetini enjekte edin.
1. Form içeriklerini oluşturun.

Aşağıdaki örnekler, form kontrol ve form grubu örnekleri oluşturmak için form oluşturucu hizmetini kullanmak üzere `ProfileEditor` bileşenini nasıl yeniden düzenleyeceğinizi gösterir.

<docs-workflow>
<docs-step title="FormBuilder sınıfını içe aktarın">
`@angular/forms` paketinden `FormBuilder` sınıfını içe aktarın.

<docs-code header="profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="form-builder-imports"/>

</docs-step>

<docs-step title="FormBuilder servisini enjekte edin">
`FormBuilder` hizmeti, reaktif formlar modülünden enjekte edilebilen bir sağlayıcıdır. Bu bağımlılığı bileşeninize enjekte etmek için `inject()` fonksiyonunu kullanın.

<docs-code header="profile-editor.component.ts (property init)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="inject-form-builder"/>

</docs-step>
<docs-step title="Form kontrollerini oluşturun">
`FormBuilder` hizmetinin üç yöntemi vardır: `control()`, `group()` ve `array()`. Bunlar, bileşen sınıflarınızda form kontrolleri, form grupları ve form dizileri dahil olmak üzere örnekler oluşturmak için fabrika yöntemleridir. `profileForm` kontrollerini oluşturmak için `group` yöntemini kullanın.

<docs-code header="profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="form-builder"/>

Önceki örnekte, modeldeki özellikleri tanımlamak için aynı nesneyle `group()` yöntemini kullanırsınız. Her kontrol adının değeri, dizideki ilk öğe olarak başlangıç değerini içeren bir dizidir.

TIP: Kontrolü yalnızca başlangıç değeriyle tanımlayabilirsiniz, ancak kontrolleriniz senkron veya asenkron doğrulamaya ihtiyaç duyuyorsa, dizide ikinci ve üçüncü öğe olarak senkron ve asenkron doğrulayıcıları ekleyin. Örnekleri manuel olarak oluşturma ile form oluşturucuyu kullanmayı karşılaştırın.
</docs-step>

</docs-workflow>

## Form girdisini doğrulama

_Form doğrulama_, kullanıcı girdisinin eksiksiz ve doğru olmasını sağlamak için kullanılır.
Bu bölüm, bir form kontrolüne tek bir doğrulayıcı eklemeyi ve genel form durumunu görüntülemeyi kapsar.
Form doğrulama, [Form Doğrulama](guide/forms/form-validation) kılavuzunda daha kapsamlı olarak ele alınmaktadır.

Form doğrulama eklemek için aşağıdaki adımları kullanın.

1. Form bileşeninize bir doğrulayıcı fonksiyonu içe aktarın.
1. Doğrulayıcıyı formdaki alana ekleyin.
1. Doğrulama durumunu yönetmek için mantık ekleyin.

En yaygın doğrulama, bir alanı zorunlu yapmaktır.
Aşağıdaki örnek, `firstName` kontrolüne zorunlu doğrulama eklemeyi ve doğrulama sonucunu görüntülemeyi gösterir.

<docs-workflow>
<docs-step title="Bir doğrulayıcı fonksiyonu içe aktarın">
Reaktif formlar, yaygın kullanım durumları için bir dizi doğrulayıcı fonksiyon içerir. Bu fonksiyonlar, doğrulanacak bir kontrol alır ve doğrulama kontrolüne göre bir hata nesnesi veya null değer döndürür.

`@angular/forms` paketinden `Validators` sınıfını içe aktarın.

<docs-code header="profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="validator-imports"/>
</docs-step>

<docs-step title="Bir alanı zorunlu yapın">
`ProfileEditor` bileşeninde, `firstName` kontrolü için dizideki ikinci öğe olarak `Validators.required` statik yöntemini ekleyin.

<docs-code header="profile-editor.component.ts (required validator)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="required-validator"/>
</docs-step>

<docs-step title="Form durumunu görüntüleyin">
Form kontrolüne zorunlu bir alan eklediğinizde, başlangıç durumu geçersiz olur. Bu geçersiz durum üst form grubu öğesine yayılır ve durumunu geçersiz yapar. Form grubu örneğinin geçerli durumuna `status` özelliği aracılığıyla erişin.

`profileForm`'un geçerli durumunu interpolasyon kullanarak görüntüleyin.

<docs-code header="profile-editor.component.html (display status)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" region="display-status"/>

Zorunlu `firstName` form kontrolü nedeniyle `profileForm` geçersiz olduğu için **Submit** düğmesi devre dışıdır. `firstName` girdisini doldurduktan sonra form geçerli hale gelir ve **Submit** düğmesi etkinleşir.

Form doğrulama hakkında daha fazla bilgi için [Form Doğrulama](guide/forms/form-validation) kılavuzunu ziyaret edin.
</docs-step>
</docs-workflow>

## Dinamik form'lar oluşturma

`FormArray`, herhangi bir sayıda adlandırılmamış kontrolü yönetmek için `FormGroup`'a bir alternatiftir.
Form grubu örneklerinde olduğu gibi, form dizisi örneklerinden kontrolleri dinamik olarak ekleyip kaldırabilirsiniz ve form dizisi örneğinin değeri ile doğrulama durumu, alt kontrollerinden hesaplanır.
Ancak, her kontrol için ada göre bir anahtar tanımlamanız gerekmez, bu nedenle önceden alt değerlerin sayısını bilmediğinizde bu harika bir seçenektir.

Dinamik bir form tanımlamak için aşağıdaki adımları izleyin.

1. `FormArray` sınıfını içe aktarın.
1. Bir `FormArray` kontrolü tanımlayın.
1. `FormArray` kontrolüne bir getter yöntemiyle erişin.
1. Form dizisini bir şablonda görüntüleyin.

Aşağıdaki örnek, `ProfileEditor`'da bir _takma adlar_ dizisini nasıl yöneteceğinizi gösterir.

<docs-workflow>
<docs-step title="`FormArray` sınıfını içe aktarın">
Tür bilgisi için kullanmak üzere `@angular/forms`'dan `FormArray` sınıfını içe aktarın. `FormBuilder` hizmeti bir `FormArray` örneği oluşturmaya hazırdır.

<docs-code header="profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" region="form-array-imports"/>
</docs-step>

<docs-step title="Bir `FormArray` kontrolü tanımlayın">
Bir form dizisini sıfırdan çoğa kadar herhangi bir sayıda kontrol ile başlatabilirsiniz, bunları bir dizide tanımlayarak. Form dizisini tanımlamak için `profileForm` form grubu örneğine bir `aliases` özelliği ekleyin.

Diziyi tanımlamak için `FormBuilder.array()` yöntemini ve diziyi bir başlangıç kontrolüyle doldurmak için `FormBuilder.control()` yöntemini kullanın.

<docs-code header="profile-editor.component.ts (aliases form array)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="aliases"/>

Form grubu örneğindeki aliases kontrolü artık tek bir kontrolle doldurulmuştur ve dinamik olarak daha fazla kontrol eklenene kadar böyle kalır.
</docs-step>

<docs-step title="`FormArray` kontrolüne erişin">
Bir getter, form dizisi örneğindeki takma adlara, her örneği almak için `profileForm.get()` yöntemini tekrarlamaya kıyasla erişim sağlar. Form dizisi örneği, bir dizideki tanımlanmamış sayıda kontrolü temsil eder. Bir kontrole getter aracılığıyla erişmek uygundur ve ek kontroller için tekrarlanması kolaydır. <br />

Üst form grubundan alias form dizisi kontrolünü almak üzere bir `aliases` sınıf özelliği oluşturmak için getter sözdizimini kullanın.

<docs-code header="profile-editor.component.ts (aliases getter)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="aliases-getter"/>

Döndürülen kontrol `AbstractControl` türünde olduğundan, form dizisi örneği için yöntem sözdizimine erişmek üzere açık bir tür sağlamanız gerekir. Alias form dizisine dinamik olarak bir alias kontrolü eklemek için bir yöntem tanımlayın. `FormArray.push()` yöntemi kontrolü diziye yeni bir öğe olarak ekler ve ayrıca birden fazla kontrolü aynı anda kaydetmek için FormArray.push() yöntemine bir kontrol dizisi de iletebilirsiniz.

<docs-code header="profile-editor.component.ts (add alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" region="add-alias"/>

Şablonda, her kontrol ayrı bir girdi alanı olarak görüntülenir.

</docs-step>

<docs-step title="Form dizisini şablonda görüntüleyin">

Form modelinizdeki takma adları eklemek için bunları şablona eklemeniz gerekir. `FormGroupNameDirective` tarafından sağlanan `formGroupName` girdisine benzer şekilde, `formArrayName` form dizisi örneğinden şablona `FormArrayNameDirective` ile iletişimi bağlar.

`formGroupName` öğesini kapatan `<div>`'den sonra aşağıdaki şablon HTML'sini ekleyin.

<docs-code header="profile-editor.component.html (aliases form array template)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" region="formarrayname"/>

`@for` bloğu, aliases form dizisi örneği tarafından sağlanan her form kontrol örneği üzerinde yineleme yapar. Form dizisi öğeleri adlandırılmamış olduğundan, dizini `i` değişkenine atarsınız ve `formControlName` girdisine bağlamak için her kontrole iletirsiniz.

Her yeni alias örneği eklendiğinde, yeni form dizisi örneğine dizine göre kontrolü sağlanır. Bu, kök kontrolün durumunu ve değerini hesaplarken her bireysel kontrolü takip etmenize olanak tanır.

NOTE: Zoneless uygulamalarda, bir reaktif form modelini değiştirmek (örneğin `FormArray.push()` çağırmak) bileşen değişiklik algılamasını otomatik olarak zamanlamaz. Şablonunuz `aliases.controls` gibi yapısal model değişikliklerine bağlıysa, bileşenin Angular'a değişiklik algılamasını çalıştırmasını bildirdiğinden emin olun; örneğin bir form observable'ını `ChangeDetectorRef.markForCheck()` ile köprüleyerek:

```ts
import {ChangeDetectorRef, Component, inject} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';

@Component({
  /* ... */
})
export class ProfileEditor {
  private readonly cdr = inject(ChangeDetectorRef);

constructor() {
    this.profileForm.valueChanges
      .pipe(takeUntilDestroyed())
      .subscribe(() => this.cdr.markForCheck());
  }
}
```

</docs-step>

### Üst düzey form dizileri için `FormArrayDirective` kullanma

Bir `FormArray`'i `FormArrayDirective` kullanarak doğrudan bir `<form>` öğesine bağlayabilirsiniz.
Bu, form üst düzey bir `FormGroup` kullanmadığında ve dizinin kendisi tam form modelini temsil ettiğinde kullanışlıdır.

```typescript
import {Component} from '@angular/core';
import {FormArray, FormControl} from '@angular/forms';

@Component({
  selector: 'form-array-example',
  template: `
    <form [formArray]="form">
      @for (control of form.controls; track $index) {
        <input [formControlName]="$index" />
      }
    </form>
  `,
})
export class FormArrayExampleComponent {
  controls = [new FormControl('fish'), new FormControl('cat'), new FormControl('dog')];

form = new FormArray(this.controls);
}
```

<docs-step title="Bir takma ad ekleyin">

Başlangıçta form bir `Alias` alanı içerir. Başka bir alan eklemek için **Add Alias** düğmesine tıklayın. Ayrıca şablonun altındaki `Form Value` tarafından bildirilen takma adlar dizisini de doğrulayabilirsiniz. Her takma ad için bir form kontrol örneği yerine, ek alanlarla başka bir form grubu örneği oluşturabilirsiniz. Her öğe için bir kontrol tanımlama süreci aynıdır.
</docs-step>

</docs-workflow>

## Birleşik kontrol durumu değişiklik olayları

Tüm form kontrolleri, `AbstractControl` (`FormControl`, `FormGroup`, `FormArray` ve `FormRecord`) üzerindeki `events` observable'ı aracılığıyla tek bir birleşik **kontrol durum değişikliği olayları** akışı sunar.
Bu birleşik akış, **değer**, **durum**, **pristine**, **touched** ve **reset** durum değişikliklerine ve ayrıca **submit** gibi **form düzeyinde eylemlere** tepki vermenize olanak tanır; böylece birden fazla observable bağlamak yerine tek bir abonelikle tüm güncellemeleri yönetebilirsiniz.

### Olay türleri

`events` tarafından yayılan her öğe, belirli bir olay sınıfının bir örneğidir:

- **`ValueChangeEvent`** -- kontrolün **değeri** değiştiğinde.
- **`StatusChangeEvent`** -- kontrolün **doğrulama durumu** `FormControlStatus` değerlerinden birine (`VALID`, `INVALID`, `PENDING` veya `DISABLED`) güncellendiğinde.
- **`PristineChangeEvent`** -- kontrolün **pristine/dirty** durumu değiştiğinde.
- **`TouchedChangeEvent`** -- kontrolün **touched/untouched** durumu değiştiğinde.
- **`FormResetEvent`** -- bir kontrol veya form, `reset()` API'si veya yerel bir eylem aracılığıyla sıfırlandığında.
- **`FormSubmittedEvent`** -- form gönderildiğinde.

Tüm olay sınıfları `ControlEvent`'i genişletir ve değişikliği başlatan `AbstractControl`'e bir `source` referansı içerir; bu büyük formlarda kullanışlıdır.

```ts
import {Component} from '@angular/core';
import {
  FormControl,
  ValueChangeEvent,
  StatusChangeEvent,
  PristineChangeEvent,
  TouchedChangeEvent,
  FormResetEvent,
  FormSubmittedEvent,
  ReactiveFormsModule,
  FormGroup,
} from '@angular/forms';

@Component({
  /*...*/
})
export class UnifiedEventsBasicComponent {
  form = new FormGroup({
    username: new FormControl(''),
  });

constructor() {
    this.form.events.subscribe((e) => {
      if (e instanceof ValueChangeEvent) {
        console.log('Value changed to: ', e.value);
      }

if (e instanceof StatusChangeEvent) {
        console.log('Status changed to: ', e.status);
      }

if (e instanceof PristineChangeEvent) {
        console.log('Pristine status changed to: ', e.pristine);
      }

if (e instanceof TouchedChangeEvent) {
        console.log('Touched status changed to: ', e.touched);
      }

if (e instanceof FormResetEvent) {
        console.log('Form was reset');
      }

if (e instanceof FormSubmittedEvent) {
        console.log('Form was submitted');
      }
    });
  }
}
```

### Belirli olayları filtreleme

Yalnızca bir olay türü alt kümesine ihtiyacınız olduğunda RxJS operatörlerini tercih edin.

```ts
import {filter} from 'rxjs/operators';
import {StatusChangeEvent} from '@angular/forms';

control.events
  .pipe(filter((e) => e instanceof StatusChangeEvent))
  .subscribe((e) => console.log('Status:', e.status));
```

### Birden fazla aboneliği birleştirme

**Önce**

```ts
import {combineLatest} from 'rxjs/operators';

combineLatest([control.valueChanges, control.statusChanges]).subscribe(([value, status]) => {
  /* ... */
});
```

**Sonra**

```ts
control.events.subscribe((e) => {
  // ValueChangeEvent, StatusChangeEvent vb. olayları yönet
});
```

NOTE: Değer değişikliğinde, yayılma bu kontrolün değeri güncellendikten hemen sonra gerçekleşir. Bir üst kontrolün değeri (örneğin bu FormControl bir FormGroup'un parçasıysa) daha sonra güncellenir, bu nedenle bu olayın geri çağırmasından bir üst kontrolün değerine (`value` özelliği kullanarak) erişmek, henüz güncellenmemiş bir değer almanızla sonuçlanabilir. Bunun yerine üst kontrolün `events`'ine abone olun.

## Form kontrol durumunu yönetme

Reaktif formlar, **touched/untouched** ve **pristine/dirty** ile kontrol durumunu takip eder. Angular bunları DOM etkileşimleri sırasında otomatik olarak günceller, ancak bunları programatik olarak da yönetebilirsiniz.

**[`markAsTouched`](api/forms/FormControl#markAsTouched)** -- Bir kontrolü veya formu, değeri değiştirmeyen odaklanma ve odak kaybetme olayları tarafından dokunulmuş olarak işaretler. Varsayılan olarak üst kontrollere yayılır.

```ts
// Kullanıcı alandan ayrıldıktan sonra doğrulama hatalarını göster
onEmailBlur() {
  const email = this.form.get('email');
  email.markAsTouched();
}
```

**[`markAsUntouched`](api/forms/FormControl#markAsUntouched)** -- Bir kontrolü veya formu dokunulmamış olarak işaretler. Tüm alt kontrollere basamaklanır ve tüm üst kontrollerin dokunulmuş durumunu yeniden hesaplar.

```ts
// Başarılı gönderimden sonra form durumunu sıfırla
onSubmitSuccess() {
  this.form.markAsUntouched();
  this.form.markAsPristine();
}
```

**[`markAsDirty`](api/forms/FormControl#markAsDirty)** -- Bir kontrolü veya formu değiştirilmiş olarak işaretler, yani değer değiştirilmiştir. Varsayılan olarak üst kontrollere yayılır.

```ts
// Programatik olarak değiştirilen değerleri değiştirilmiş olarak işaretle
autofillAddress() {
  const previousAddress = getAddress();
  this.form.patchValue(previousAddress, { emitEvent: false });
  this.form.markAsDirty();
}
```

**[`markAsPristine`](api/forms/FormControl#markAsPristine)** -- Bir kontrolü veya formu saf (pristine) olarak işaretler. Tüm alt kontrolleri saf olarak işaretler ve tüm üst kontrollerin saf durumunu yeniden hesaplar.

```ts
// Yeni değişiklikleri takip etmek için kaydettikten sonra pristine durumunu sıfırla
saveForm() {
  this.api.save(this.form.value).subscribe(() => {
    this.form.markAsPristine();
  });
}
```

**[`markAllAsDirty`](api/forms/FormControl#markAllAsDirty)** -- Kontrolü veya formu ve tüm alt kontrollerini değiştirilmiş olarak işaretler.

```ts
// İçe aktarılan verileri dirty olarak işaretle
loadData(data: FormData) {
  this.form.patchValue(data);
  this.form.markAllAsDirty();
}
```

**[`markAllAsTouched`](api/forms/FormControl#markAllAsTouched)** -- Kontrolü veya formu ve tüm alt kontrollerini dokunulmuş olarak işaretler. Tüm form genelinde doğrulama hatalarını göstermek için kullanışlıdır.

```ts
// Gönderimden önce tüm doğrulama hatalarını göster
onSubmit() {
  if (this.form.invalid) {
    this.form.markAllAsTouched();
    return;
  }
  this.saveForm();
}
```

## Olay yayımı ve yayılımını kontrol etme

Form kontrollerini programatik olarak güncellerken, değişikliklerin form hiyerarşisi boyunca nasıl yayılacağı ve olayların yayılıp yayılmayacağı üzerinde hassas kontrole sahipsiniz.

### Olay yayımını anlama

Varsayılan olarak `emitEvent: true`'dur; bir kontrole yapılan herhangi bir değişiklik, `valueChanges` ve `statusChanges` observable'ları aracılığıyla olayları yayar. `emitEvent: false` ayarı bu yayımları bastırır; bu, otomatik kaydetme gibi reaktif davranışları tetiklemeden değerleri programatik olarak ayarlamak, kontroller arasındaki döngüsel güncellemeleri önlemek veya olayların yalnızca sonunda bir kez yayılması gereken toplu güncellemeler yapmak için kullanışlıdır.

```ts
@Component({
  /* ... */
})
export class BlogPostEditor {
  postForm = new FormGroup({
    title: new FormControl(''),
    content: new FormControl(''),
  });

constructor() {
    // Kullanıcı her yazdığında taslağı otomatik kaydet
    this.postForm.valueChanges.subscribe((formValue) => {
      this.autosaveDraft(formValue);
    });
  }

loadExistingDraft(savedDraft: {title: string; content: string}) {
    // Otomatik kaydetmeyi tetiklemeden taslağı geri yükle
    this.postForm.setValue(savedDraft, {emitEvent: false});
  }
}
```

### Yayılım kontrolünü anlama

Varsayılan olarak `onlySelf: false`'tur; güncellemeler üst kontrollere basamaklanır ve değerleri ile doğrulama durumlarını yeniden hesaplar. `onlySelf: true` ayarı güncellemeyi geçerli kontrolle sınırlar ve üst bildirimini engeller. Bu, üst güncellemeyi bir kez manuel olarak tetiklemek istediğiniz toplu işlemler için kullanışlıdır.

```ts
updatePostalCodeValidator(country: string) {
  const postal = this.addressForm.get('postalCode');

const validators = country === 'US'
    ? [Validators.maxLength(5)]
    : [Validators.maxLength(7)];

postal.setValidators(validators);
  postal.updateValueAndValidity({ onlySelf: true, emitEvent: false });
}
```

HELPFUL: Çalışma zamanında validatorları dinamik olarak yönetmek için Form Doğrulama kılavuzundaki [Reaktif formlarda validatorları dinamik olarak yönetme](guide/forms/form-validation#reaktif-formlarda-doğrulayıcıları-dinamik-olarak-yönetme) bölümüne bakın.

## Form kontrol türlerini daraltmak için yardımcı fonksiyonlar

Angular, bir `AbstractControl`'ün somut türünü belirlemeye yardımcı olan dört yardımcı fonksiyon sağlar. Bu fonksiyonlar **tür koruyucuları** olarak hareket eder ve `true` döndürdüklerinde kontrol türünü daraltır; bu da aynı blok içinde alt tipe özgü özelliklere güvenli bir şekilde erişmenize olanak tanır.

Bu yardımcılar, fonksiyon imzası bir `AbstractControl` alan ancak mantığın belirli bir kontrol türü için tasarlandığı **özel doğrulayıcılarda** özellikle kullanışlıdır.

```ts
import {AbstractControl, isFormArray} from '@angular/forms';

export function positiveValues(control: AbstractControl) {
  if (!isFormArray(control)) {
    return null; // FormArray değil: doğrulayıcı uygulanabilir değil.
  }

// Daraltmadan sonra FormArray'e özgü API'ye güvenle erişilebilir.
  const hasNegative = control.controls.some((c) => c.value < 0);
  return hasNegative ? {positiveValues: true} : null;
}
```

## Reactive form'lar API özeti

Aşağıdaki tablo, reaktif form kontrollerini oluşturmak ve yönetmek için kullanılan temel sınıfları ve hizmetleri listeler.
Tam sözdizimi ayrıntıları için [Forms paketi](api#forms 'API reference') API referans belgelerine bakın.

### Sınıflar

| Sınıf             | Ayrıntılar                                                                                                                                                                      |
| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `AbstractControl` | `FormControl`, `FormGroup` ve `FormArray` somut form kontrol sınıfları için soyut temel sınıf. Ortak davranışlarını ve özelliklerini sağlar.                                    |
| `FormControl`     | Bireysel bir form kontrolünün değerini ve geçerlilik durumunu yönetir. `<input>` veya `<select>` gibi bir HTML form kontrolüne karşılık gelir.                                  |
| `FormGroup`       | Bir `AbstractControl` örnekleri grubunun değerini ve geçerlilik durumunu yönetir. Grubun özellikleri, alt kontrollerini içerir. Bileşeninizdeki üst düzey form `FormGroup`'tur. |
| `FormArray`       | Sayısal olarak indekslenmiş bir `AbstractControl` örnekleri dizisinin değerini ve geçerlilik durumunu yönetir.                                                                  |
| `FormBuilder`     | Kontrol örnekleri oluşturmak için fabrika yöntemleri sağlayan enjekte edilebilir bir hizmet.                                                                                    |
| `FormRecord`      | Her biri aynı değer türüne sahip bir `FormControl` örnekleri koleksiyonunun değerini ve geçerlilik durumunu takip eder.                                                         |

### Direktifler

| Direktif               | Ayrıntılar                                                                                            |
| :--------------------- | :---------------------------------------------------------------------------------------------------- |
| `FormControlDirective` | Bağımsız bir `FormControl` örneğini bir form kontrol öğesine senkronize eder.                         |
| `FormControlName`      | Mevcut bir `FormGroup` örneğindeki `FormControl`'ü ada göre bir form kontrol öğesine senkronize eder. |
| `FormGroupDirective`   | Mevcut bir `FormGroup` örneğini bir DOM öğesine senkronize eder.                                      |
| `FormGroupName`        | İç içe bir `FormGroup` örneğini bir DOM öğesine senkronize eder.                                      |
| `FormArrayName`        | İç içe bir `FormArray` örneğini bir DOM öğesine senkronize eder.                                      |
| `FormArrayDirective`   | Bağımsız bir `FormArray` örneğini bir DOM öğesine senkronize eder.                                    |
# Türlenmiş Form'lar

Angular 14'ten itibaren, reaktif formlar varsayılan olarak kesin tür denetimine sahiptir.

Bu kılavuzun arka planı olarak, [Angular Reaktif Formları](guide/forms/reactive-forms) ile zaten tanıdık olmalısınız.

## Türlenmiş Form'lara genel bakış

<docs-video src="https://www.youtube.com/embed/L-odCf4MfJc" alt="Typed Forms in Angular" />

Angular reaktif formlarıyla, bir _form modeli_ açıkça belirtirsiniz. Basit bir örnek olarak, bu temel kullanıcı giriş formunu düşünün:

```ts
const login = new FormGroup({
  email: new FormControl(''),
  password: new FormControl(''),
});
```

Angular, bu `FormGroup` ile etkileşim için birçok API sağlar. Örneğin, `login.value`, `login.controls`, `login.patchValue` vb. çağırabilirsiniz. (Tam API referansı için [API belgelerine](api/forms/FormGroup) bakın.)

Önceki Angular sürümlerinde, bu API'lerin çoğu türlerinde bir yerde `any` içeriyordu ve kontrollerin yapısıyla veya değerlerin kendisiyle etkileşim tür güvenli değildi. Örneğin: aşağıdaki geçersiz kodu yazabilirdiniz:

```ts
const emailDomain = login.value.email.domain;
```

Kesin türlenmiş reaktif formlarla, yukarıdaki kod derlenmez çünkü `email`'de `domain` özelliği yoktur.

Eklenen güvenliğe ek olarak, türler IDE'lerde daha iyi otomatik tamamlama ve form yapısını belirtmek için açık bir yol gibi çeşitli diğer iyileştirmeleri de mümkün kılar.

Bu iyileştirmeler şu anda yalnızca _reaktif_ formlara uygulanır ([_şablon odaklı_ formlara](guide/forms/template-driven-forms) değil).

## Türlenmemiş Form'lar

Türlenmemiş formlar hala desteklenmektedir ve daha önce olduğu gibi çalışmaya devam edecektir. Bunları kullanmak için `@angular/forms`'dan `Untyped` sembollerini içe aktarmanız gerekir:

```ts
const login = new UntypedFormGroup({
  email: new UntypedFormControl(''),
  password: new UntypedFormControl(''),
});
```

Her `Untyped` sembolü, önceki Angular sürümlerindekiyle tam olarak aynı anlama sahiptir. `Untyped` ön eklerini kaldırarak türleri kademeli olarak etkinleştirebilirsiniz.

## `FormControl`: Başlangıç

En basit olası form tek bir kontrolden oluşur:

```ts
const email = new FormControl('angularrox@gmail.com');
```

Bu kontrol otomatik olarak `FormControl<string|null>` türüne sahip olarak çıkarılacaktır. TypeScript, bu türü [`FormControl` API'si](api/forms/FormControl) boyunca otomatik olarak uygulayacaktır; `email.value`, `email.valueChanges` ve `email.setValue(...)` gibi.

### Null olabilirlik

Merak edebilirsiniz: Bu kontrolün türü neden `null` içeriyor? Bunun nedeni, kontrolün herhangi bir zamanda reset çağrılarak `null` olabilmesidir:

```ts
const email = new FormControl('angularrox@gmail.com');
email.reset();
console.log(email.value); // null
```

TypeScript, kontrolün `null` olma olasılığını her zaman ele almanızı zorunlu kılacaktır. Bu kontrolü null olamaz yapmak istiyorsanız, `nonNullable` seçeneğini kullanabilirsiniz. Bu, kontrolün `null` yerine başlangıç değerine sıfırlanmasını sağlar:

```ts
const email = new FormControl('angularrox@gmail.com', {nonNullable: true});
email.reset();
console.log(email.value); // angularrox@gmail.com
```

Tekrar belirtmek gerekirse, bu seçenek `.reset()` çağrıldığında formunuzun çalışma zamanı davranışını etkiler ve dikkatli bir şekilde değiştirilmelidir.

### Açık bir tür belirtme

Çıkarıma güvenmek yerine türü belirtmek mümkündür. Başlangıç değeri `null` olan bir kontrolü düşünün. Başlangıç değeri `null` olduğundan, TypeScript istediğimizden daha dar olan `FormControl<null>` çıkarımını yapacaktır.

```ts
const email = new FormControl(null);
email.setValue('angularrox@gmail.com'); // Error!
```

Bunu önlemek için türü açıkça `string|null` olarak belirtiyoruz:

```ts
const email = new FormControl<string | null>(null);
email.setValue('angularrox@gmail.com');
```

## `FormArray`: Dinamik, homojen koleksiyonlar

Bir `FormArray`, açık uçlu bir kontrol listesi içerir. Tür parametresi, her iç kontrolün türüne karşılık gelir:

```ts
const names = new FormArray([new FormControl('Alex')]);
names.push(new FormControl('Jess'));
```

Bir seferde birkaç giriş eklemeniz gerektiğinde `aliases.push()`'a bir kontrol dizisi iletin.

```ts
const aliases = new FormArray([new FormControl('ng')]);
aliases.push([new FormControl('ngDev'), new FormControl('ngAwesome')]);
```

Bu `FormArray`, `FormControl<string|null>` iç kontrol türüne sahip olacaktır.

Dizide birden fazla farklı öğe türüne sahip olmak istiyorsanız, `UntypedFormArray` kullanmalısınız çünkü TypeScript hangi öğe türünün hangi konumda olacağını çıkaramaz.

Bir `FormArray` ayrıca içerdiği tüm kontrolleri kaldırmak için bir `clear()` yöntemi sağlar:

```ts
const aliases = new FormArray([new FormControl('ngDev'), new FormControl('ngAwesome')]);
aliases.clear();
console.log(aliases.length); // 0
```

## `FormGroup` ve `FormRecord`

Angular, numaralandırılmış anahtar kümesine sahip formlar için `FormGroup` türünü ve açık uçlu veya dinamik gruplar için `FormRecord` adlı bir tür sağlar.

### Kısmi değerler

Giriş formunu tekrar düşünün:

```ts
const login = new FormGroup({
  email: new FormControl('', {nonNullable: true}),
  password: new FormControl('', {nonNullable: true}),
});
```

Herhangi bir `FormGroup`'ta, [kontrolleri devre dışı bırakmak mümkündür](api/forms/FormGroup). Devre dışı bırakılmış herhangi bir kontrol grubun değerinde görünmez.

Sonuç olarak, `login.value`'nun türü `Partial<{email: string, password: string}>`'dir. Bu türdeki `Partial`, her üyenin undefined olabileceği anlamına gelir.

Daha spesifik olarak, `login.value.email`'in türü `string|undefined`'dır ve TypeScript olası `undefined` değerini ele almanızı zorunlu kılacaktır (`strictNullChecks` etkinse).

Devre dışı bırakılmış kontrolleri _dahil eden_ değere erişmek ve böylece olası `undefined` alanlarını atlamak istiyorsanız, `login.getRawValue()` kullanabilirsiniz.

### Opsiyonel kontroller ve dinamik gruplar

Bazı formların mevcut olabilen veya olmayabilen, çalışma zamanında eklenip kaldırılabilen kontrolleri vardır. Bu kontrolleri _opsiyonel alanlar_ kullanarak temsil edebilirsiniz:

```ts
interface LoginForm {
  email: FormControl<string>;
  password?: FormControl<string>;
}

const login = new FormGroup<LoginForm>({
  email: new FormControl('', {nonNullable: true}),
  password: new FormControl('', {nonNullable: true}),
});

Bu formda türü açıkça belirtiyoruz, bu da `password` kontrolünü opsiyonel yapmamıza olanak tanır. TypeScript, yalnızca opsiyonel kontrollerin eklenebileceğini veya kaldırılabileceğini zorunlu kılacaktır.

### `FormRecord`

Bazı `FormGroup` kullanımları yukarıdaki kalıba uymaz çünkü anahtarlar önceden bilinmez. `FormRecord` sınıfı bu durum için tasarlanmıştır:

```ts
const addresses = new FormRecord<FormControl<string | null>>({});
addresses.addControl('Andrew', new FormControl('2340 Folsom St'));
```

`string|null` türünde herhangi bir kontrol bu `FormRecord`'a eklenebilir.

Hem dinamik (açık uçlu) hem de heterojen (kontroller farklı türlerde) bir `FormGroup`'a ihtiyacınız varsa, geliştirilmiş tür güvenliği mümkün değildir ve `UntypedFormGroup` kullanmalısınız.

Bir `FormRecord`, `FormBuilder` ile de oluşturulabilir:

```ts
const addresses = fb.record({'Andrew': '2340 Folsom St'});
```

## `FormBuilder` ve `NonNullableFormBuilder`

`FormBuilder` sınıfı, yukarıdaki örneklerle aynı şekilde yeni türleri desteklemek üzere yükseltilmiştir.

Ek olarak, ek bir oluşturucu mevcuttur: `NonNullableFormBuilder`. Bu tür, her kontrolde `{nonNullable: true}` belirtmenin kısayoludur ve büyük null olamaz formlardan önemli ölçüde tekrarlayan kodu ortadan kaldırabilir. Bir `FormBuilder` üzerindeki `nonNullable` özelliğini kullanarak erişebilirsiniz:

```ts
const fb = new FormBuilder();
const login = fb.nonNullable.group({
  email: '',
  password: '',
});
```

Yukarıdaki örnekte, her iki iç kontrol de null olamaz olacaktır (yani `nonNullable` ayarlanacaktır).

Ayrıca `NonNullableFormBuilder` adını kullanarak enjekte edebilirsiniz.
# Template-driven form oluşturma

Bu eğitim, şablon odaklı bir formun nasıl oluşturulacağını gösterir. Formdaki kontrol öğeleri, girdi doğrulamasına sahip veri özelliklerine bağlıdır. Girdi doğrulaması, veri bütünlüğünü korumaya ve kullanıcı deneyimini iyileştirmek için stil oluşturmaya yardımcı olur.

Şablon odaklı formlar, bileşendeki veri modelini şablonda yapılan değişiklikler doğrultusunda güncellemek ve tam tersini yapmak için [çift yönlü veri bağlama](guide/templates/two-way-binding) kullanır.
Angular, etkileşimli formlar için iki tasarım yaklaşımını destekler. Şablon odaklı formlar, Angular şablonunuzda forma özgü direktifler kullanmanıza olanak tanır. Reaktif formlar, form oluşturmak için model odaklı bir yaklaşım sağlar.

Şablon odaklı formlar küçük veya basit formlar için harika bir seçimdir, reaktif formlar ise daha ölçeklenebilir ve karmaşık formlar için uygundur. İki yaklaşımın karşılaştırması için [Bir yaklaşım seçme](guide/forms#bir-yaklaşım-seçme) bölümüne bakın
Angular şablonuyla hemen hemen her türlü formu oluşturabilirsiniz -- giriş formları, iletişim formları ve hemen hemen her iş formu.
Kontrolleri yaratıcı bir şekilde yerleştirebilir ve nesne modelinizdeki verilere bağlayabilirsiniz.
Doğrulama kuralları belirleyebilir ve doğrulama hatalarını görüntüleyebilir, belirli kontrollerden girdiyi koşullu olarak izin verebilir, yerleşik görsel geri bildirim tetikleyebilir ve çok daha fazlasını yapabilirsiniz.

## Hedefler

Bu eğitim size aşağıdakileri nasıl yapacağınızı öğretir:

- Bir bileşen ve şablonla Angular formu oluşturma
- Girdi kontrol değerlerini okumak ve yazmak için çift yönlü veri bağlamaları oluşturmak üzere `ngModel` kullanma
- Kontrollerin durumunu takip eden özel CSS sınıfları kullanarak görsel geri bildirim sağlama
- Kullanıcılara doğrulama hatalarını gösterme ve form durumuna göre form kontrollerinden girdiyi koşullu olarak izin verme
- [Şablon referans değişkenleri](guide/templates/variables#şablon-referans-değişkenleri) kullanarak HTML öğeleri arasında bilgi paylaşma

## Template-driven form oluşturun

Şablon odaklı formlar, `FormsModule`'da tanımlanan direktiflere dayanır.

| Direktifler    | Ayrıntılar                                                                                                                                                                                                                                                                                      |
| :------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `NgModel`      | Ekli form öğesindeki değer değişikliklerini veri modelindeki değişikliklerle uzlaştırır, girdi doğrulaması ve hata yönetimi ile kullanıcı girdisine yanıt vermenize olanak tanır.                                                                                                               |
| `NgForm`       | Üst düzey bir `FormGroup` örneği oluşturur ve bunu toplu form değerini ve doğrulama durumunu takip etmek için bir `<form>` öğesine bağlar. `FormsModule`'ü içe aktardığınız anda, bu direktif varsayılan olarak tüm `<form>` etiketlerinde etkinleşir. Özel bir seçici eklemenize gerek yoktur. |
| `NgModelGroup` | Bir `FormGroup` örneği oluşturur ve bir DOM öğesine bağlar.                                                                                                                                                                                                                                     |

### Adımlara genel bakış

Bu eğitim boyunca, aşağıdaki adımları kullanarak örnek bir formu verilere bağlar ve kullanıcı girdisini yönetirsiniz.

1. Temel formu oluşturun.
   - Bir örnek veri modeli tanımlayın
   - `FormsModule` gibi gerekli altyapıyı dahil edin
1. `ngModel` direktifini ve çift yönlü veri bağlama sözdizimini kullanarak form kontrollerini veri özelliklerine bağlayın.
   - `ngModel`'in CSS sınıfları kullanarak kontrol durumlarını nasıl bildirdiğini inceleyin
   - Kontrolleri `ngModel` için erişilebilir kılmak üzere adlandırın
1. `ngModel` kullanarak girdi geçerliliğini ve kontrol durumunu takip edin.
   - Duruma görsel geri bildirim sağlamak için özel CSS ekleyin
   - Doğrulama hata mesajlarını gösterin ve gizleyin
1. Model verilerine ekleyerek yerel bir HTML düğme tıklama olayına yanıt verin.
1. Formun [`ngSubmit`](api/forms/NgForm#properties) çıkış özelliğini kullanarak form gönderimini yönetin.
   - Form geçerli olana kadar **Submit** düğmesini devre dışı bırakın
   - Gönderdikten sonra, tamamlanmış formu sayfadaki farklı içerikle değiştirin

## Formu oluşturun

1. Sağlanan örnek uygulama, formda yansıtılan veri modelini tanımlayan `Actor` sınıfını oluşturur.

<docs-code header="actor.ts" language="typescript" path="adev/src/content/examples/forms/src/app/actor.ts"/>

1. Form düzeni ve ayrıntıları `ActorFormComponent` sınıfında tanımlanır.

<docs-code header="actor-form.component.ts (v1)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" region="v1"/>

Bileşenin "app-actor-form" `selector` değeri, bu formu `<app-actor-form>` etiketini kullanarak bir üst şablona yerleştirebileceğiniz anlamına gelir.

1. Aşağıdaki kod, başlangıç formunun örnek bir aktör gösterebilmesi için yeni bir aktör örneği oluşturur.

<docs-code language="typescript" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" language="typescript" region="Marilyn"/>

Bu demo, `model` ve `skills` için sahte veriler kullanır.
   Gerçek bir uygulamada, gerçek verileri almak ve kaydetmek için bir veri hizmeti enjekte eder veya bu özellikleri girdiler ve çıktılar olarak sunarsınız.

1. Bileşen, `FormsModule` modülünü içe aktararak Formlar özelliğini etkinleştirir.

<docs-code language="typescript" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" language="typescript" region="imports"/>

1. Form, kök bileşenin şablonu tarafından tanımlanan uygulama düzeninde görüntülenir.

<docs-code header="app.component.html" language="html" path="adev/src/content/examples/forms/src/app/app.component.html"/>

Başlangıç şablonu, iki form grubu ve bir gönder düğmesi olan bir form için düzeni tanımlar.
   Form grupları, Actor veri modelinin iki özelliğine karşılık gelir: name ve studio.
   Her grubun bir etiketi ve kullanıcı girdisi için bir kutusu vardır.
   - **Name** `<input>` kontrol öğesinde HTML5 `required` niteliği bulunur
   - **Studio** `<input>` kontrol öğesinde bulunmaz çünkü `studio` isteğe bağlıdır

**Submit** düğmesinin üzerinde stil için bazı sınıflar vardır.
   Bu noktada, form düzeni tamamen düz HTML5'tir, bağlama veya direktif yoktur.

1. Örnek form, [Twitter Bootstrap](https://getbootstrap.com/css)'tan bazı stil sınıflarını kullanır: `container`, `form-group`, `form-control` ve `btn`.
   Bu stilleri kullanmak için uygulamanın stil sayfası kütüphaneyi içe aktarır.

<docs-code header="styles.css" path="adev/src/content/examples/forms/src/styles.1.css"/>

1. Form, bir aktörün becerisinin `ActorFormComponent` içinde dahili olarak tutulan önceden tanımlanmış bir `skills` listesinden seçilmesini gerektirir.
   Angular `@for` döngüsü, `<select>` öğesini doldurmak için veri değerleri üzerinde yineleme yapar.

<docs-code header="actor-form.component.html (skills)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="skills"/>

Uygulamayı şimdi çalıştırırsanız, seçim kontrolünde beceri listesini görürsünüz.
Girdi öğeleri henüz veri değerlerine veya olaylara bağlı değildir, bu nedenle hala boşturlar ve davranışları yoktur.

## Girdi kontrollerini veri özelliklerine bağlama

Bir sonraki adım, girdi kontrollerini, kullanıcı girdisine yanıt olarak veri modelini güncellemeleri ve ayrıca veri modelindeki programatik değişikliklere yanıt olarak görüntüyü güncellemeleri için çift yönlü veri bağlama ile ilgili `Actor` özelliklerine bağlamaktır.

`FormsModule`'da bildirilen `ngModel` direktifi, şablon odaklı formunuzdaki kontrolleri veri modelinizdeki özelliklere bağlamanıza olanak tanır.
Çift yönlü veri bağlama sözdizimi `[(ngModel)]` ile direktifi dahil ettiğinizde, Angular kontrolün değerini ve kullanıcı etkileşimini takip edebilir ve görünümü modelle senkronize tutabilir.

1. `actor-form.component.html` şablon dosyasını düzenleyin.
1. **Name** etiketinin yanındaki `<input>` etiketini bulun.
1. Çift yönlü veri bağlama sözdizimi `[(ngModel)]="..."` kullanarak `ngModel` direktifini ekleyin.

<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="ngModelName-1"/>

HELPFUL: Bu örnekte, çift yönlü veri bağlamanın çalışmasını gözlemlerken ilgili özelliğin geçerli veri değerini göstermek için her girdi etiketinden sonra geçici bir tanılama interpolasyonu `{{model.name}}` bulunur. Yorum, çalıştığını gözlemlemeyi bitirdiğinizde tanılama satırlarını kaldırmanızı hatırlatır.

### Genel form durumuna erişim

Bileşeninizde `FormsModule`'ü içe aktardığınızda, Angular otomatik olarak şablondaki `<form>` etiketine bir [NgForm](api/forms/NgForm) direktifi oluşturur ve bağlar (çünkü `NgForm`, `<form>` öğeleriyle eşleşen `form` seçicisine sahiptir).

`NgForm`'a ve genel form durumuna erişmek için bir [şablon referans değişkeni](guide/templates/variables#şablon-referans-değişkenleri) bildirin.

1. `actor-form.component.html` şablon dosyasını düzenleyin.
1. `<form>` etiketini `#actorForm` şablon referans değişkeniyle güncelleyin ve değerini aşağıdaki gibi ayarlayın.

<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="template-variable"/>

`actorForm` şablon değişkeni artık formu bir bütün olarak yöneten `NgForm` direktif örneğine bir referanstır.

1. Uygulamayı çalıştırın.
1. **Name** girdi kutusuna yazmaya başlayın.

Karakterleri ekleyip sildikçe, veri modelinde görünüp kaybolduklarını görebilirsiniz.

Interpolasyonlu değerleri gösteren tanılama satırı, değerlerin gerçekten girdi kutusundan modele ve geri aktığını gösterir.

### Kontrol öğelerini adlandırma

Bir öğede `[(ngModel)]` kullandığınızda, o öğe için bir `name` niteliği tanımlamanız gerekir.
Angular, öğeyi üst `<form>` öğesine bağlı `NgForm` direktifine kaydetmek için atanan adı kullanır.

Örnekte, `<input>` öğesine bir `name` niteliği eklendi ve aktörün adı için mantıklı olan "name" olarak ayarlandı.
Herhangi bir benzersiz değer işe yarar, ancak açıklayıcı bir ad kullanmak yararlıdır.

1. **Studio** ve **Skill** için benzer `[(ngModel)]` bağlamaları ve `name` nitelikleri ekleyin.
1. Artık interpolasyonlu değerleri gösteren tanılama mesajlarını kaldırabilirsiniz.
1. Çift yönlü veri bağlamanın tüm aktör modeli için çalıştığını doğrulamak için, bileşenin şablonunun üstüne verileri bir dizeye serileştiren [`json`](api/common/JsonPipe) pipe'ı ile yeni bir metin bağlaması ekleyin.

Bu düzeltmelerden sonra form şablonu aşağıdaki gibi görünmelidir:

<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="ngModel-2"/>

Şunları fark edeceksiniz:

- Her `<input>` öğesinin bir `id` özelliği vardır.
  Bu, `<label>` öğesinin `for` niteliği tarafından etiketi girdi kontrolüyle eşleştirmek için kullanılır.
  Bu bir [standart HTML özelliğidir](https://developer.mozilla.org/docs/Web/HTML/Element/label).

- Her `<input>` öğesinin ayrıca Angular'ın kontrolü formla kaydetmek için kullandığı gerekli `name` özelliği vardır.

Etkileri gözlemledikten sonra, `{{ model | json }}` metin bağlamasını silebilirsiniz.

## Form durumlarını takip etme

Angular, form gönderildikten sonra `form` öğelerine `ng-submitted` sınıfını uygular. Bu sınıf, gönderildikten sonra formun stilini değiştirmek için kullanılabilir.

## Kontrol durumlarını takip etme

Bir kontrole `NgModel` direktifi eklemek, durumunu tanımlayan sınıf adlarını kontrole ekler.
Bu sınıflar, kontrolün stilini durumuna göre değiştirmek için kullanılabilir.

Aşağıdaki tablo, Angular'ın kontrolün durumuna göre uyguladığı sınıf adlarını açıklar.

Angular ayrıca gönderim sırasında `form` öğelerine `ng-submitted` sınıfını uygular,
ancak `form` öğesi içindeki kontrollere uygulamaz.

Bu CSS sınıflarını, kontrolünüzün stili durumuna göre tanımlamak için kullanırsınız.

### Kontrol durumlarını gözlemleme

Sınıfların çerçeve tarafından nasıl eklenip kaldırıldığını görmek için tarayıcının geliştirici araçlarını açın ve aktör adını temsil eden `<input>` öğesini inceleyin.

1. Tarayıcınızın geliştirici araçlarını kullanarak, **Name** girdi kutusuna karşılık gelen `<input>` öğesini bulun.
   Öğenin "form-control"e ek olarak birden fazla CSS sınıfına sahip olduğunu görebilirsiniz.

1. İlk açtığınızda, sınıflar geçerli bir değere sahip olduğunu, değerin başlatma veya sıfırlamadan beri değişmediğini ve kontrolün başlatma veya sıfırlamadan beri ziyaret edilmediğini gösterir.

```html
<input class="form-control ng-untouched ng-pristine ng-valid" />;
   ```

1. **Name** `<input>` kutusunda aşağıdaki eylemleri yapın ve hangi sınıfların göründüğünü gözlemleyin.
   - Bakın ama dokunmayın.
     Sınıflar, dokunulmamış, saf ve geçerli olduğunu gösterir.

- Ad kutusunun içine tıklayın, ardından dışına tıklayın.
     Kontrol artık ziyaret edilmiştir ve öğe `ng-untouched` sınıfı yerine `ng-touched` sınıfına sahiptir.

- Adın sonuna eğik çizgiler ekleyin.
     Artık dokunulmuş ve değiştirilmiştir.

- Adı silin.
     Bu, değeri geçersiz yapar, bu nedenle `ng-invalid` sınıfı `ng-valid` sınıfının yerini alır.

### Durumlar için görsel geri bildirim oluşturma

`ng-valid`/`ng-invalid` çifti özellikle ilginçtir, çünkü değerler geçersiz olduğunda güçlü bir görsel sinyal göndermek istersiniz.
Ayrıca zorunlu alanları işaretlemek istersiniz.

Zorunlu alanları ve geçersiz verileri, girdi kutusunun solundaki renkli bir çubukla aynı anda işaretleyebilirsiniz.

Görünümü bu şekilde değiştirmek için aşağıdaki adımları izleyin.

1. `ng-*` CSS sınıfları için tanımlar ekleyin.
1. Bu sınıf tanımlarını yeni bir `forms.css` dosyasına ekleyin.
1. Yeni dosyayı `index.html`'nin yanına projeye ekleyin:

<docs-code header="forms.css" language="css" path="adev/src/content/examples/forms/src/assets/forms.css"/>

1. `index.html` dosyasında, `<head>` etiketini yeni stil sayfasını içerecek şekilde güncelleyin.

<docs-code header="index.html (styles)" path="adev/src/content/examples/forms/src/index.html" region="styles"/>

### Doğrulama hata mesajlarını gösterme ve gizleme

**Name** girdi kutusu zorunludur ve temizlemek çubuğu kırmızıya çevirir.
Bu, bir şeyin yanlış olduğunu gösterir, ancak kullanıcı neyin yanlış olduğunu veya bu konuda ne yapacağını bilmez.
Kontrolün durumunu kontrol ederek ve yanıt vererek yararlı bir mesaj sağlayabilirsiniz.

**Skill** seçim kutusu da zorunludur, ancak seçim kutusu zaten seçimi geçerli değerlerle sınırladığı için bu tür bir hata yönetimine ihtiyaç duymaz.

Uygun olduğunda bir hata mesajı tanımlamak ve göstermek için aşağıdaki adımları izleyin.

<docs-workflow>
<docs-step title="Girdiye yerel bir referans ekleyin">
`input` etiketini, şablon içinden girdi kutusunun Angular kontrolüne erişmek için kullanabileceğiniz bir şablon referans değişkeni ile genişletin. Örnekte değişken `#name="ngModel"`'dır.

Şablon referans değişkeni (`#name`), `"ngModel"` olarak ayarlanmıştır çünkü bu, [`NgModel.exportAs`](api/core/Directive#exportAs) özelliğinin değeridir. Bu özellik, Angular'a bir referans değişkenini bir direktife nasıl bağlayacağını söyler.
</docs-step>

<docs-step title="Hata mesajını ekleyin">
Uygun bir hata mesajı içeren bir `<div>` ekleyin.
</docs-step>

<docs-step title="Hata mesajını koşullu yapın">
`name` kontrolünün özelliklerini mesaj `<div>` öğesinin `hidden` özelliğine bağlayarak hata mesajını gösterin veya gizleyin.
</docs-step>

<docs-code header="actor-form.component.html (hidden-error-msg)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="hidden-error-msg"/>

<docs-step title="İsim alanına koşullu bir hata mesajı ekleyin">
Aşağıdaki örnekte olduğu gibi, `name` girdi kutusuna koşullu bir hata mesajı ekleyin.

<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="name-with-error-msg"/>
</docs-step>
</docs-workflow>
Bu örnekte, kontrol ya geçerli ya da _saf_ olduğunda mesajı gizlersiniz.
Saf, kullanıcının bu formda görüntülenen değeri değiştirmediği anlamına gelir.
`pristine` durumunu göz ardı ederseniz, mesajı yalnızca değer geçerli olduğunda gizlersiniz.
Bu bileşene yeni, boş bir aktörle veya geçersiz bir aktörle gelirseniz, herhangi bir şey yapmadan önce hata mesajını hemen görürsünüz.

Mesajın yalnızca kullanıcı geçersiz bir değişiklik yaptığında görüntülenmesini isteyebilirsiniz.
Kontrol `pristine` durumundayken mesajı gizlemek bu hedefe ulaşır.
Bir sonraki adımda forma yeni bir aktör eklediğinizde bu seçimin önemini göreceksiniz.
## Yeni bir aktör ekleme

Bu alıştırma, model verilerine ekleme yaparak yerel bir HTML düğme tıklama olayına nasıl yanıt vereceğinizi gösterir.
Form kullanıcılarının yeni bir aktör eklemesine izin vermek için, bir tıklama olayına yanıt veren bir **New Actor** düğmesi ekleyeceksiniz.

1. Şablonda, formun altına bir "New Actor" `<button>` öğesi yerleştirin.
1. Bileşen dosyasında, aktör veri modeline aktör oluşturma yöntemini ekleyin.

<docs-code header="actor-form.component.ts (New Actor method)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" region="new-actor"/>

1. Düğmenin tıklama olayını bir aktör oluşturma yöntemi olan `newActor()`'a bağlayın.

<docs-code header="actor-form.component.html (New Actor button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="new-actor-button-no-reset"/>

1. Uygulamayı tekrar çalıştırın ve **New Actor** düğmesine tıklayın.

Form temizlenir ve girdi kutusunun solundaki _zorunlu_ çubuklar kırmızıdır, geçersiz `name` ve `skill` özelliklerini gösterir.
   Hata mesajlarının gizlendiğine dikkat edin.
   Bunun nedeni formun saf olmasıdır; henüz hiçbir şey değiştirmediniz.

1. Bir ad girin ve tekrar **New Actor**'a tıklayın.

Şimdi uygulama bir `Name is required` hata mesajı görüntüler, çünkü girdi kutusu artık saf değildir.
   Form, **New Actor**'a tıklamadan önce bir ad girdiğinizi hatırlar.

1. Form kontrollerinin saf durumunu geri yüklemek için, `newActor()` yöntemini çağırdıktan sonra formun `reset()` yöntemini çağırarak tüm bayrakları zorunlu olarak temizleyin.

<docs-code header="actor-form.component.html (Reset the form)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="new-actor-button-form-reset"/>

Artık **New Actor**'a tıklamak hem formu hem de kontrol bayraklarını sıfırlar.

## `ngSubmit` ile formu gönderme

Kullanıcı formu doldurduktan sonra gönderebilmelidir.
Formun altındaki **Submit** düğmesi kendi başına hiçbir şey yapmaz, ancak türü (`type="submit"`) nedeniyle bir form gönderme olayı tetikler.

Bu olaya yanıt vermek için aşağıdaki adımları izleyin.

<docs-workflow>

<docs-step title="ngOnSubmit'i dinleyin">
Formun [`ngSubmit`](api/forms/NgForm#properties) olay özelliğini aktör form bileşeninin `onSubmit()` yöntemine bağlayın.

<docs-code header="actor-form.component.html (ngSubmit)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="ngSubmit"/>
</docs-step>

<docs-step title="disabled özelliğini bağlayın">
**Submit** düğmesini içeren forma erişmek için `#actorForm` şablon referans değişkenini kullanın ve bir olay bağlaması oluşturun.

Formun genel geçerliliğini gösteren özelliğini **Submit** düğmesinin `disabled` özelliğine bağlayacaksınız.

<docs-code header="actor-form.component.html (submit-button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="submit-button"/>
</docs-step>

<docs-step title="Uygulamayı çalıştırın">
Düğmenin etkin olduğuna dikkat edin -- henüz yararlı bir şey yapmamasına rağmen.
</docs-step>

<docs-step title="İsim değerini silin">
Bu, "required" kuralını ihlal eder, bu nedenle hata mesajını görüntüler -- ve dikkat edin, **Submit** düğmesini de devre dışı bırakır.

Düğmenin etkin durumunu formun geçerliliğine açıkça bağlamanız gerekmedi.
`FormsModule`, geliştirilmiş form öğesinde bir şablon referans değişkeni tanımladığınızda ve ardından düğme kontrolünde bu değişkene atıfta bulunduğunuzda bunu otomatik olarak yaptı.
</docs-step>
</docs-workflow>

### Form gönderimine yanıt verme

Form gönderime bir yanıt göstermek için, veri giriş alanını gizleyebilir ve yerine başka bir şey görüntüleyebilirsiniz.

<docs-workflow>
<docs-step title="Formu sarmalayın">
Tüm formu bir `<div>` içine sarın ve `hidden` özelliğini `ActorFormComponent.submitted` özelliğine bağlayın.

<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="edit-div"/>

`ActorFormComponent`'ten bu kod parçacığının gösterdiği gibi, `submitted` özelliği formu göndermeden önce false olduğundan, ana form başlangıçtan itibaren görünürdür:

<docs-code header="actor-form.component.ts (submitted)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" region="submitted"/>

**Submit** düğmesine tıkladığınızda, `submitted` bayrağı true olur ve form kaybolur.
</docs-step>

<docs-step title="Gönderildi durumunu ekleyin">
Form gönderilmiş durumdayken başka bir şey göstermek için, yeni `<div>` sarmalayıcısının altına aşağıdaki HTML'yi ekleyin.

<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" region="submitted"/>

Bu `<div>`, interpolasyon bağlamalarıyla salt okunur bir aktör gösterir ve yalnızca bileşen gönderilmiş durumdayken görünür.

Alternatif görüntü, tıklama olayı `submitted` bayrağını temizleyen bir ifadeye bağlı olan bir _Edit_ düğmesi içerir.
</docs-step>

<docs-step title="Düzenle düğmesini test edin">
Görüntüyü düzenlenebilir forma geri döndürmek için *Edit* düğmesine tıklayın.
</docs-step>
</docs-workflow>

## Özet

Bu sayfada tartışılan Angular formu, veri değiştirme, doğrulama ve daha fazlası için destek sağlamak üzere aşağıdaki çerçeve özelliklerinden yararlanır.

- Bir Angular HTML form şablonu
- `@Component` dekoratörüne sahip bir form bileşeni sınıfı
- `NgForm.ngSubmit` olay özelliğine bağlanarak form gönderimini yönetme
- `#actorForm` ve `#name` gibi şablon referans değişkenleri
- Çift yönlü veri bağlama için `[(ngModel)]` sözdizimi
- Doğrulama ve form öğesi değişiklik takibi için `name` niteliklerinin kullanımı
- Referans değişkeninin girdi kontrollerindeki `valid` özelliği, bir kontrolün geçerli olup olmadığını veya hata mesajlarını gösterip göstermeyeceğini belirtir
- `NgForm` geçerliliğine bağlanarak **Submit** düğmesinin etkin durumunu kontrol etme
- Geçerli olmayan kontroller hakkında kullanıcılara görsel geri bildirim sağlayan özel CSS sınıfları

Uygulamanın son sürümü için kod:
# Form girdisini doğrulama

Doğruluk ve bütünlük için kullanıcı girdisini doğrulayarak genel veri kalitesini artırabilirsiniz.
Bu sayfa, hem reaktif hem de şablon odaklı formlarda kullanıcı arayüzünden kullanıcı girdisinin nasıl doğrulanacağını ve yararlı doğrulama mesajlarının nasıl görüntüleneceğini gösterir.

## Template-driven form'larda girdiyi doğrulama

Şablon odaklı bir forma doğrulama eklemek için, [yerel HTML form doğrulamasıyla](https://developer.mozilla.org/docs/Web/Guide/HTML/HTML5/Constraint_validation) eklediğiniz aynı doğrulama niteliklerini eklersiniz.
Angular, bu nitelikleri çerçevedeki doğrulayıcı fonksiyonlarla eşleştirmek için direktifler kullanır.

Bir form kontrolünün değeri her değiştiğinde, Angular doğrulamayı çalıştırır ve ya `INVALID` durumuyla sonuçlanan bir doğrulama hataları listesi ya da `VALID` durumuyla sonuçlanan `null` döndürür.

Daha sonra `ngModel`'i yerel bir şablon değişkenine dışa aktararak kontrolün durumunu inceleyebilirsiniz.
Aşağıdaki örnek, `NgModel`'i `name` adlı bir değişkene dışa aktarır:

<docs-code header="actor-form-template.component.html (name)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" region="name-with-error-msg"/>

Örnekle gösterilen aşağıdaki özelliklere dikkat edin.

- `<input>` öğesi HTML doğrulama niteliklerini taşır: `required` ve `minlength`.
  Ayrıca özel bir doğrulayıcı direktif olan `forbiddenName`'i taşır.
  Daha fazla bilgi için [Özel doğrulayıcılar](#özel-doğrulayıcılar-tanımlama) bölümüne bakın.

- `#name="ngModel"`, `NgModel`'i `name` adlı yerel bir değişkene dışa aktarır.
  `NgModel`, altta yatan `FormControl` örneğinin birçok özelliğini yansıtır, böylece bunu şablonda `valid` ve `dirty` gibi kontrol durumlarını kontrol etmek için kullanabilirsiniz.
  Kontrol özelliklerinin tam listesi için [AbstractControl](api/forms/AbstractControl) API referansına bakın.
  - En dıştaki `@if`, bir dizi iç içe mesaj ortaya koyar, ancak yalnızca `name` geçersiz ve kontrol `dirty` veya `touched` ise.

- Her iç içe `@if`, olası doğrulama hatalarından biri için özel bir mesaj sunabilir.
    `required`, `minlength` ve `forbiddenName` için mesajlar vardır.

HELPFUL: Doğrulayıcının, kullanıcının formu düzenleme fırsatı bulamadan hataları görüntülemesini önlemek için, bir kontrolde `dirty` veya `touched` durumunu kontrol etmelisiniz.

- Kullanıcı izlenen alandaki değeri değiştirdiğinde, kontrol "dirty" olarak işaretlenir
- Kullanıcı form kontrol öğesinden odağı kaldırdığında, kontrol "touched" olarak işaretlenir

## Reactive form'larda girdiyi doğrulama

Reaktif bir formda doğruluk kaynağı bileşen sınıfıdır.
Şablondaki nitelikler aracılığıyla doğrulayıcılar eklemek yerine, doğrulayıcı fonksiyonları doğrudan bileşen sınıfındaki form kontrol modeline eklersiniz.
Angular daha sonra kontrolün değeri her değiştiğinde bu fonksiyonları çağırır.

### Doğrulayıcı fonksiyonlar

Doğrulayıcı fonksiyonlar senkron veya asenkron olabilir.

| Doğrulayıcı türü        | Ayrıntılar                                                                                                                                                                                                             |
| :---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Senkron doğrulayıcılar  | Bir kontrol örneği alan ve hemen ya bir doğrulama hataları kümesi ya da `null` döndüren senkron fonksiyonlar. Bir `FormControl` örneklerken ikinci argüman olarak bunları geçirin.                                     |
| Asenkron doğrulayıcılar | Bir kontrol örneği alan ve daha sonra bir doğrulama hataları kümesi veya `null` yayan bir Promise veya Observable döndüren asenkron fonksiyonlar. Bir `FormControl` örneklerken üçüncü argüman olarak bunları geçirin. |

Performans nedenleriyle, Angular asenkron doğrulayıcıları yalnızca tüm senkron doğrulayıcılar geçtiğinde çalıştırır.
Her biri hatalar ayarlanmadan önce tamamlanmalıdır.

### Yerleşik doğrulayıcı fonksiyonlar

[Kendi doğrulayıcı fonksiyonlarınızı yazmayı](#özel-doğrulayıcılar-tanımlama) seçebilir veya Angular'ın bazı yerleşik doğrulayıcılarını kullanabilirsiniz.

Şablon odaklı formlarda nitelik olarak kullanılabilen aynı yerleşik doğrulayıcılar, `required` ve `minlength` gibi, `Validators` sınıfından fonksiyon olarak kullanılabilir.
Yerleşik doğrulayıcıların tam listesi için [Validators](api/forms/Validators) API referansına bakın.

Aktör formunu reaktif form olarak güncellemek için, aynı yerleşik doğrulayıcılardan bazılarını kullanın -- bu sefer, aşağıdaki örnekte olduğu gibi fonksiyon biçiminde.

<docs-code header="actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" region="form-group"/>

Bu örnekte, `name` kontrolü iki yerleşik doğrulayıcı (`Validators.required` ve `Validators.minLength(4)`) ve bir özel doğrulayıcı (`forbiddenNameValidator`) ayarlar.

Bu doğrulayıcıların tümü senkrondur, bu nedenle ikinci argüman olarak geçirilir.
Fonksiyonları bir dizi olarak geçirerek birden fazla doğrulayıcıyı destekleyebileceğinize dikkat edin.

Bu örnek ayrıca birkaç getter yöntemi ekler.
Reaktif bir formda, herhangi bir form kontrolüne her zaman üst grubundaki `get` yöntemiyle erişebilirsiniz, ancak bazen şablon için kısayol olarak getter'lar tanımlamak yararlıdır.

`name` girdisi için şablona tekrar bakarsanız, şablon odaklı örneğe oldukça benzerdir.

<docs-code header="actor-form-reactive.component.html (name with error msg)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" region="name-with-error-msg"/>

Bu form, şablon odaklı sürümden farklıdır çünkü artık herhangi bir direktif dışa aktarmaz. Bunun yerine, bileşen sınıfında tanımlanan `name` getter'ını kullanır.

`required` niteliğinin hala şablonda mevcut olduğuna dikkat edin. Doğrulama için gerekli olmasa da, erişilebilirlik amacıyla korunmalıdır.

## Özel doğrulayıcılar tanımlama

Yerleşik doğrulayıcılar her zaman uygulamanızın tam kullanım durumuna uymaz, bu nedenle bazen özel bir doğrulayıcı oluşturmanız gerekir.

Önceki örnekteki `forbiddenNameValidator` fonksiyonunu düşünün.
Bu fonksiyonun tanımı şöyle görünür.

<docs-code header="forbidden-name.directive.ts (forbiddenNameValidator)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" region="custom-validator"/>

Fonksiyon, _belirli_ bir yasaklı adı tespit etmek için bir düzenli ifade alan ve bir doğrulayıcı fonksiyon döndüren bir fabrikadır.

Bu örnekte, yasaklı ad "bob"dur, bu nedenle doğrulayıcı "bob" içeren herhangi bir aktör adını reddeder.
Başka bir yerde "alice"i veya yapılandıran düzenli ifadenin eşleştiği herhangi bir adı reddedebilir.

`forbiddenNameValidator` fabrikası, yapılandırılmış doğrulayıcı fonksiyonu döndürür.
Bu fonksiyon bir Angular kontrol nesnesi alır ve kontrol değeri geçerliyse _null_ veya bir doğrulama hatası nesnesi döndürür.
Doğrulama hatası nesnesi genellikle adı doğrulama anahtarı olan `'forbiddenName'` ve değeri hata mesajına ekleyebileceğiniz rastgele bir değerler sözlüğü olan `{name}` bir özelliğe sahiptir.

Özel asenkron doğrulayıcılar senkron doğrulayıcılara benzer, ancak bunun yerine daha sonra null veya bir doğrulama hatası nesnesi yayan bir Promise veya observable döndürmelidir.
Bir observable durumunda, observable tamamlanmalıdır; bu noktada form doğrulama için yayılan son değeri kullanır.

### Reactive form'lara özel doğrulayıcılar ekleme

Reaktif formlarda, fonksiyonu doğrudan `FormControl`'a geçirerek özel bir doğrulayıcı ekleyin.

<docs-code header="actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" region="custom-validator"/>

### Template-driven form'lara özel doğrulayıcılar ekleme

Şablon odaklı formlarda, doğrulayıcı fonksiyonu saran direktifi şablona ekleyin.
Örneğin, karşılık gelen `ForbiddenValidatorDirective`, `forbiddenNameValidator` etrafında bir sarmalayıcı görevi görür.

Angular, aşağıdaki örnekte gösterildiği gibi direktifin kendisini `NG_VALIDATORS` sağlayıcısına kaydetmesi nedeniyle doğrulama sürecindeki rolünü tanır.
`NG_VALIDATORS`, genişletilebilir bir doğrulayıcılar koleksiyonuna sahip önceden tanımlanmış bir sağlayıcıdır.

<docs-code header="forbidden-name.directive.ts (providers)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" region="directive-providers"/>

Direktif sınıfı daha sonra `Validator` arayüzünü uygular, böylece Angular formlarıyla kolayca entegre olabilir.
Hepsinin nasıl bir araya geldiğini anlamanıza yardımcı olmak için direktifin geri kalanı burada.

<docs-code header="forbidden-name.directive.ts (directive)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" region="directive"/>

`ForbiddenValidatorDirective` hazır olduğunda, etkinleştirmek için seçicisini `appForbiddenName`'i herhangi bir girdi öğesine ekleyebilirsiniz.
Örneğin:

<docs-code header="actor-form-template.component.html (forbidden-name-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" region="name-input"/>

HELPFUL: Özel doğrulama direktifinin `useClass` yerine `useExisting` ile örneklendiğine dikkat edin.
Kayıtlı doğrulayıcı, `forbiddenName` özelliği "bob"a bağlı formda yer alan `ForbiddenValidatorDirective`'in _bu örneği_ olmalıdır.

`useExisting` yerine `useClass` kullanırsanız, `forbiddenName` özelliğine sahip olmayan yeni bir sınıf örneği kaydedersiniz.

## Kontrol durumu CSS sınıfları

Angular, kontrol özelliklerinin birçoğunu otomatik olarak form kontrol öğesine CSS sınıfları olarak yansıtır.
Form kontrol öğelerini formun durumuna göre stilize etmek için bu sınıfları kullanın.
Şu anda aşağıdaki sınıflar desteklenmektedir.

- `.ng-valid`
- `.ng-invalid`
- `.ng-pending`
- `.ng-pristine`
- `.ng-dirty`
- `.ng-untouched`
- `.ng-touched`
- `.ng-submitted` $yalnızca kapsayan form öğesi$

Aşağıdaki örnekte, aktör formu her form kontrolünün kenar rengini ayarlamak için `.ng-valid` ve `.ng-invalid` sınıflarını kullanır.

<docs-code header="forms.css (status classes)" path="adev/src/content/examples/form-validation/src/assets/forms.css"/>

## Çapraz alan doğrulama

Çapraz alan doğrulayıcı, bir formdaki farklı alanların değerlerini karşılaştıran ve bunları kombinasyon halinde kabul eden veya reddeden bir [özel doğrulayıcıdır](#özel-doğrulayıcılar-tanımlama 'Read about custom validators').
Örneğin, birbirine uyumsuz seçenekler sunan bir formunuz olabilir, böylece kullanıcı A veya B'yi seçebilir, ancak ikisini birden seçemez.
Bazı alan değerleri de diğerlerine bağlı olabilir; bir kullanıcının B'yi yalnızca A da seçiliyse seçmesine izin verilebilir.

Aşağıdaki çapraz doğrulama örnekleri şunları nasıl yapacağınızı gösterir:

- İki kardeş kontrolün değerlerine dayalı olarak reaktif veya şablon tabanlı form girdisini doğrulama,
- Kullanıcı formla etkileşime girdikten ve doğrulama başarısız olduktan sonra açıklayıcı bir hata mesajı gösterme.

Örnekler, aktörlerin Aktör Formunu doldurarak rollerinde aynı adı yeniden kullanmamalarını sağlamak için çapraz doğrulama kullanır.
Doğrulayıcılar bunu aktör adları ve rollerin eşleşmediğini kontrol ederek yapar.

### Reactive form'lara çapraz doğrulama ekleme

Formun yapısı aşağıdaki gibidir:

```ts
const actorForm = new FormGroup({
  'name': new FormControl(),
  'role': new FormControl(),
  'skill': new FormControl(),
});
```

`name` ve `role`'ün kardeş kontroller olduğuna dikkat edin.
Her iki kontrolü tek bir özel doğrulayıcıda değerlendirmek için, doğrulamayı ortak bir ata kontrolde gerçekleştirmelisiniz: `FormGroup`.
Alt kontrollerini sorgulamak ve değerlerini karşılaştırmak için `FormGroup`'u sorgularsınız.

Doğrulayıcıyı `FormGroup`'a eklemek için, oluşturma sırasında yeni doğrulayıcıyı ikinci argüman olarak geçirin.

```ts
const actorForm = new FormGroup(
  {
    'name': new FormControl(),
    'role': new FormControl(),
    'skill': new FormControl(),
  },
  {validators: unambiguousRoleValidator},
);
```

Doğrulayıcı kodu aşağıdaki gibidir.

<docs-code header="unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" region="cross-validation-validator"/>

`unambiguousRoleValidator` doğrulayıcısı, `ValidatorFn` arayüzünü uygular.
Bir Angular kontrol nesnesini argüman olarak alır ve form geçerliyse null, aksi takdirde `ValidationErrors` döndürür.

Doğrulayıcı, `FormGroup`'un [get](api/forms/AbstractControl#get) yöntemini çağırarak alt kontrolleri alır, ardından `name` ve `role` kontrollerinin değerlerini karşılaştırır.

Değerler eşleşmiyorsa, rol açıktır, her ikisi de geçerlidir ve doğrulayıcı null döndürür.
Eşleşirlerse, aktörün rolü belirsizdir ve doğrulayıcı bir hata nesnesi döndürerek formu geçersiz olarak işaretlemelidir.

Daha iyi kullanıcı deneyimi sağlamak için, form geçersiz olduğunda şablon uygun bir hata mesajı gösterir.

<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" region="cross-validation-error-message"/>

Bu `@if`, `FormGroup`'ta `unambiguousRoleValidator` doğrulayıcısı tarafından döndürülen çapraz doğrulama hatası varsa hatayı görüntüler, ancak yalnızca kullanıcı [formla etkileşimi tamamladıysa](#kontrol-durumu-css-sınıfları).

### Template-driven form'lara çapraz doğrulama ekleme

Şablon odaklı bir form için, doğrulayıcı fonksiyonunu sarmak üzere bir direktif oluşturmanız gerekir.
Aşağıdaki örnekte gösterildiği gibi, [`NG_VALIDATORS` token'ını](/api/forms/NG_VALIDATORS) kullanarak bu direktifi doğrulayıcı olarak sağlarsınız.

<docs-code header="unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" region="cross-validation-directive"/>

Yeni direktifi HTML şablonuna eklemeniz gerekir.
Doğrulayıcının formda en üst düzeyde kaydedilmesi gerektiğinden, aşağıdaki şablon direktifi `form` etiketine yerleştirir.

<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" region="cross-validation-register-validator"/>

Daha iyi kullanıcı deneyimi sağlamak için, form geçersiz olduğunda uygun bir hata mesajı görünür.

<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" region="cross-validation-error-message"/>

Bu, hem şablon odaklı hem de reaktif formlarda aynıdır.

## Asenkron doğrulayıcılar oluşturma

Asenkron doğrulayıcılar, `AsyncValidatorFn` ve `AsyncValidator` arayüzlerini uygular.
Bunlar senkron karşılıklarına çok benzer, ancak aşağıdaki farklılıklara sahiptir.

- `validate()` fonksiyonları bir Promise veya observable döndürmelidir,
- Döndürülen observable sonlu olmalıdır, yani bir noktada tamamlanmalıdır.
  Sonsuz bir observable'ı sonlu birine dönüştürmek için, observable'ı `first`, `last`, `take` veya `takeUntil` gibi bir filtreleme operatöründen geçirin.

Asenkron doğrulama, senkron doğrulamadan sonra gerçekleşir ve yalnızca senkron doğrulama başarılı olduğunda çalıştırılır.
Bu kontrol, daha temel doğrulama yöntemleri zaten geçersiz girdi bulmuşsa formların potansiyel olarak pahalı asenkron doğrulama süreçlerini $HTTP isteği gibi$ atlamasına olanak tanır.

Asenkron doğrulama başladıktan sonra, form kontrolü `pending` durumuna girer.
Kontrolün `pending` özelliğini inceleyin ve devam eden doğrulama işlemi hakkında görsel geri bildirim vermek için kullanın.

Yaygın bir kullanıcı arayüzü kalıbı, asenkron doğrulama yapılırken bir döndürücü göstermektir.
Aşağıdaki örnek, bunu şablon odaklı bir formda nasıl gerçekleştireceğinizi gösterir.

```html
<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator />

@if (model.pending) {
  <app-spinner />
}
```

### Özel bir asenkron doğrulayıcı uygulama

Aşağıdaki örnekte, bir asenkron doğrulayıcı aktörlerin henüz alınmamış bir role atanmasını sağlar.
Yeni aktörler sürekli seçmelere katılıyor ve eski aktörler emekli oluyor, bu nedenle mevcut rollerin listesi önceden alınamaz.
Olası rol girişini doğrulamak için, doğrulayıcı şu anda atanmış tüm aktörlerin merkezi bir veritabanına danışmak üzere asenkron bir işlem başlatmalıdır.

Aşağıdaki kod, `AsyncValidator` arayüzünü uygulayan `UniqueRoleValidator` doğrulayıcı sınıfını oluşturur.

<docs-code header="role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" region="async-validator"/>

`actorsService` özelliği, aşağıdaki arayüzü tanımlayan `ActorsService` token'ının bir örneğiyle başlatılır.

```ts
interface ActorsService {
  isRoleTaken: (role: string) => Observable<boolean>;
}
```

Gerçek bir uygulamada, `ActorsService` rolün mevcut olup olmadığını kontrol etmek için aktör veritabanına bir HTTP isteği yapmaktan sorumlu olacaktır.
Doğrulayıcının bakış açısından, hizmetin gerçek uygulaması önemli değildir, bu nedenle örnek yalnızca `ActorsService` arayüzüne karşı kod yazabilir.

Doğrulama başladığında, `UniqueRoleValidator` mevcut kontrol değeriyle `ActorsService` `isRoleTaken()` yöntemine delege eder.
Bu noktada kontrol `pending` olarak işaretlenir ve `validate()` yönteminden döndürülen observable zinciri tamamlanana kadar bu durumda kalır.

`isRoleTaken()` yöntemi, rolün mevcut olup olmadığını kontrol eden bir HTTP isteği gönderir ve sonuç olarak `Observable<boolean>` döndürür.
`validate()` yöntemi, yanıtı `map` operatörü aracılığıyla doğrulama sonucuna dönüştürür.

Yöntem daha sonra, herhangi bir doğrulayıcı gibi, form geçerliyse `null` döndürür, geçerli değilse `ValidationErrors` döndürür.
Bu doğrulayıcı, `catchError` operatörüyle olası hataları yönetir.
Bu durumda, doğrulayıcı `isRoleTaken()` hatasını başarılı bir doğrulama olarak ele alır, çünkü bir doğrulama isteğinin başarısız olması rolün geçersiz olduğu anlamına gelmez.
Hatayı farklı şekilde yönetebilir ve bunun yerine `ValidationError` nesnesini döndürebilirsiniz.

Bir süre sonra, observable zinciri tamamlanır ve asenkron doğrulama biter.
`pending` bayrağı `false` olarak ayarlanır ve formun geçerliliği güncellenir.

### Reactive form'lara asenkron doğrulayıcılar ekleme

Reaktif formlarda asenkron doğrulayıcı kullanmak için, doğrulayıcıyı bileşen sınıfının bir özelliğine enjekte ederek başlayın.

<docs-code header="actor-form-reactive.component.2.ts" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" region="async-validator-inject"/>

Ardından, doğrulayıcı fonksiyonu doğrudan `FormControl`'a geçirerek uygulayın.

Aşağıdaki örnekte, `UniqueRoleValidator`'ın `validate` fonksiyonu, kontrolün `asyncValidators` seçeneğine geçirilerek ve `ActorFormReactiveComponent`'e enjekte edilen `UniqueRoleValidator` örneğine bağlanarak `roleControl`'a uygulanır.
`asyncValidators`'ın değeri tek bir asenkron doğrulayıcı fonksiyon veya bir fonksiyonlar dizisi olabilir.
`FormControl` seçenekleri hakkında daha fazla bilgi edinmek için [AbstractControlOptions](api/forms/AbstractControlOptions) API referansına bakın.

<docs-code header="actor-form-reactive.component.2.ts" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" region="async-validator-usage"/>

### Template-driven form'lara asenkron doğrulayıcılar ekleme

Şablon odaklı formlarda asenkron doğrulayıcı kullanmak için, yeni bir direktif oluşturun ve üzerinde `NG_ASYNC_VALIDATORS` sağlayıcısını kaydedin.

Aşağıdaki örnekte, direktif gerçek doğrulama mantığını içeren `UniqueRoleValidator` sınıfını enjekte eder ve doğrulama yapılması gerektiğinde Angular tarafından tetiklenen `validate` fonksiyonunda çağırır.

<docs-code header="role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" region="async-validator-directive"/>

Ardından, senkron doğrulayıcılarda olduğu gibi, etkinleştirmek için direktifin seçicisini bir girdiye ekleyin.

<docs-code header="actor-form-template.component.html (unique-unambiguous-role-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" region="role-input"/>

### Asenkron doğrulayıcıların performansını optimize etme

Varsayılan olarak, tüm doğrulayıcılar her form değeri değişikliğinden sonra çalışır.
Senkron doğrulayıcılarda, bu genellikle uygulama performansı üzerinde belirgin bir etkiye sahip değildir.
Ancak asenkron doğrulayıcılar yaygın olarak kontrolü doğrulamak için bir tür HTTP isteği yapar.
Her tuşa basıştan sonra bir HTTP isteği göndermek arka uç API'si üzerinde baskı oluşturabilir ve mümkünse bundan kaçınılmalıdır.

`updateOn` özelliğini `change` (varsayılan) yerine `submit` veya `blur` olarak değiştirerek form geçerliliği güncellemesini geciktirebilirsiniz.

Şablon odaklı formlarda, özelliği şablonda ayarlayın.

```html
<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}" />
```

Reaktif formlarda, özelliği `FormControl` örneğinde ayarlayın.

```ts
new FormControl('', {updateOn: 'blur'});
```

## Reaktif formlarda doğrulayıcıları dinamik olarak yönetme

Karmaşık reaktif formlarda, kullanıcı girdisine veya uygulama durumuna göre doğrulayıcı eklemeniz, kaldırmanız veya değiştirmeniz gerekebilir.
Angular, form kontrollerini yeniden oluşturmadan çalışma zamanında doğrulayıcıları yönetmek için `AbstractControl` üzerinde çeşitli metotlar sağlar.

### Doğrulayıcı ekleme ve kaldırma

[`addValidators`](api/forms/AbstractControl#addValidators) ve [`removeValidators`](api/forms/AbstractControl#removeValidators) metotları, bir kontrolün doğrulayıcılarını başlatma işleminden sonra değiştirmenize olanak tanır.

```ts
onCountryChange(country: string) {
    const postalCodeControl = this.profileForm.get('postalCode');

if (country === 'US') {
      // ABD posta kodları için doğrulayıcı ekle
      postalCodeControl.addValidators([Validators.required, Validators.pattern(/^\d{5}$/)]);
    } else {
      // ABD değilken doğrulayıcıları kaldır
      postalCodeControl.removeValidators([Validators.required]);
    }

postalCodeControl.updateValueAndValidity();
}
```

### Tüm doğrulayıcıları değiştirme

Bir kontroldeki mevcut tüm senkron doğrulayıcıları değiştirmek için [`setValidators`](api/forms/AbstractControl#setValidators), tüm doğrulayıcıları kaldırmak için ise [`clearValidators`](api/forms/AbstractControl#clearValidators) kullanın.

```ts
toggleStrictNameValidation(isStrict: boolean) {
  const nameControl = this.profileForm.get('name');

if (enable) {
    // Katı doğrulama kurallarını ayarla
    nameControl.setValidators([
      Validators.required,
      Validators.minLength(3),
      Validators.pattern(/^[a-zA-Z]+$/),
    ]);
  } else {
    // Tüm doğrulayıcıları temizle
    nameControl.clearValidators();
  }

nameControl.updateValueAndValidity();
}
```

Aynı desen, [`addAsyncValidators`](api/forms/AbstractControl#addAsyncValidators), [`removeAsyncValidators`](api/forms/AbstractControl#removeAsyncValidators), [`setAsyncValidators`](api/forms/AbstractControl#setAsyncValidators) ve [`clearAsyncValidators`](api/forms/AbstractControl#clearAsyncValidators) kullanılarak asenkron doğrulayıcılar için de geçerlidir.

### Doğrulama güncellemelerini tetikleme

Doğrulayıcıları değiştirdikten sonra, kontrolün doğrulama durumunu yeniden hesaplamak için [`updateValueAndValidity`](api/forms/AbstractControl#updateValueAndValidity) metodunu çağırın.
Bu metot, güncelleme davranışını kontrol etmek için seçenekler kabul eder.

```ts
// Kontrolü güncelle ve üst öğeyi bilgilendir
control.updateValueAndValidity();

// Yalnızca kontrolü güncelle, üst öğeyi bilgilendirme veya olay yayma
control.updateValueAndValidity({onlySelf: true, emitEvent: false});
```

## Yerel HTML form doğrulaması ile etkileşim

Angular varsayılan olarak kapsayan `<form>`'a `novalidate` niteliği ekleyerek [yerel HTML form doğrulamasını](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) devre dışı bırakır ve bu nitelikleri çerçevedeki doğrulayıcı fonksiyonlarla eşleştirmek için direktifler kullanır.
Angular tabanlı doğrulamayla **birlikte** yerel doğrulamayı kullanmak istiyorsanız, `ngNativeValidate` direktifiyle yeniden etkinleştirebilirsiniz.
Ayrıntılar için [API belgelerine](api/forms/NgForm#native-dom-validation-ui) bakın.
# Dinamik form'lar oluşturma

Anketler gibi birçok form, biçim ve amaç açısından birbirine çok benzer olabilir.
Bu tür formların farklı sürümlerini daha hızlı ve kolay oluşturmak için, iş nesnesi modelini tanımlayan meta verilere dayalı bir _dinamik form şablonu_ oluşturabilirsiniz.
Ardından, veri modelindeki değişikliklere göre yeni formları otomatik olarak oluşturmak için şablonu kullanın.

Bu teknik, içeriğinin hızla değişen iş ve düzenleyici gereksinimleri karşılamak için sık sık değişmesi gereken bir form türüne sahip olduğunuzda özellikle kullanışlıdır.
Tipik bir kullanım durumu ankettir.
Farklı bağlamlarda kullanıcılardan girdi almanız gerekebilir.
Kullanıcının gördüğü formların biçimi ve stili sabit kalmalı, ancak sormanız gereken asıl sorular bağlama göre değişir.

Bu eğitimde, temel bir anket sunan dinamik bir form oluşturacaksınız.
İş arayan kahramanlar için çevrimiçi bir uygulama oluşturursunuz.
Ajans sürekli olarak başvuru sürecini değiştirmektedir, ancak dinamik formu kullanarak uygulama kodunu değiştirmeden anında yeni formlar oluşturabilirsiniz.

Eğitim sizi aşağıdaki adımlardan geçirir:

1. Bir proje için reaktif formları etkinleştirin.
1. Form kontrollerini temsil edecek bir veri modeli oluşturun.
1. Modeli örnek verilerle doldurun.
1. Dinamik olarak form kontrolleri oluşturacak bir bileşen geliştirin.

Oluşturduğunuz form, kullanıcı deneyimini iyileştirmek için girdi doğrulaması ve stil kullanır.
Yalnızca tüm kullanıcı girdisi geçerli olduğunda etkinleştirilen bir Gönder düğmesine sahiptir ve geçersiz girdiyi renk kodlaması ve hata mesajlarıyla işaretler.

Temel sürüm, daha zengin bir soru çeşitliliğini, daha zarif oluşturmayı ve üstün kullanıcı deneyimini desteklemek için geliştirilebilir.

## Projeniz için reactive form'ları etkinleştirme

Dinamik formlar reaktif formlara dayanır.

Uygulamaya reaktif form direktiflerine erişim vermek için, `@angular/forms` paketinden `ReactiveFormsModule`'ü gerekli bileşenlere içe aktarın.
## Form nesne modeli oluşturma

Dinamik bir form, form işlevselliğinin gerektirdiği tüm senaryoları tanımlayabilen bir nesne modeli gerektirir.
Örnek kahraman uygulama formu bir dizi sorudur -- yani formdaki her kontrol bir soru sormalı ve bir cevap kabul etmelidir.

Bu tür form için veri modeli bir soruyu temsil etmelidir.
Örnek, modeldeki temel nesne olarak soruyu tanımlayan `DynamicFormQuestionComponent`'i içerir.

Aşağıdaki `QuestionBase`, formda soruyu ve cevabını temsil edebilecek bir kontrol kümesi için temel sınıftır.

<docs-code header="question-base.ts" path="adev/src/content/examples/dynamic-form/src/app/question-base.ts"/>

### Kontrol sınıflarını tanımlama

Bu temelden, örnek farklı kontrol türlerini temsil eden `TextboxQuestion` ve `DropdownQuestion` olmak üzere iki yeni sınıf türetir.
Bir sonraki adımda form şablonunu oluşturduğunuzda, uygun kontrolleri dinamik olarak oluşturmak için bu belirli soru türlerini örneklersiniz.

`TextboxQuestion` kontrol türü, formda bir `<input>` öğesi ile temsil edilir. Bir soru sunar ve kullanıcıların girdi yapmasına olanak tanır. Öğenin `type` niteliği, `options` argümanında belirtilen `type` alanına göre tanımlanır (örneğin `text`, `email`, `url`).

<docs-code header="question-textbox.ts" path="adev/src/content/examples/dynamic-form/src/app/question-textbox.ts"/>

`DropdownQuestion` kontrol türü, bir seçim kutusunda seçeneklerin bir listesini sunar.

<docs-code header="question-dropdown.ts" path="adev/src/content/examples/dynamic-form/src/app/question-dropdown.ts"/>

### Form gruplarını oluşturma

Dinamik bir form, form modeline dayalı olarak gruplandırılmış girdi kontrol kümeleri oluşturmak için bir hizmet kullanır.
Aşağıdaki `QuestionControlService`, soru modelinden meta verileri kullanan bir dizi `FormGroup` örneği toplar.
Varsayılan değerler ve doğrulama kuralları belirleyebilirsiniz.

<docs-code header="question-control.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question-control.service.ts"/>

## Dinamik form içeriklerini oluşturma

Dinamik formun kendisi, sonraki bir adımda eklediğiniz bir kapsayıcı bileşenle temsil edilir.
Her soru, `DynamicFormQuestionComponent`'in bir örneğiyle eşleşen bir `<app-question>` etiketi ile form bileşeninin şablonunda temsil edilir.

`DynamicFormQuestionComponent`, veri bağlı soru nesnesindeki değerlere dayalı olarak bireysel bir sorunun ayrıntılarını oluşturmaktan sorumludur.
Form, şablon HTML'sini altta yatan kontrol nesnelerine bağlamak için [`[formGroup]` direktifine](api/forms/FormGroupDirective 'API reference') dayanır.
`DynamicFormQuestionComponent`, soru modelinde tanımlanan kontrollerle doldurarak form grupları oluşturur, görüntüleme ve doğrulama kurallarını belirtir.
`DynamicFormQuestionComponent`'in amacı, modelinizde tanımlanan soru türlerini sunmaktır.
Bu noktada yalnızca iki soru türünüz var ancak çok daha fazlasını hayal edebilirsiniz.
Şablondaki `@switch` bloğu hangi soru türünün görüntüleneceğini belirler.
Switch, [`formControlName`](api/forms/FormControlName 'FormControlName directive API reference') ve [`formGroup`](api/forms/FormGroupDirective 'FormGroupDirective API reference') seçicilerine sahip direktifleri kullanır.
Her iki direktif de `ReactiveFormsModule`'da tanımlanmıştır.

### Veri sağlama

Bireysel bir form oluşturmak için belirli bir soru kümesi sağlamak üzere başka bir hizmete ihtiyaç vardır.
Bu alıştırma için, sabit kodlanmış örnek verilerden bu soru dizisini sağlamak üzere `QuestionService`'i oluşturursunuz.
Gerçek dünya uygulamasında, hizmet verileri bir arka uç sisteminden alabilir.
Ancak kilit nokta, kahraman iş başvurusu sorularını tamamen `QuestionService`'ten döndürülen nesneler aracılığıyla kontrol etmenizdir.
Gereksinimler değiştikçe anketi sürdürmek için, yalnızca `questions` dizisinden nesne eklemeniz, güncellemeniz ve kaldırmanız yeterlidir.

`QuestionService`, `input()` sorularına bağlı bir dizi biçiminde bir soru kümesi sağlar.

<docs-code header="question.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question.service.ts"/>

## Dinamik form şablonu oluşturma

`DynamicFormComponent` bileşeni, formun giriş noktası ve ana kapsayıcısıdır ve şablonda `<app-dynamic-form>` kullanılarak temsil edilir.

`DynamicFormComponent` bileşeni, her birini `DynamicFormQuestionComponent` ile eşleşen bir `<app-question>` öğesine bağlayarak soruların bir listesini sunar.
### Formu görüntüleme

Dinamik formun bir örneğini görüntülemek için, `AppComponent` kabuk şablonu `QuestionService` tarafından döndürülen `questions` dizisini form kapsayıcı bileşeni olan `<app-dynamic-form>`'a iletir.

<docs-code header="app.component.ts" path="adev/src/content/examples/dynamic-form/src/app/app.component.ts"/>

Model ve verinin bu şekilde ayrılması, _soru_ nesne modeliyle uyumlu olduğu sürece, bileşenleri herhangi bir anket türü için yeniden kullanmanıza olanak tanır.

### Geçerli verileri sağlama

Form şablonu, belirli sorular hakkında sabit kodlanmış varsayımlar yapmadan formu oluşturmak için meta verilerin dinamik veri bağlamasını kullanır.
Hem kontrol meta verilerini hem de doğrulama kriterlerini dinamik olarak ekler.

Geçerli girdi sağlamak için, _Save_ düğmesi form geçerli bir durumda olana kadar devre dışı bırakılır.
Form geçerli olduğunda, _Save_'e tıklayın ve uygulama geçerli form değerlerini JSON olarak oluşturur.

Aşağıdaki şekil son formu gösterir.

## Sonraki adımlar
Angular Router (`@angular/router`), Angular uygulamalarında navigasyonu yönetmek için kullanılan resmi kütüphane ve framework'ün temel bir parçasıdır. Angular CLI tarafından oluşturulan tüm projelerde varsayılan olarak dahil edilmiştir.

## Tek Sayfalık Uygulamada (SPA) yönlendirme neden gereklidir?

Web tarayıcınızda bir URL'ye gittiğinizde, tarayıcı normalde bir web sunucusuna ağ isteği gönderir ve döndürülen HTML sayfasını görüntüler. Bir bağlantıya tıklamak gibi farklı bir URL'ye gittiğinizde, tarayıcı başka bir ağ isteği gönderir ve tüm sayfayı yenisiyle değiştirir.

Tek sayfalık uygulama (SPA), tarayıcının yalnızca ilk sayfa olan `index.html` için web sunucusuna istek göndermesi bakımından farklıdır. Bundan sonra, istemci tarafındaki bir yönlendirici devreye girerek URL'ye göre hangi içeriğin görüntüleneceğini kontrol eder. Kullanıcı farklı bir URL'ye gittiğinde, yönlendirici tam sayfa yenilemesi tetiklemeden sayfanın içeriğini yerinde günceller.

## Angular yönlendirmeyi nasıl yönetir

Angular'da yönlendirme üç temel bölümden oluşur:

1. **Rotalar**, kullanıcı belirli bir URL'yi ziyaret ettiğinde hangi bileşenin görüntüleneceğini tanımlar.
2. **Outlet'ler**, şablonlarınızda aktif rotaya göre bileşenleri dinamik olarak yükleyen ve render eden yer tutuculardır.
3. **Bağlantılar**, kullanıcıların tam sayfa yenilemesi tetiklemeden uygulamanızdaki farklı rotalar arasında gezinmesini sağlar.

Buna ek olarak, Angular Yönlendirme kütüphanesi şu ek işlevleri de sunar:

- İç içe rotalar
- Programatik navigasyon
- Rota parametreleri, sorgular ve joker karakterler
- `ActivatedRoute` ile aktif rota bilgisi
- Görünüm geçiş efektleri
- Navigasyon koruyucuları

## Sonraki adımlar

[Angular router kullanarak rotaları nasıl tanımlayacağınızı](/guide/routing/define-routes) öğrenin.
# Route'ları Tanımlama

Rotalar, bir Angular uygulamasında navigasyonun temel yapı taşlarıdır.

## Route'lar nedir?

Angular'da bir **rota**, belirli bir URL yolu veya kalıbı için hangi bileşenin render edileceğini ve kullanıcı o URL'ye gittiğinde ne olacağına dair ek yapılandırma seçeneklerini tanımlayan bir nesnedir.

İşte bir rotanın temel örneği:

```ts
import {AdminPage} from './app-admin';

const adminPage = {
  path: 'admin',
  component: AdminPage,
};
```

Bu rota için, kullanıcı `/admin` yolunu ziyaret ettiğinde uygulama `AdminPage` bileşenini görüntüler.

### Uygulamanızda route'ları yönetme

Çoğu proje, rotaları dosya adında `routes` içeren ayrı bir dosyada tanımlar.

Bir rota koleksiyonu şöyle görünür:

```ts
import {Routes} from '@angular/router';
import {HomePage} from './home-page';
import {AdminPage} from './about-page';

export const routes: Routes = [
  {
    path: '',
    component: HomePage,
  },
  {
    path: 'admin',
    component: AdminPage,
  },
];
```

Tip: Angular CLI ile bir proje oluşturduysanız, rotalarınız `src/app/app.routes.ts` dosyasında tanımlanmıştır.

### Uygulamanıza Router ekleme

Angular CLI olmadan bir Angular uygulamasını başlatırken, `providers` dizisi içeren bir yapılandırma nesnesi geçirebilirsiniz.

`providers` dizisi içinde, rotalarınızla birlikte bir `provideRouter` fonksiyon çağrısı ekleyerek Angular yönlendiriciyi uygulamanıza ekleyebilirsiniz.

```ts
import {ApplicationConfig} from '@angular/core';
import {provideRouter} from '@angular/router';

import {routes} from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // ...
  ],
};
```

## Route URL Yolları

### Statik URL Yolları

Statik URL Yolları, dinamik parametrelere göre değişmeyen önceden tanımlanmış yollara sahip rotaları ifade eder. Bunlar, bir `path` dizesiyle tam olarak eşleşen ve sabit bir sonucu olan rotalardır.

Bunlara örnek olarak şunlar verilebilir:

- "/admin"
- "/blog"
- "/settings/account"

### Route Parametreleri ile URL Yolları Tanımlama

Parametreli URL'ler, aynı bileşene birden fazla URL'nin erişmesine izin verirken URL'deki parametrelere göre dinamik olarak veri görüntüleyen dinamik yollar tanımlamanıza olanak tanır.

Bu tür bir kalıbı, rotanızın `path` dizesine parametreler ekleyerek ve her parametreyi iki nokta üst üste (`:`) karakteriyle ön eklendirerek tanımlayabilirsiniz.

IMPORTANT: Parametreler, URL'nin [sorgu dizesindeki](https://en.wikipedia.org/wiki/Query_string) bilgilerden farklıdır.
[Bu kılavuzda Angular'daki sorgu parametreleri](/guide/routing/read-route-state#sorgu-parametreleri) hakkında daha fazla bilgi edinin.

Aşağıdaki örnek, URL aracılığıyla geçirilen kullanıcı kimliğine göre bir kullanıcı profili bileşeni görüntüler.

```ts
import {Routes} from '@angular/router';
import {UserProfile} from './user-profile/user-profile';

const routes: Routes = [{path: 'user/:id', component: UserProfile}];
```

Bu örnekte, `/user/leeroy` ve `/user/jenkins` gibi URL'ler `UserProfile` bileşenini render eder. Bu bileşen daha sonra `id` parametresini okuyabilir ve veri çekme gibi ek işlemler gerçekleştirmek için kullanabilir. Rota parametrelerini okuma hakkında ayrıntılar için [rota durumunu okuma kılavuzuna](/guide/routing/read-route-state) bakın.

Geçerli rota parametre adları bir harfle (a-z, A-Z) başlamalıdır ve yalnızca şunları içerebilir:

- Harfler (a-z, A-Z)
- Sayılar (0-9)
- Alt çizgi (\_)
- Tire (-)

Birden fazla parametreye sahip yollar da tanımlayabilirsiniz:

```ts
import {Routes} from '@angular/router';
import {UserProfile} from './user-profile';
import {SocialMediaFeed} from './social-media-feed';

const routes: Routes = [
  {path: 'user/:id/:social-media', component: SocialMediaFeed},
  {path: 'user/:id/', component: UserProfile},
];
```

Bu yeni yol ile kullanıcılar `/user/leeroy/youtube` ve `/user/leeroy/bluesky` adreslerini ziyaret edebilir ve leeroy kullanıcısı için parametreye göre ilgili sosyal medya akışlarını görebilir.

Rota parametrelerini okuma hakkında ayrıntılar için [Rota durumunu okuma](/guide/routing/read-route-state) bölümüne bakın.

### Joker Karakterler

Belirli bir yol için tüm rotaları yakalamanız gerektiğinde, çözüm çift yıldız (`**`) ile tanımlanan joker rotalardır.

Yaygın bir örnek, Sayfa Bulunamadı bileşeni tanımlamaktır.

```ts
import {Home} from './home/home';
import {UserProfile} from './user-profile';
import {NotFound} from './not-found';

const routes: Routes = [
  {path: 'home', component: Home},
  {path: 'user/:id', component: UserProfile},
  {path: '**', component: NotFound},
];
```

Bu rota dizisinde, kullanıcı `home` ve `user/:id` dışında herhangi bir yolu ziyaret ettiğinde uygulama `NotFound` bileşenini görüntüler.

Tip: Joker rotalar genellikle rota dizisinin sonuna yerleştirilir.

## Angular URL'leri nasıl eşleştirir

Rotaları tanımlarken sıra önemlidir çünkü Angular ilk eşleşme kazanır stratejisi kullanır. Bu, Angular bir URL'yi bir rota `path` ile eşleştirdiğinde, daha fazla rotayı kontrol etmeyi bıraktığı anlamına gelir. Sonuç olarak, daha spesifik rotaları her zaman daha az spesifik rotalardan önce koyun.

Aşağıdaki örnek, en spesifikten en az spesifike doğru tanımlanmış rotaları gösterir:

```ts
const routes: Routes = [
  {path: '', component: Home}, // Boş yol
  {path: 'users/new', component: NewUser}, // Statik, en spesifik
  {path: 'users/:id', component: UserDetail}, // Dinamik
  {path: 'users', component: Users}, // Statik, daha az spesifik
  {path: '**', component: NotFound}, // Joker karakter - her zaman en sonda
];
```

Bir kullanıcı `/users/new` adresini ziyaret ederse, Angular yönlendirici aşağıdaki adımları izler:

1. `''` kontrol edilir - eşleşmiyor
1. `users/new` kontrol edilir - eşleşti! Burada durur
1. `users/:id`'ye hiçbir zaman ulaşılmaz, eşleşebilecek olsa bile
1. `users`'a hiçbir zaman ulaşılmaz
1. `**`'a hiçbir zaman ulaşılmaz

## Redirect'ler

Bir bileşen render etmek yerine başka bir rotaya yönlendiren bir rota tanımlayabilirsiniz:

```ts
import {Blog} from './home/blog';

const routes: Routes = [
  {
    path: 'articles',
    redirectTo: '/blog',
  },
  {
    path: 'blog',
    component: Blog,
  },
];
```

Bir rotayı değiştirir veya kaldırırsanız, bazı kullanıcılar hâlâ o rotaya ait eski bağlantılara veya yer imlerine tıklayabilir. "Bulunamadı" sayfası yerine bu kullanıcıları uygun bir alternatif rotaya yönlendirmek için bir yeniden yönlendirme ekleyebilirsiniz.

## Sayfa başlıkları

Her rota ile bir **başlık** ilişkilendirebilirsiniz. Angular, bir rota etkinleştirildiğinde [sayfa başlığını](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) otomatik olarak günceller. Erişilebilir bir deneyim oluşturmak için gerekli olan uygun sayfa başlıklarını uygulamanız için her zaman tanımlayın.

```ts
import {Routes} from '@angular/router';
import {Home} from './home';
import {About} from './about';
import {Products} from './products';

const routes: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home Page',
  },
  {
    path: 'about',
    component: About,
    title: 'About Us',
  },
];
```

Sayfa `title` özelliği, [`ResolveFn`](/api/router/ResolveFn) kullanılarak dinamik olarak bir resolver fonksiyonuna ayarlanabilir.

```ts
const titleResolver: ResolveFn<string> = (route) => route.queryParams['id'];
const routes: Routes = [
  ...{
    path: 'products',
    component: Products,
    title: titleResolver,
  },
];
```

Rota başlıkları, [`TitleStrategy`](/api/router/TitleStrategy) soyut sınıfını genişleten bir servis aracılığıyla da ayarlanabilir. Varsayılan olarak Angular, [`DefaultTitleStrategy`](/api/router/DefaultTitleStrategy) kullanır.

### Sayfa başlıkları için TitleStrategy kullanma

Belge başlığının nasıl oluşturulduğu üzerinde merkezi kontrol gerektiren gelişmiş senaryolarda, bir `TitleStrategy` uygulayın.

`TitleStrategy`, Angular tarafından kullanılan varsayılan başlık stratejisini geçersiz kılmak için sağlayabileceğiniz bir token'dır. Uygulama son eki ekleme, breadcrumb'lardan başlık biçimlendirme veya rota verilerinden dinamik olarak başlık oluşturma gibi kuralları uygulamak için özel bir `TitleStrategy` sağlayabilirsiniz.

```ts
import {inject, Injectable} from '@angular/core';
import {Title} from '@angular/platform-browser';
import {TitleStrategy, RouterStateSnapshot} from '@angular/router';

@Injectable()
export class AppTitleStrategy extends TitleStrategy {
  private readonly title = inject(Title);

updateTitle(snapshot: RouterStateSnapshot): void {
    // PageTitle, ayarlanmışsa rotanın "Title" değerine eşittir
    // Ayarlanmamışsa index.html'deki "title" kullanılır
    const pageTitle = this.buildTitle(snapshot) || this.title.getTitle();
    this.title.setTitle(`MyAwesomeApp - ${pageTitle}`);
  }
}
```

Özel stratejiyi kullanmak için, uygulama düzeyinde `TitleStrategy` token'ı ile sağlayın:

```ts
import {provideRouter, TitleStrategy} from '@angular/router';
import {AppTitleStrategy} from './app-title.strategy';

export const appConfig = {
  providers: [provideRouter(routes), {provide: TitleStrategy, useClass: AppTitleStrategy}],
};
```

## Bağımlılık enjeksiyonu için rota düzeyinde sağlayıcılar

Her rotanın, [bağımlılık enjeksiyonu](/guide/di) aracılığıyla o rotanın içeriğine bağımlılıklar sağlamanıza olanak tanıyan bir `providers` özelliği vardır.

Bunun yararlı olabileceği yaygın senaryolar arasında, kullanıcının yönetici olup olmamasına göre farklı servislere sahip uygulamalar yer alır.

```ts
export const ROUTES: Route[] = [
  {
    path: 'admin',
    providers: [AdminService, {provide: ADMIN_API_KEY, useValue: '12345'}],
    children: [
      {path: 'users', component: AdminUsers},
      {path: 'teams', component: AdminTeams},
    ],
  },
  // ... ADMIN_API_KEY veya AdminService'e erişimi olmayan
  //     diğer uygulama route'ları.
];
```

Bu kod örneğinde, `admin` yolu yalnızca kendi bölümündeki alt rotalara sunulan korumalı bir `ADMIN_API_KEY` veri özelliği içerir. Sonuç olarak, başka hiçbir yol `ADMIN_API_KEY` aracılığıyla sağlanan verilere erişemez.

Sağlayıcılar ve Angular'da enjeksiyon hakkında daha fazla bilgi için [Bağımlılık enjeksiyonu kılavuzuna](/guide/di) bakın.

## Route'larla veri ilişkilendirme

Rota verileri, rotalara ek bilgi eklemenizi sağlar. Bu verilere göre bileşenlerin nasıl davranacağını yapılandırabilirsiniz.

Rota verileriyle çalışmanın iki yolu vardır: sabit kalan statik veriler ve çalışma zamanı koşullarına göre değişebilen dinamik veriler.

### Statik veri

Rota bazlı meta verileri (örneğin analitik izleme, izinler vb.) merkezileştirmek amacıyla `data` özelliği aracılığıyla bir rotayla rastgele statik veriler ilişkilendirebilirsiniz:

```ts
import {Routes} from '@angular/router';
import {Home} from './home';
import {About} from './about';
import {Products} from './products';

const routes: Routes = [
  {
    path: 'about',
    component: About,
    data: {analyticsId: '456'},
  },
  {
    path: '',
    component: Home,
    data: {analyticsId: '123'},
  },
];
```

Bu kod örneğinde, ana sayfa ve hakkında sayfası, ilgili bileşenlerinde sayfa izleme analitiği için kullanılacak belirli `analyticsId` ile yapılandırılmıştır.

Bu statik verileri `ActivatedRoute` enjekte ederek okuyabilirsiniz. Ayrıntılar için [Rota durumunu okuma](/guide/routing/read-route-state) bölümüne bakın.

### Veri çözücüler ile dinamik veri

Bir rotaya dinamik veri sağlamanız gerektiğinde, [rota veri çözücüleri kılavuzuna](/guide/routing/data-resolvers) göz atın.

## İç İçe Route'lar

İç içe rotalar, alt rotalar olarak da bilinir ve URL'ye göre değişen bir alt görünüme sahip bir bileşen için daha karmaşık navigasyon rotalarını yönetmek için kullanılan yaygın bir tekniktir.

`children` özelliği ile herhangi bir rota tanımına alt rotalar ekleyebilirsiniz:

```ts
const routes: Routes = [
  {
    path: 'product/:id',
    component: Product,
    children: [
      {
        path: 'info',
        component: ProductInfo,
      },
      {
        path: 'reviews',
        component: ProductReviews,
      },
    ],
  },
];
```

Yukarıdaki örnek, bir ürün sayfası için kullanıcının URL'ye göre ürün bilgisi veya yorumların görüntülenip görüntülenmeyeceğini değiştirmesine olanak tanıyan bir rota tanımlar.

`children` özelliği, bir `Route` nesneleri dizisi kabul eder.

Alt rotaları görüntülemek için üst bileşen (yukarıdaki örnekte `Product`) kendi `<router-outlet>` öğesini içerir.

```html

<article>
  <h1>Product {{ id }}</h1>
  <router-outlet />
</article>
```

Yapılandırmaya alt rotalar ekledikten ve bileşene bir `<router-outlet>` ekledikten sonra, alt rotalarla eşleşen URL'ler arasında navigasyon yalnızca iç içe outlet'i günceller.

## Sonraki adımlar
# Outlet'ler ile Route'ları Gösterme

`RouterOutlet` direktifi, yönlendiricinin geçerli URL için bileşeni render etmesi gereken konumu işaretleyen bir yer tutucudur.

```html
<app-header />

<router-outlet />
<app-footer />
```

```ts
import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}
```

Bu örnekte, bir uygulama aşağıdaki rotalar tanımlanmışsa:

```ts
import {Routes} from '@angular/router';
import {Home} from './home';
import {Products} from './products';

const routes: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home Page',
  },
  {
    path: 'products',
    component: Products,
    title: 'Our Products',
  },
];
```

Kullanıcı `/products` adresini ziyaret ettiğinde, Angular şunu render eder:

```html
<app-header />
<app-products />
<app-footer />
```

Kullanıcı ana sayfaya geri dönerse, Angular şunu render eder:

```html
<app-header />
<app-home />
<app-footer />
```

Bir rota görüntülenirken, `<router-outlet>` öğesi gelecekteki navigasyonlar için bir referans noktası olarak DOM'da mevcut kalır. Angular, yönlendirilen içeriği outlet öğesinin hemen sonrasına kardeş eleman olarak ekler.

```html

<app-header />
<router-outlet />
<app-footer />
```

```html

<app-header />
<router-outlet />
<app-admin-page />
<app-footer />
```

## Alt route'lar ile iç içe yönlendirme

Uygulamanız daha karmaşık hale geldikçe, kök bileşeniniz dışında bir bileşene göre rotalar oluşturmak isteyebilirsiniz. Bu, URL değiştiğinde kullanıcıların tüm sayfanın yenilendiğini hissetmesi yerine yalnızca uygulamanın bir bölümünün değiştiği deneyimler oluşturmanıza olanak tanır.

Bu tür iç içe rotalara alt rotalar denir. Bu, uygulamanıza AppComponent'teki `<router-outlet>` öğesine ek olarak ikinci bir `<router-outlet>` eklediğiniz anlamına gelir.

Bu örnekte, `Settings` bileşeni kullanıcının seçimine göre istenen paneli görüntüler. Alt rotalarda dikkat edeceğiniz benzersiz şeylerden biri, bileşenin genellikle kendi `<nav>` ve `<router-outlet>` öğelerine sahip olmasıdır.

```html
<h1>Settings</h1>
<nav>
  <ul>
    <li><a routerLink="profile">Profile</a></li>
    <li><a routerLink="security">Security</a></li>
  </ul>
</nav>
<router-outlet />
```

Alt rota diğer herhangi bir rota gibidir; hem bir `path` hem de bir `component` gerektirir. Tek fark, alt rotaları üst rota içindeki bir children dizisine yerleştirmenizdir.

```ts
const routes: Routes = [
  {
    path: 'settings',
    component: Settings, // şablonunda <router-outlet> bulunan bileşen
    children: [
      {
        path: 'profile', // alt rota yolu
        component: Profile, // yönlendiricinin render ettiği alt rota bileşeni
      },
      {
        path: 'security',
        component: Security, // yönlendiricinin render ettiği başka bir alt rota bileşeni
      },
    ],
  },
];
```

Hem `routes` hem de `<router-outlet>` doğru şekilde yapılandırıldığında, uygulamanız artık iç içe rotaları kullanıyor!

## Adlandırılmış outlet'ler ile ikincil route'lar

Sayfaların birden fazla outlet'i olabilir — hangi içeriğin hangi outlet'e ait olduğunu belirtmek için her outlet'e bir ad atayabilirsiniz.

```html
<app-header />
<router-outlet />
<router-outlet name="read-more" />
<router-outlet name="additional-actions" />
<app-footer />
```

Her outlet'in benzersiz bir adı olmalıdır. Ad dinamik olarak ayarlanamaz veya değiştirilemez. Varsayılan olarak ad `'primary'` şeklindedir.

Angular, outlet'in adını her rotada tanımlanan `outlet` özelliği ile eşleştirir:

```ts
{
  path: 'user/:id',
  component: UserDetails,
  outlet: 'additional-actions'
}
```

## Outlet yaşam döngüsü olayları

Bir router outlet'in yayınlayabileceği dört yaşam döngüsü olayı vardır:

| Olay         | Açıklama                                                          |
| ------------ | ----------------------------------------------------------------- |
| `activate`   | Yeni bir bileşen oluşturulduğunda                                 |
| `deactivate` | Bir bileşen yok edildiğinde                                       |
| `attach`     | `RouteReuseStrategy` outlet'e alt ağacı eklemesini söylediğinde   |
| `detach`     | `RouteReuseStrategy` outlet'ten alt ağacı ayırmasını söylediğinde |

Standart olay bağlama söz dizimi ile olay dinleyicileri ekleyebilirsiniz:

```html
<router-outlet
  (activate)="onActivate($event)"
  (deactivate)="onDeactivate($event)"
  (attach)="onAttach($event)"
  (detach)="onDetach($event)"
/>
```

Daha fazla bilgi edinmek istiyorsanız [RouterOutlet için API dokümanlarına](/api/router/RouterOutlet?tab=api) göz atın.

## Yönlendirilen bileşenlere bağlamsal veri aktarma

Yönlendirilen bileşenlere bağlamsal veri aktarmak genellikle global durum veya karmaşık rota yapılandırmaları gerektirir. Bunu kolaylaştırmak için her `RouterOutlet` bir `routerOutletData` girişini destekler. Yönlendirilen bileşenler ve alt bileşenleri, `ROUTER_OUTLET_DATA` enjeksiyon token'ını kullanarak bu veriyi sinyal olarak okuyabilir ve böylece rota tanımlarını değiştirmeden outlet'e özgü yapılandırma yapılabilir.

```typescript
import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-dashboard',
  imports: [RouterOutlet],
  template: `
    <h2>Dashboard</h2>
    <router-outlet [routerOutletData]="{layout: 'sidebar'}" />
  `,
})
export class Dashboard {}
```

Yönlendirilen bileşen, `ROUTER_OUTLET_DATA` kullanarak sağlanan outlet verisini enjekte edebilir:

```typescript
import {Component, inject} from '@angular/core';
import {ROUTER_OUTLET_DATA} from '@angular/router';

@Component({
  selector: 'app-stats',
  template: `<p>Stats view (layout: {{ outletData().layout }})</p>`,
})
export class Stats {
  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{layout: string}>;
}
```

Angular, `Stats` bileşenini o outlet'te etkinleştirdiğinde, enjekte edilen veri olarak `{ layout: 'sidebar' }` alır.

NOTE: `routerOutletData` girişi ayarlanmadığında, enjekte edilen değer varsayılan olarak null'dur.

---

## Sonraki adımlar

Angular Router ile [rotalara nasıl navigasyon yapılacağını](/guide/routing/navigate-to-routes) öğrenin.
# Route'lara Navigasyon

RouterLink direktifi, Angular'ın navigasyona bildirimsel yaklaşımıdır. Angular'ın yönlendirme sistemiyle sorunsuz bir şekilde entegre olan standart bağlantı öğelerini (`<a>`) kullanmanıza olanak tanır.

## RouterLink nasıl kullanılır

Bir `href` özniteliğine sahip normal bağlantı öğeleri `<a>` kullanmak yerine, Angular yönlendirmesinden yararlanmak için uygun yol ile bir RouterLink direktifi eklersiniz.

```typescript
import {RouterLink} from '@angular/router';

@Component({
  template: `
    <nav>
      <a routerLink="/user-profile">User profile</a>
      <a routerLink="/settings">Settings</a>
    </nav>
  `,
  imports: [RouterLink],
  ...
})
export class App {}
```

### Mutlak veya göreceli bağlantılar kullanma

Angular yönlendirmesinde **göreceli URL'ler**, geçerli rotanın konumuna göre navigasyon yolları tanımlamanıza olanak tanır. Bunun aksine **mutlak URL'ler**, protokolü (örn. `http://`) ve **kök alan adını** (örn. `google.com`) içeren tam yolu içerir.

```html

<a href="https://www.angular.dev/essentials">Angular Essentials Guide</a>

<a href="/essentials">Angular Essentials Guide</a>
```

Bu örnekte, ilk örnek essentials sayfası için protokolü (yani `https://`) ve kök alan adını (yani `angular.dev`) açıkça tanımlanmış tam yolu içerir. Buna karşılık, ikinci örnek kullanıcının zaten `/essentials` için doğru kök alan adında olduğunu varsayar.

Genel olarak, göreceli URL'ler yönlendirme hiyerarşisi içindeki mutlak konumlarını bilmeleri gerekmediğinden uygulamalar arasında daha sürdürülebilir oldukları için tercih edilir.

### Göreceli URL'ler nasıl çalışır

Angular yönlendirme, göreceli URL'leri tanımlamak için iki söz dizimi sunar: dizeler ve diziler.

```html

<a routerLink="dashboard">Dashboard</a>
<a [routerLink]="['dashboard']">Dashboard</a>
```

HELPFUL: Bir dize geçirmek, göreceli URL'leri tanımlamanın en yaygın yoludur.

Göreceli bir URL'de dinamik parametreler tanımlamanız gerektiğinde, dizi söz dizimini kullanın:

```html
<a [routerLink]="['user', currentUserId]">Current User</a>
```

Ayrıca Angular yönlendirme, göreceli yolun eğik çizgi (`/`) ile ön eklenip eklenmemesine göre yolun geçerli URL'ye mi yoksa kök alan adına mı göreceli olmasını istediğinizi belirlemenize olanak tanır.

Örneğin, kullanıcı `example.com/settings` adresindeyse, çeşitli senaryolar için farklı göreceli yollar şöyle tanımlanabilir:

```html

<a routerLink="notifications">Notifications</a>
<a routerLink="/settings/notifications">Notifications</a>

<a routerLink="/team/123/user/456">User 456</a>
<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>
```

## Route'lara programatik navigasyon

`RouterLink` şablonlarda bildirimsel navigasyonu yönetirken, Angular mantık, kullanıcı eylemleri veya uygulama durumuna göre gezinmeniz gereken senaryolar için programatik navigasyon sağlar. `Router` enjekte ederek, rotalara dinamik olarak gezinebilir, parametreler geçirebilir ve TypeScript kodunuzda navigasyon davranışını kontrol edebilirsiniz.

### `router.navigate()`

Bir URL yol dizisi belirleyerek rotalar arasında programatik olarak gezinmek için `router.navigate()` yöntemini kullanabilirsiniz.

```typescript
import {Router} from '@angular/router';

@Component({
  selector: 'app-dashboard',
  template: ` <button (click)="navigateToProfile()">View Profile</button> `,
})
export class AppDashboard {
  private router = inject(Router);

navigateToProfile() {
    // Standart navigasyon
    this.router.navigate(['/profile']);

// Route parametreleri ile
    this.router.navigate(['/users', userId]);

// Sorgu parametreleri ile
    this.router.navigate(['/search'], {
      queryParams: {category: 'books', sort: 'price'},
    });

// Matris parametreleri ile
    this.router.navigate(['/products', {featured: true, onSale: true}]);
  }
}
```

`router.navigate()` hem basit hem de karmaşık yönlendirme senaryolarını destekler ve rota parametreleri, [sorgu parametreleri](/guide/routing/read-route-state#sorgu-parametreleri) geçirmenize ve navigasyon davranışını kontrol etmenize olanak tanır.

Ayrıca `relativeTo` seçeneğini kullanarak yönlendirme ağacındaki bileşeninizin konumuna göre dinamik navigasyon yolları oluşturabilirsiniz.

```typescript
import {Router, ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-user-detail',
  template: `
    <button (click)="navigateToEdit()">Edit User</button>
    <button (click)="navigateToParent()">Back to List</button>
  `,
})
export class UserDetail {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

// Kardeş rotaya navigasyon
  navigateToEdit() {
    // Kaynak: /users/123
    // Hedef:  /users/123/edit
    this.router.navigate(['edit'], {relativeTo: this.route});
  }

// Üst rotaya navigasyon
  navigateToParent() {
    // Kaynak: /users/123
    // Hedef:  /users
    this.router.navigate(['..'], {relativeTo: this.route});
  }

navigateToList() {
    // Angular, komutlar dizisini mevcut rotaya göre tek bir navigasyon yolu olarak çözümler.
    // Kaynak: /users/123
    // Sonuç: /users/list
    this.router.navigate(['..', 'list'], {relativeTo: this.route});
  }
}
```

Birden fazla seviye yukarı navigasyon yaparken, tüm `..` segmentleri komutlar dizisinin **ilk elemanında** olmalıdır. Router, `..` ifadesini yalnızca ilk komut dizesinden ayrıştırır; sonraki dizi elemanları birebir yol segmentleri olarak ele alınır.

```typescript
{prefer}
// Kaynak: /team/123/users/456
// Sonuç: /team/123/settings
this.router.navigate(['../../settings'], {relativeTo: this.route});
```

`relativeTo` kullanırken, ilk komutun başına asla `/` koymayın. Başta yer alan bir `/`, navigasyonu mutlak hale getirir ve `relativeTo` tamamen göz ardı edilir.

```typescript
{prefer}
// Kaynak: /team/123/users/456
// Sonuç: /team/123/users/456/edit
this.router.navigate(['edit'], {relativeTo: this.route});
```

```typescript
{avoid}
// Kaynak: /team/123/users/456
// Baştaki '/' mutlak navigasyona neden olur — relativeTo göz ardı edilir
// Sonuç: /edit
this.router.navigate(['/edit'], {relativeTo: this.route});
```

### `router.navigateByUrl()`

`router.navigateByUrl()` yöntemi, dizi segmentleri yerine URL yol dizeleri kullanarak programatik olarak gezinmenin doğrudan bir yolunu sağlar. Bu yöntem, tam bir URL yolunuz olduğunda ve mutlak navigasyon yapmanız gerektiğinde, özellikle harici olarak sağlanan URL'ler veya derin bağlantı senaryolarıyla çalışırken idealdir.

```ts
// Standart rota navigasyonu
router.navigateByUrl('/products');

// İç içe rotaya navigasyon
router.navigateByUrl('/products/featured');

// Parametreler ve fragment ile tam URL
router.navigateByUrl('/products/123?view=details#reviews');

// Sorgu parametreleri ile navigasyon
router.navigateByUrl('/search?category=books&sortBy=price');

// Matris parametreleri ile
router.navigateByUrl('/sales-awesome;isOffer=true;showModal=false');
```

Geçerli URL'yi geçmişte değiştirmeniz gerektiğinde, `navigateByUrl` bir `replaceUrl` seçeneğine sahip yapılandırma nesnesi de kabul eder.

```ts
// Geçerli URL'yi geçmişte değiştir
router.navigateByUrl('/checkout', {
  replaceUrl: true,
});
```

### Adres çubuğunda farklı bir URL görüntüleme

Tarayıcının adres çubuğunda, rota eşleştirmesi için kullanılandan farklı bir URL görüntülemek için `navigateByUrl`'ye bir browserUrl seçeneği geçirebilirsiniz.

Bu, bir kullanıcıyı hata sayfası gibi farklı bir rotaya yönlendirmek istediğinizde, kullanıcının başlangıçta ziyaret etmeye çalıştığı URL'yi değiştirmeden kullanışlıdır.

```ts
router.navigateByUrl('/not-found', {browserUrl: '/products/missing-item'});
```

Angular `/not-found` rotasına navigasyon yapar ve render eder, ancak tarayıcı adres çubuğu `/products/missing-item` gösterir.

NOTE: `browserUrl` yalnızca tarayıcının adres çubuğunda görünen şeyi etkiler.

## RouterLink ile tarayıcı URL'sini özelleştirme

`RouterLink` direktifi, bir bağlantıya tıklandığında tarayıcının adres çubuğunda görüntülenen URL'yi, Angular'ın navigasyon yaptığı rotadan bağımsız olarak kontrol etmenize olanak tanıyan bir `browserUrl` girişini de destekler.

```html

<a [routerLink]="['/dashboard']" [browserUrl]="'/home'">Go to Dashboard</a>
```

Daha dinamik kullanım durumları için bir `UrlTree` de bağlayabilirsiniz:

```typescript
import {Component, inject} from '@angular/core';
import {Router, RouterLink, UrlTree} from '@angular/router';

@Component({
  template: `
    <a [routerLink]="['/products', product.id]" [browserUrl]="displayUrl">
      {{ product.name }}
    </a>
  `,
  imports: [RouterLink],
})
export class ProductList {
  private router = inject(Router);

product = {id: 42, name: 'Widget'};

// Adres çubuğunda görüntülenecek bir UrlTree oluştur
  displayUrl: UrlTree = this.router.createUrlTree(['/products', 'widget']);
}
```

## Sonraki adımlar

Duyarlı ve bağlama duyarlı bileşenler oluşturmak için [rota durumunu nasıl okuyacağınızı](/guide/routing/read-route-state) öğrenin.
# Route Durumunu Okuma

Angular Router, duyarlı ve bağlama duyarlı bileşenler oluşturmak için bir rotayla ilişkili bilgileri okumanıza ve kullanmanıza olanak tanır.

## ActivatedRoute ile geçerli rota hakkında bilgi alma

`ActivatedRoute`, `@angular/router`'dan gelen ve geçerli rotayla ilişkili tüm bilgileri sağlayan bir servistir.

```typescript
import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-product',
})
export class Product {
  private activatedRoute = inject(ActivatedRoute);

constructor() {
    console.log(this.activatedRoute);
  }
}
```

`ActivatedRoute`, rota hakkında farklı bilgiler sağlayabilir. Bazı yaygın özellikler şunlardır:

| Özellik       | Ayrıntılar                                                                                                            |
| :------------ | :-------------------------------------------------------------------------------------------------------------------- |
| `url`         | Rota yolunun her bir parçası için dize dizisi olarak temsil edilen, rota yollarının bir `Observable`'ıdır.            |
| `data`        | Rota için sağlanan `data` nesnesini içeren bir `Observable`. Ayrıca resolve guard'dan çözümlenen değerleri de içerir. |
| `params`      | Rotaya özgü zorunlu ve isteğe bağlı parametreleri içeren bir `Observable`.                                            |
| `queryParams` | Tüm rotalar için kullanılabilen sorgu parametrelerini içeren bir `Observable`.                                        |

Rotada erişebileceğiniz şeylerin tam listesi için [`ActivatedRoute` API dokümanlarına](/api/router/ActivatedRoute) göz atın.

## Route anlık görüntülerini anlama

Sayfa navigasyonları zaman içindeki olaylardır ve belirli bir zamanda yönlendirici durumuna bir rota anlık görüntüsü alarak erişebilirsiniz.

Rota anlık görüntüleri, parametreleri, verileri ve alt rotaları dahil olmak üzere rota hakkında temel bilgiler içerir. Ayrıca anlık görüntüler statiktir ve gelecekteki değişiklikleri yansıtmaz.

İşte bir rota anlık görüntüsüne nasıl erişeceğinize dair bir örnek:

```typescript
import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';

@Component({
  /*...*/
})
export class UserProfile {
  readonly userId: string;
  private route = inject(ActivatedRoute);

constructor() {
    // Örnek URL: https://www.angular.dev/users/123?role=admin&status=active#contact

// Anlık görüntüden rota parametrelerine erişim
    this.userId = this.route.snapshot.paramMap.get('id');

// Birden fazla rota öğesine erişim
    const snapshot = this.route.snapshot;
    console.log({
      url: snapshot.url, // https://www.angular.dev
      // Rota parametreleri nesnesi: {id: '123'}
      params: snapshot.params,
      // Sorgu parametreleri nesnesi: {role: 'admin', status: 'active'}
      queryParams: snapshot.queryParams, // Sorgu parametreleri
    });
  }
}
```

Erişebileceğiniz tüm özelliklerin tam listesi için [`ActivatedRoute` API dokümanlarına](/api/router/ActivatedRoute) ve [`ActivatedRouteSnapshot` API dokümanlarına](/api/router/ActivatedRouteSnapshot) göz atın.

## Bir route üzerindeki parametreleri okuma

Geliştiricilerin bir rotadan kullanabileceği iki tür parametre vardır: rota ve sorgu parametreleri.

### Route Parametreleri

Rota parametreleri, URL aracılığıyla bir bileşene veri aktarmanıza olanak tanır. Bu, URL'deki bir kullanıcı kimliği veya ürün kimliği gibi bir tanımlayıcıya göre belirli içerik görüntülemek istediğinizde kullanışlıdır.

Parametre adını iki nokta üst üste (`:`) ile ön ekleyerek [rota parametreleri tanımlayabilirsiniz](/guide/routing/define-routes#route-parametreleri-ile-url-yolları-tanımlama).

```typescript
import {Routes} from '@angular/router';
import {Product} from './product';

const routes: Routes = [{path: 'product/:id', component: Product}];
```

`route.params`'a abone olarak parametrelere erişebilirsiniz.

```typescript
import {Component, inject, signal} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-product-detail',
  template: `<h1>Product Details: {{ productId() }}</h1>`,
})
export class ProductDetail {
  productId = signal('');
  private activatedRoute = inject(ActivatedRoute);

constructor() {
    // Rota parametrelerine erişim
    this.activatedRoute.params.subscribe((params) => {
      this.productId.set(params['id']);
    });
  }
}
```

### Sorgu Parametreleri

[Sorgu parametreleri](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams), rota yapısını etkilemeden URL'ler aracılığıyla isteğe bağlı veri aktarmanın esnek bir yolunu sağlar. Rota parametrelerinin aksine, sorgu parametreleri navigasyon olayları arasında kalıcı olabilir ve filtreleme, sıralama, sayfalama ve diğer durumlu UI öğelerini yönetmek için mükemmeldir.

```typescript
// Tek parametre yapısı
// /products?category=electronics
router.navigate(['/products'], {
  queryParams: {category: 'electronics'},
});

// Birden fazla parametre
// /products?category=electronics&sort=price&page=1
router.navigate(['/products'], {
  queryParams: {
    category: 'electronics',
    sort: 'price',
    page: 1,
  },
});
```

`route.queryParams` ile sorgu parametrelerine erişebilirsiniz.

İşte bir ürün listesinin nasıl görüntüleneceğini etkileyen sorgu parametrelerini güncelleyen bir `ProductList` örneği:

```typescript
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'app-product-list',
  template: `
    <div>
      <select (change)="updateSort($event)">
        <option value="price">Price</option>
        <option value="name">Name</option>
      </select>
      
    </div>
  `,
})
export class ProductList {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

constructor() {
    // Sorgu parametrelerine reaktif olarak erişim
    this.route.queryParams.subscribe((params) => {
      const sort = params['sort'] || 'price';
      const page = Number(params['page']) || 1;
      this.loadProducts(sort, page);
    });
  }

updateSort(event: Event) {
    const sort = (event.target as HTMLSelectElement).value;
    // URL'yi yeni sorgu parametresi ile güncelle
    this.router.navigate([], {
      queryParams: {sort},
      queryParamsHandling: 'merge', // Diğer sorgu parametrelerini koru
    });
  }
}
```

Bu örnekte, kullanıcılar ürün listesini ada veya fiyata göre sıralamak için bir select öğesi kullanabilir. İlişkili değişiklik işleyicisi URL'nin sorgu parametrelerini günceller, bu da güncellenmiş sorgu parametrelerini okuyabilen ve ürün listesini güncelleyebilen bir değişiklik olayını tetikler.

Daha fazla bilgi için [QueryParamsHandling hakkındaki resmi dokümanlara](/api/router/QueryParamsHandling) göz atın.

### Matris Parametreleri

Matris parametreleri, tüm rotaya uygulanmak yerine belirli bir URL segmentine ait olan isteğe bağlı parametrelerdir. Bir `?` sonrasında görünen ve genel olarak uygulanan sorgu parametrelerinin aksine, matris parametreleri noktalı virgül (`;`) kullanır ve bireysel yol segmentlerine kapsamlandırılmıştır.

Matris parametreleri, rota tanımını veya eşleştirme davranışını etkilemeden belirli bir rota segmentine yardımcı veri aktarmanız gerektiğinde kullanışlıdır. Sorgu parametreleri gibi, rota yapılandırmanızda tanımlanmaları gerekmez.

```ts
// URL formatı: /path;key=value
// Birden fazla parametre: /path;key1=value1;key2=value2

// Matris parametreleri ile navigasyon
this.router.navigate(['/awesome-products', {view: 'grid', filter: 'new'}]);
// Sonuç URL: /awesome-products;view=grid;filter=new
```

**ActivatedRoute Kullanarak**

```ts
import {Component, inject} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component(/* ... */)
export class AwesomeProducts {
  private route = inject(ActivatedRoute);

constructor() {
    // Matris parametrelerine params aracılığıyla erişim
    this.route.params.subscribe((params) => {
      const view = params['view']; // e.g., 'grid'
      const filter = params['filter']; // e.g., 'new'
    });
  }
}
```

NOTE: `ActivatedRoute` kullanmaya alternatif olarak, `withComponentInputBinding` kullanıldığında matris parametreleri bileşen girişlerine de bağlanır.

## RouterLinkActive ile aktif geçerli route'u tespit etme

Geçerli aktif rotaya göre navigasyon öğelerini dinamik olarak stilize etmek için `RouterLinkActive` direktifini kullanabilirsiniz. Bu, kullanıcıları aktif rotanın hangisi olduğu hakkında bilgilendirmek için navigasyon öğelerinde yaygın olarak kullanılır.

```html
<nav>
  <a
    class="button"
    routerLink="/about"
    routerLinkActive="active-button"
    ariaCurrentWhenActive="page"
  >
    About
  </a>
  |
  <a
    class="button"
    routerLink="/settings"
    routerLinkActive="active-button"
    ariaCurrentWhenActive="page"
  >
    Settings
  </a>
</nav>
```

Bu örnekte, Angular Router URL ilgili `routerLink` ile eşleştiğinde doğru bağlantı öğesine `active-button` sınıfını ve `ariaCurrentWhenActive` özelliğine `page` değerini uygular.

Öğeye birden fazla sınıf eklemeniz gerekiyorsa, boşlukla ayrılmış bir dize veya bir dizi kullanabilirsiniz:

```html

<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>

<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
```

routerLinkActive için bir değer belirttiğinizde, `ariaCurrentWhenActive` için de aynı değeri tanımlamış olursunuz. Bu, görme engelli kullanıcıların (uygulanan farklı stili algılayamayabilecek) aktif düğmeyi de tanımlayabilmesini sağlar.

aria için farklı bir değer tanımlamak istiyorsanız, `ariaCurrentWhenActive` direktifini kullanarak değeri açıkça ayarlamanız gerekir.

### Route eşleştirme stratejisi

Varsayılan olarak, `RouterLinkActive` rotadaki herhangi bir üst öğeyi eşleşme olarak kabul eder.

```html
<a [routerLink]="['/user/jane']" routerLinkActive="active-link"> User </a>
<a [routerLink]="['/user/jane/role/admin']" routerLinkActive="active-link"> Role </a>
```

Kullanıcı `/user/jane/role/admin` adresini ziyaret ettiğinde, her iki bağlantı da `active-link` sınıfına sahip olur.

### RouterLinkActive'i yalnızca tam route eşleşmelerinde uygulama

Sınıfı yalnızca tam eşleşmede uygulamak istiyorsanız, `exact: true` değerini içeren bir yapılandırma nesnesiyle `routerLinkActiveOptions` direktifini sağlamanız gerekir.

```html
<a
  [routerLink]="['/user/jane']"
  routerLinkActive="active-link"
  [routerLinkActiveOptions]="{exact: true}"
>
  User
</a>
<a
  [routerLink]="['/user/jane/role/admin']"
  routerLinkActive="active-link"
  [routerLinkActiveOptions]="{exact: true}"
>
  Role
</a>
```

Bir rotanın nasıl eşleştirileceği konusunda daha hassas olmak istiyorsanız, `exact: true` ifadesinin aslında eşleştirme seçeneklerinin tam seti için sözdizimsel şeker olduğunu belirtmek gerekir:

```typescript
// `exact: true` şuna eşdeğerdir
{
  paths: 'exact',
  fragment: 'ignored',
  matrixParams: 'ignored',
  queryParams: 'exact',
}

// `exact: false` şuna eşdeğerdir
{
  paths: 'subset',
  fragment: 'ignored',
  matrixParams: 'ignored',
  queryParams: 'subset',
}
```

Daha fazla bilgi için [isActiveMatchOptions](/api/router/IsActiveMatchOptions) resmi dokümanlarına göz atın.

### RouterLinkActive'i bir üst öğeye uygulama

RouterLinkActive direktifi, geliştiricilerin öğeleri istedikleri gibi stilize etmelerine olanak tanımak için bir üst öğeye de uygulanabilir.

```html
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>
```

Daha fazla bilgi için [RouterLinkActive API dokümanlarına](/api/router/RouterLinkActive) göz atın.

## Bir URL'nin aktif olup olmadığını kontrol etme

`isActive` fonksiyonu, belirli bir URL'nin yönlendiricide şu anda aktif olup olmadığını izleyen hesaplanmış bir sinyal döndürür. Sinyal, yönlendirici durumu değiştikçe otomatik olarak güncellenir.

```typescript
import {Component, inject} from '@angular/core';
import {isActive, Router} from '@angular/router';

@Component({
  template: `
    <div [class.active]="isSettingsActive()">
      <h2>Settings</h2>
    </div>
  `,
})
export class Panel {
  private router = inject(Router);

isSettingsActive = isActive('/settings', this.router, {
    paths: 'subset',
    queryParams: 'ignored',
    fragment: 'ignored',
    matrixParams: 'ignored',
  });
}
```
# Diğer Yaygın Yönlendirme Görevleri

Bu kılavuz, uygulamanızda Angular yönlendirici kullanımıyla ilişkili diğer bazı yaygın görevleri kapsar.

## Rota bilgisi alma

Genellikle, bir kullanıcı uygulamanızda gezinirken bir bileşenden diğerine bilgi aktarmak istersiniz.
Örneğin, market ürünlerinin bir alışveriş listesini görüntüleyen bir uygulama düşünün.
Listedeki her öğenin benzersiz bir `id`'si vardır.
Bir öğeyi düzenlemek için kullanıcılar, bir `EditGroceryItem` bileşeni açan Düzenle düğmesine tıklar.
Bu bileşenin, doğru bilgileri kullanıcıya gösterebilmesi için market ürününün `id`'sini almasını istersiniz.

Bu tür bilgileri uygulama bileşenlerinize aktarmak için bir rota kullanın.
Bunu yapmak için, `provideRouter` ile `withComponentInputBinding` özelliğini veya `RouterModule.forRoot`'un `bindToComponentInputs` seçeneğini kullanırsınız.

Bir rotadan bilgi almak için:

<docs-workflow>

<docs-step title="Add `withComponentInputBinding`">

`provideRouter` yöntemine `withComponentInputBinding` özelliğini ekleyin.

```ts
providers: [provideRouter(appRoutes, withComponentInputBinding())];
```

</docs-step>

<docs-step title="Add an `input` to the component">

Bileşeni, parametre adıyla eşleşen bir `input()` özelliğine sahip olacak şekilde güncelleyin.

```ts
id = input.required<string>();
hero = computed(() => this.service.getHero(id()));
```

</docs-step>
<docs-step title="Optional: Use a default value">
`withComponentInputBinding` etkinleştirildiğinde yönlendirici, geçerli rotaya göre tüm girişlere değer atar.
İsteğe bağlı bir sorgu parametresi eksik olduğunda gibi, giriş anahtarıyla eşleşen rota verisi yoksa yönlendirici `undefined` atar.
Bir girişin rota tarafından eşleştirilmeme olasılığı olduğunda `input` türüne `undefined` dahil etmelisiniz.

Girişte `transform` seçeneğini kullanarak veya `linkedSignal` ile yerel bir durum yöneterek varsayılan bir değer sağlayın.

```ts
id = input.required({
  transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
});
// veya
id = input<string | undefined>();
internalId = linkedSignal(() => this.id() ?? getDefaultId());
```

</docs-step>
</docs-workflow>

NOTE: Anahtar, değer çiftleri ile tüm rota verilerini bileşen girişlerine bağlayabilirsiniz: statik veya çözümlenmiş rota verileri, yol parametreleri, matris parametreleri ve sorgu parametreleri.

### Sorgu parametresi bağlamayı devre dışı bırakma

Sorgu parametrelerini ayrı olarak yönetiyorsanız, sorgu parametresi bağlamayı devre dışı bırakmak için `ComponentInputBindingOptions` kullanın:

```ts
provideRouter(appRoutes, withComponentInputBinding({queryParams: false}));
```

### Yönlendirici verisinde bulunmayan girişler için davranışı yapılandırma

Varsayılan olarak, bir gezinme sırasında yönlendirici verisinde bulunmayan bir girişi yönlendirici `undefined` olarak ayarlar. Bu, eski verilerin tutulmamasını sağlar.

Etkin bileşen örneği için yönlendirici verisinde _hiçbir zaman_ bulunmamış girişlerin `undefined` olarak ayarlanmasını önlemek istiyorsanız, `unmatchedInputBehavior` seçeneğini `'undefinedIfStale'` olarak ayarlayabilirsiniz:

```ts
provideRouter(appRoutes, withComponentInputBinding({unmatchedInputBehavior: 'undefinedIfStale'}));
```

`unmatchedInputBehavior: 'undefinedIfStale'` ile `queryParams: false` seçeneklerini birlikte kullandığınızda, girişler yönlendirici tarafından açıkça sağlanmadıkça başlangıç değerlerini korur. İstisna matris parametreleridir: bir matris parametresi bir gezinmede sağlanıp sonraki bir gezinmede kaldırılırsa, eski verilerin tutulmasını önlemek için yönlendirici girişi `undefined` olarak ayarlar.

```ts
provideRouter(
  appRoutes,
  withComponentInputBinding({
    queryParams: false,
    unmatchedInputBehavior: 'undefinedIfStale',
  }),
);
```

### Üst rota verisini devralma

Varsayılan olarak, alt rotalar üst rotalardan parametreleri ve verileri devralır (`paramsInheritanceStrategy: 'always'` ile eşdeğerdir). Bu, üst rota bilgilerine doğrudan alt bileşenlerde erişebileceğiniz anlamına gelir.

Parametrelerin yalnızca boş yol rotalarından devralındığı eski davranışı geri yüklemeniz gerekiyorsa, `paramsInheritanceStrategy` seçeneğini `'emptyOnly'` olarak ayarlayabilirsiniz:

```ts
provideRouter(routes, withRouterConfig({paramsInheritanceStrategy: 'emptyOnly'}));
```

Diğer mevcut ayarlar hakkında ayrıntılar için [yönlendirici yapılandırma seçeneklerine](guide/routing/customizing-route-behavior#router-yapılandırma-seçenekleri) bakın.

## 404 sayfası görüntüleme

404 sayfası görüntülemek için, `component` özelliğini 404 sayfanız için kullanmak istediğiniz bileşene ayarlayarak bir [joker rota](guide/routing/define-routes#joker-karakterler) kurun:

```ts
const routes: Routes = [
  {path: 'first-component', component: First},
  {path: 'second-component', component: Second},
  {path: '**', component: PageNotFound}, // 404 sayfası için joker rota
];
```

`**` `path`'ine sahip son rota bir joker rotadır.
İstenen URL, listedeki daha önceki yollardan hiçbiriyle eşleşmezse yönlendirici bu rotayı seçer ve kullanıcıyı `PageNotFound`'a yönlendirir.

## Bağlantı parametreleri dizisi

Bir bağlantı parametreleri dizisi, yönlendirici navigasyonu için aşağıdaki bileşenleri içerir:

- Hedef bileşene giden rotanın yolu
- Rota URL'sine giren zorunlu ve isteğe bağlı rota parametreleri

`RouterLink` direktifini böyle bir diziye şu şekilde bağlayın:

```html
<a [routerLink]="['/heroes']">Heroes</a>
```

Bir rota parametresi belirtilirken aşağıdaki iki elemanlı bir dizidir:

```html
<a [routerLink]="['/hero', hero.id]">
  <span class="badge">{{ hero.id }}</span
  >{{ hero.name }}
</a>
```

İsteğe bağlı rota parametrelerini `{ foo: 'foo' }` gibi bir nesnede sağlayın:

```html
<a [routerLink]="['/crisis-center', {foo: 'foo'}]">Crisis Center</a>
```

Bu söz dizimi, belirli bir URL segmentiyle ilişkili isteğe bağlı parametreler olan matris parametrelerini aktarır. [Matris parametreleri](/guide/routing/read-route-state#matris-parametreleri) hakkında daha fazla bilgi edinin.

Bu üç örnek, tek seviyeli yönlendirmeye sahip bir uygulamanın ihtiyaçlarını karşılar.
Ancak, kriz merkezi gibi bir alt yönlendirici ile yeni bağlantı dizisi olasılıkları oluşturursunuz.

Aşağıdaki minimal `RouterLink` örneği, kriz merkezi için belirtilen varsayılan alt rota üzerine kuruludur.

```html
<a [routerLink]="['/crisis-center']">Crisis Center</a>
```

Aşağıdakileri inceleyin:

- Dizideki ilk öğe üst rotayı belirler $`/crisis-center`$
- Bu üst rota için parametre yoktur
- Alt rota için varsayılan yoktur, bu yüzden bir tane seçmeniz gerekir
- `CrisisList`'e navigasyon yapıyorsunuz, rota yolu `/`'dir ama eğik çizgiyi açıkça eklemeniz gerekmez

Uygulamanın kökünden Dragon Crisis'e navigasyon yapan aşağıdaki router bağlantısını inceleyin:

```html
<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
```

- Dizideki ilk öğe üst rotayı belirler $`/crisis-center`$
- Bu üst rota için parametre yoktur
- İkinci öğe, belirli bir kriz hakkında alt rota ayrıntılarını belirler $`/:id`$
- Ayrıntılar alt rotası bir `id` rota parametresi gerektirir
- Dragon Crisis'in `id`'sini diziye ikinci öğe olarak eklediniz $`1`$
- Sonuç yol `/crisis-center/1`'dir

`App` şablonunu yalnızca Kriz Merkezi rotalarıyla da yeniden tanımlayabilirsiniz:

```typescript
@Component({
  template: `
    <h1 class="title">Angular Router</h1>
    <nav>
      <a [routerLink]="['/crisis-center']">Crisis Center</a>
      <a [routerLink]="['/crisis-center/1', {foo: 'foo'}]">Dragon Crisis</a>
      <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
    </nav>
    <router-outlet />
  `,
})
export class App {}
```

Özetle, bir, iki veya daha fazla yönlendirme derinliğine sahip uygulamalar yazabilirsiniz.
Bağlantı parametreleri dizisi, herhangi bir yönlendirme derinliğini ve herhangi bir geçerli rota yolları, $zorunlu$ yönlendirici parametreleri ve $isteğe bağlı$ rota parametre nesneleri dizisini temsil etme esnekliği sağlar.

## `LocationStrategy` ve tarayıcı URL stilleri

Yönlendirici yeni bir bileşen görünümüne navigasyon yaptığında, tarayıcının konumunu ve geçmişini o görünüm için bir URL ile günceller.

Modern HTML5 tarayıcıları, sunucu sayfa isteği tetiklemeden tarayıcının konumunu ve geçmişini değiştiren bir teknik olan [history.pushState](https://developer.mozilla.org/docs/Web/API/History_API/Working_with_the_History_API#adding_and_modifying_history_entries 'HTML5 browser history push-state')'i destekler.
Yönlendirici, normalde sayfa yüklemesi gerektirecek olandan ayırt edilemeyen "doğal" bir URL oluşturabilir.

İşte bu "HTML5 pushState" stilinde Kriz Merkezi URL'si:

```text
localhost:3002/crisis-center
```

Eski tarayıcılar, konum URL'si değiştiğinde sunucuya sayfa isteği gönderir, ancak değişiklik "#" $"hash" olarak adlandırılır$'dan sonra gerçekleşirse bunu yapmaz.
Yönlendiriciler, hash'lerle uygulama içi rota URL'leri oluşturarak bu istisnadan yararlanabilir.
İşte Kriz Merkezi'ne yönlendiren bir "hash URL".

```text
localhost:3002/src/#/crisis-center
```

Yönlendirici, iki `LocationStrategy` sağlayıcısıyla her iki stili destekler:

`RouterModule.forRoot()` fonksiyonu, `LocationStrategy`'yi `PathLocationStrategy` olarak ayarlar ve bu onu varsayılan strateji yapar.
Ayrıca başlatma işlemi sırasında bir geçersiz kılma ile `HashLocationStrategy`'ye geçme seçeneğiniz de vardır.

HELPFUL: Sağlayıcılar ve başlatma işlemi hakkında daha fazla bilgi için [Bağımlılık Enjeksiyonu](guide/di/defining-dependency-providers) bölümüne bakın.
# Özel Route Eşleştiricileri Oluşturma

Angular Router, kullanıcılarınızın uygulamanızda gezinmesine yardımcı olmak için kullanabileceğiniz güçlü bir eşleştirme stratejisini destekler.
Bu eşleştirme stratejisi statik rotaları, parametreli değişken rotaları, joker rotaları ve daha fazlasını destekler.
Ayrıca, URL'lerin daha karmaşık olduğu durumlar için kendi özel kalıp eşleştirmenizi oluşturun.

Bu eğitimde, Angular'ın `UrlMatcher`'ını kullanarak özel bir rota eşleştirici oluşturacaksınız.
Bu eşleştirici, URL'de bir Twitter kullanıcı adı arar.

## Hedefler

Angular'ın `UrlMatcher`'ını kullanarak özel bir rota eşleştirici uygulayın.

## Örnek bir uygulama oluşturma

Angular CLI kullanarak, _angular-custom-route-match_ adlı yeni bir uygulama oluşturun.
Varsayılan Angular uygulama çerçevesine ek olarak, bir _profile_ bileşeni de oluşturacaksınız.

1. _angular-custom-route-match_ adlı yeni bir Angular projesi oluşturun.

```shell
ng new angular-custom-route-match
   ```

`Would you like to add Angular routing?` sorusu geldiğinde `Y` seçin.

`Which stylesheet format would you like to use?` sorusu geldiğinde `CSS` seçin.

Birkaç dakika sonra yeni proje `angular-custom-route-match` hazırdır.

1. Terminalinizden `angular-custom-route-match` dizinine gidin.
1. Bir _profile_ bileşeni oluşturun.

```shell
ng generate component profile
   ```

1. Kod editörünüzde `profile.html` dosyasını bulun ve yer tutucu içeriği aşağıdaki HTML ile değiştirin.

<docs-code header="profile.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.html"/>

1. Kod editörünüzde `app.html` dosyasını bulun ve yer tutucu içeriği aşağıdaki HTML ile değiştirin.

<docs-code header="app.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.html"/>

## Uygulamanız için route'ları yapılandırma

Uygulama çerçeveniz hazır olduğunda, `app.config.ts` dosyanıza yönlendirme yetenekleri eklemeniz gerekir.
Bu işlemin bir parçası olarak, URL'de bir Twitter kullanıcı adı arayan özel bir URL eşleştirici oluşturacaksınız.
Bu kullanıcı adı, öncesinde gelen `@` sembolü ile tanımlanır.

1. Kod editörünüzde `app.config.ts` dosyanızı açın.
1. Angular'ın `provideRouter` ve `withComponentInputBinding` ile uygulama rotaları için bir `import` ifadesi ekleyin.

```ts
import {provideRouter, withComponentInputBinding} from '@angular/router';

import {routes} from './app.routes';
   ```

1. providers dizisinde bir `provideRouter(routes, withComponentInputBinding())` ifadesi ekleyin.

1. Aşağıdaki kodu uygulama rotalarına ekleyerek özel rota eşleştiriciyi tanımlayın.

<docs-code header="app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" region="matcher"/>

Bu özel eşleştirici, aşağıdaki görevleri yerine getiren bir fonksiyondur:

- Eşleştirici, dizinin yalnızca bir segment içerdiğini doğrular
- Eşleştirici, kullanıcı adı formatının eşleştiğinden emin olmak için bir düzenli ifade kullanır
- Eşleşme varsa, fonksiyon tüm URL'yi döndürür ve yolun bir alt dizesi olarak bir `username` rota parametresi tanımlar
- Eşleşme yoksa, fonksiyon null döndürür ve yönlendirici URL ile eşleşen diğer rotaları aramaya devam eder

HELPFUL: Özel bir URL eşleştirici, diğer herhangi bir rota tanımı gibi davranır. Alt rotaları veya tembel yüklenen rotaları, diğer herhangi bir rotada olduğu gibi tanımlayın.

## Route parametrelerini okuma

Özel eşleştirici hazır olduğunda, artık `profile` bileşeninde rota parametresini bağlayabilirsiniz.

Kod editörünüzde `profile.ts` dosyanızı açın ve `username` parametresiyle eşleşen bir `input` oluşturun.
Daha önce `provideRouter`'da `withComponentInputBinding` özelliğini eklemiştik. Bu, `Router`'ın bilgileri doğrudan rota bileşenlerine bağlamasına olanak tanır.

```ts
username = input.required<string>();
```

## Özel URL eşleştiricinizi test etme

Kodunuz hazır olduğunda, artık özel URL eşleştiricinizi test edebilirsiniz.

1. Bir terminal penceresinden `ng serve` komutunu çalıştırın.

```shell
ng serve
   ```

1. Bir tarayıcıda `http://localhost:4200` adresini açın.

`Navigate to my profile` yazan bir cümleden oluşan tek bir web sayfası görmelisiniz.

1. **my profile** bağlantısına tıklayın.

Sayfada `Hello, Angular!` yazan yeni bir cümle belirir.

## Sonraki Adımlar

Angular Router ile kalıp eşleştirme, uygulamanızda dinamik URL'leriniz olduğunda size çok fazla esneklik sağlar.
Angular Router hakkında daha fazla bilgi edinmek için aşağıdaki konulara bakın:
HELPFUL: Bu içerik, [Brandon Roberts](https://twitter.com/brandontroberts) tarafından yazılan [Custom Route Matching with the Angular Router](https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483) makalesine dayanmaktadır.
# Sunucu ve hibrit render

Angular, tüm uygulamaları varsayılan olarak istemci tarafında render edilmiş (CSR) olarak gönderir. Bu yaklaşım hafif bir başlangıç yükü sağlarken, daha yavaş yükleme süreleri, düşük performans metrikleri ve daha yüksek kaynak talepleri gibi ödünler getirir; çünkü kullanıcının cihazı hesaplamaların çoğunu yapar. Sonuç olarak, birçok uygulama sunucu tarafı render'ı (SSR) hibrit bir render stratejisine entegre ederek önemli performans iyileştirmeleri elde eder.

## Hibrit render nedir?

Hibrit render, geliştiricilerin Angular uygulamanızı optimize etmek için sunucu tarafı render (SSR), ön-render (aynı zamanda "statik site oluşturma" veya SSG olarak bilinir) ve istemci tarafı render (CSR) avantajlarından yararlanmasına olanak tanır. Uygulamanızın farklı bölümlerinin nasıl render edileceği üzerinde ayrıntılı kontrol sağlayarak kullanıcılarınıza mümkün olan en iyi deneyimi sunar.

## Hibrit render'ı kurma

`--ssr` bayrağını Angular CLI `ng new` komutuyla kullanarak hibrit render ile **yeni** bir proje oluşturabilirsiniz:

```shell
ng new --ssr
```

Mevcut bir projeye `ng add` komutuyla sunucu tarafı render ekleyerek de hibrit render'ı etkinleştirebilirsiniz:

```shell
ng add @angular/ssr
```

NOTE: Varsayılan olarak, Angular tüm uygulamanızı ön-render eder ve bir sunucu dosyası oluşturur. Bunu devre dışı bırakıp tamamen statik bir uygulama oluşturmak için `outputMode`'u `static` olarak ayarlayın. SSR'yi etkinleştirmek için sunucu rotalarını `RenderMode.Server` kullanacak şekilde güncelleyin. Daha fazla ayrıntı için [`Server routing`](#sunucu-yönlendirme) ve [`Generate a fully static application`](#generate-a-fully-static-application) bölümlerine bakın.

## Sunucu yönlendirme

### Sunucu rotalarını yapılandırma

Bir [`ServerRoute`](api/ssr/ServerRoute 'API reference') nesneleri dizisi bildirerek sunucu rota yapılandırması oluşturabilirsiniz. Bu yapılandırma genellikle `app.routes.server.ts` adlı bir dosyada bulunur.

```typescript
// app.routes.server.ts
import {RenderMode, ServerRoute} from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '', // Bu, "/" rotasını istemcide render eder (CSR)
    renderMode: RenderMode.Client,
  },
  {
    path: 'about', // Bu sayfa statiktir, bu yüzden ön-render ediyoruz (SSG)
    renderMode: RenderMode.Prerender,
  },
  {
    path: 'profile', // Bu sayfa kullanıcıya özel veri gerektirir, bu yüzden SSR kullanıyoruz
    renderMode: RenderMode.Server,
  },
  {
    path: '**', // Diğer tüm rotalar sunucuda render edilecektir (SSR)
    renderMode: RenderMode.Server,
  },
];
```

Bu yapılandırmayı [`withRoutes`](api/ssr/withRoutes 'API reference') fonksiyonunu kullanarak [`provideServerRendering`](api/ssr/provideServerRendering 'API reference') ile uygulamanıza ekleyebilirsiniz:

```typescript
import {provideServerRendering, withRoutes} from '@angular/ssr';
import {serverRoutes} from './app.routes.server';

// app.config.server.ts
const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(withRoutes(serverRoutes)),
    // ... diğer sağlayıcılar ...
  ],
};
```

[App shell kalıbını](ecosystem/service-workers/app-shell) kullanırken, istemci tarafında render edilen rotalar için app shell olarak kullanılacak bileşeni belirtmeniz gerekir. Bunu yapmak için [`withAppShell`](api/ssr/withAppShell 'API reference') özelliğini kullanın:

```typescript
import {provideServerRendering, withRoutes, withAppShell} from '@angular/ssr';
import {AppShell} from './app-shell';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShell)),
    // ... diğer sağlayıcılar ...
  ],
};
```

### Render modları

Sunucu rota yapılandırması, uygulamanızdaki her rotanın nasıl render edileceğini bir [`RenderMode`](api/ssr/RenderMode 'API reference') ayarlayarak belirtmenize olanak tanır:

| Render modu         | Açıklama                                                                                                    |
| ------------------- | ----------------------------------------------------------------------------------------------------------- |
| **Server (SSR)**    | Her istek için uygulamayı sunucuda render eder ve tarayıcıya tamamen doldurulmuş bir HTML sayfası gönderir. |
| **Client (CSR)**    | Uygulamayı tarayıcıda render eder. Bu, varsayılan Angular davranışıdır.                                     |
| **Prerender (SSG)** | Derleme zamanında uygulamayı ön-render eder ve her rota için statik HTML dosyaları oluşturur.               |

#### Render modu seçme

Her render modunun farklı avantajları ve dezavantajları vardır. Uygulamanızın belirli ihtiyaçlarına göre render modları seçebilirsiniz.

##### İstemci tarafı render (CSR)

İstemci tarafı render, en basit geliştirme modeline sahiptir çünkü her zaman bir web tarayıcısında çalıştığını varsayan kod yazabilirsiniz. Bu, tarayıcıda çalıştığını varsayan geniş bir istemci tarafı kütüphane yelpazesi kullanmanızı sağlar.

İstemci tarafı render genellikle diğer render modlarından daha kötü performansa sahiptir çünkü kullanıcı render edilmiş herhangi bir içeriği görmeden önce sayfanızın JavaScript'ini indirmesi, ayrıştırması ve çalıştırması gerekir. Sayfanız render sırasında sunucudan daha fazla veri alıyorsa, kullanıcılar tam içeriği görüntülemek için bu ek istekleri de beklemek zorundadır.

Sayfanız arama motorları tarafından dizine ekleniyorsa, istemci tarafı render arama motoru optimizasyonunu (SEO) olumsuz etkileyebilir çünkü arama motorlarının bir sayfayı dizine eklerken çalıştırdıkları JavaScript miktarında sınırlamalar vardır.

İstemci tarafı render sırasında, sunucunun statik JavaScript varlıkları sunmak dışında bir sayfa render etmek için herhangi bir iş yapması gerekmez. Sunucu maliyeti bir endişeyse bu faktörü değerlendirebilirsiniz.

[Service worker'lar](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) ile kurulabilir, çevrimdışı deneyimleri destekleyen uygulamalar, bir sunucuyla iletişim kurmaya gerek kalmadan istemci tarafı render'a güvenebilir.

##### Sunucu tarafı render (SSR)

Sunucu tarafı render, istemci tarafı render'a göre daha hızlı sayfa yüklemeleri sunar. JavaScript'in indirilmesini ve çalıştırılmasını beklemek yerine, sunucu tarayıcıdan bir istek aldığında doğrudan bir HTML belgesi render eder. Kullanıcı yalnızca sunucunun veri getirmesi ve istenen sayfayı render etmesi için gereken gecikmeyi yaşar. Bu mod ayrıca tarayıcıdan ek ağ istekleri yapma ihtiyacını da ortadan kaldırır çünkü kodunuz sunucuda render sırasında veri getirebilir.

Sunucu tarafı render genellikle mükemmel arama motoru optimizasyonuna (SEO) sahiptir çünkü arama motorları tamamen render edilmiş bir HTML belgesi alır.

Sunucu tarafı render, tarayıcı API'lerine kesinlikle bağımlı olmayan kod yazmanızı gerektirir ve tarayıcıda çalıştığını varsayan JavaScript kütüphanesi seçiminizi sınırlar.

Sunucu tarafı render sırasında, sunucunuz her istek için bir HTML yanıtı üretmek üzere Angular'ı çalıştırır ve bu da sunucu barındırma maliyetlerini artırabilir.

##### Derleme zamanı ön-render

Ön-render, hem istemci tarafı render hem de sunucu tarafı render'a göre daha hızlı sayfa yüklemeleri sunar. Ön-render, HTML belgelerini _derleme zamanında_ oluşturduğundan, sunucu herhangi bir ek iş yapmadan isteklere doğrudan statik HTML belgesiyle yanıt verebilir.

Ön-render, bir sayfayı render etmek için gerekli tüm bilgilerin _derleme zamanında_ mevcut olmasını gerektirir. Bu, ön-render edilmiş sayfaların sayfayı yükleyen belirli kullanıcıya ait herhangi bir veri içeremeyeceği anlamına gelir. Ön-render, temel olarak uygulamanızın tüm kullanıcıları için aynı olan sayfalar için kullanışlıdır.

Ön-render derleme zamanında gerçekleştiğinden, üretim derlemelerinize önemli süre ekleyebilir. Çok sayıda HTML belgesi üretmek için [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') kullanmak, dağıtımlarınızın toplam dosya boyutunu etkileyebilir ve dolayısıyla daha yavaş dağıtımlara yol açabilir.

Ön-render genellikle mükemmel arama motoru optimizasyonuna (SEO) sahiptir çünkü arama motorları tamamen render edilmiş bir HTML belgesi alır.

Ön-render, tarayıcı API'lerine kesinlikle bağımlı olmayan kod yazmanızı gerektirir ve tarayıcıda çalıştığını varsayan JavaScript kütüphanesi seçiminizi sınırlar.

Ön-render, sunucu isteği başına son derece az ek yük getirir çünkü sunucunuz statik HTML belgeleriyle yanıt verir. Statik dosyalar ayrıca daha hızlı sonraki sayfa yüklemeleri için İçerik Dağıtım Ağları (CDN'ler), tarayıcılar ve ara önbellekleme katmanları tarafından kolayca önbelleğe alınabilir. Tamamen statik siteler yalnızca bir CDN veya statik dosya sunucusu aracılığıyla da dağıtılabilir ve uygulamanız için özel bir sunucu çalışma zamanı sürdürme ihtiyacını ortadan kaldırır. Bu, bir uygulama web sunucusundan işi boşaltarak ölçeklenebilirliği artırır ve özellikle yüksek trafikli uygulamalar için faydalı olur.

NOTE: Angular service worker kullanırken, ilk istek sunucuda render edilir, ancak sonraki tüm istekler service worker tarafından işlenir ve istemci tarafında render edilir.

### Başlıkları ve durum kodlarını ayarlama

`ServerRoute` yapılandırmasındaki `headers` ve `status` özelliklerini kullanarak bireysel sunucu rotaları için özel başlıklar ve durum kodları ayarlayabilirsiniz.

```typescript
// app.routes.server.ts
import {RenderMode, ServerRoute} from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: 'profile',
    renderMode: RenderMode.Server,
    headers: {
      'X-My-Custom-Header': 'some-value',
    },
    status: 201,
  },
  // ... diğer rotalar
];
```

### Yönlendirmeler

Angular, rota yapılandırmalarındaki [`redirectTo`](api/router/Route#redirectTo 'API reference') özelliği tarafından belirtilen yönlendirmeleri sunucu tarafında farklı şekilde işler.

**Server-Side Rendering (SSR)**
Yönlendirmeler, sunucu tarafı render işlemi içinde standart HTTP yönlendirmeleri (örneğin, 301, 302) kullanılarak gerçekleştirilir.

**Prerendering (SSG)**
Yönlendirmeler, ön-render edilmiş HTML'de [`<meta http-equiv="refresh">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#refresh) etiketleri kullanılarak "yumuşak yönlendirmeler" olarak uygulanır.

### Derleme zamanı ön-render'ı (SSG) özelleştirme

[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') kullanırken, ön-render ve sunma işlemini özelleştirmek için birçok yapılandırma seçeneği belirleyebilirsiniz.

#### Parameterized routes

[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') ile her rota için, hangi belirli parametrelerin ayrı ön-render edilmiş belgeler üreteceğini kontrol etmenize olanak tanıyan bir [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') fonksiyonu belirtebilirsiniz.

[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') fonksiyonu, bir nesneler dizisine çözümlenen bir `Promise` döndürür. Her nesne, rota parametre adından değere bir anahtar-değer eşlemesidir. Örneğin, `post/:id` gibi bir rota tanımlarsanız, `getPrerenderParams` `[{id: 123}, {id: 456}]` dizisini döndürebilir ve böylece `post/123` ve `post/456` için ayrı belgeler render eder.

[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') gövdesi, bağımlılıkları enjekte etmek ve hangi rotaların ön-render edileceğini belirlemek için herhangi bir iş yapmak üzere Angular'ın [`inject`](api/core/inject 'API reference') fonksiyonunu kullanabilir. Bu genellikle parametre değerleri dizisini oluşturmak için veri getirme isteklerinde bulunmayı içerir.

Bu fonksiyonu ayrıca catch-all rotalarla (örneğin, `/**`) kullanabilirsiniz; burada parametre adı `"**"` olacak ve dönüş değeri yolun segmentleri olacaktır, örneğin `foo/bar`. Bunlar daha karmaşık rota yapılandırmasını işlemek için diğer parametrelerle (örneğin, `/post/:id/**`) birleştirilebilir.

```ts
// app.routes.server.ts
import {RenderMode, ServerRoute} from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: 'post/:id',
    renderMode: RenderMode.Prerender,
    async getPrerenderParams() {
      const dataService = inject(PostService);
      const ids = await dataService.getIds(); // Assuming this returns ['1', '2', '3']

return ids.map((id) => ({id})); // Generates paths like: /post/1, /post/2, /post/3
    },
  },
  {
    path: 'post/:id/**',
    renderMode: RenderMode.Prerender,
    async getPrerenderParams() {
      return [
        {id: '1', '**': 'foo/3'},
        {id: '2', '**': 'bar/4'},
      ]; // Generates paths like: /post/1/foo/3, /post/2/bar/4
    },
  },
];
```

[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') yalnızca [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') için geçerli olduğundan, bu fonksiyon her zaman _derleme zamanında_ çalışır. `getPrerenderParams`, veri için tarayıcıya özgü veya sunucuya özgü API'lere güvenmemelidir.

IMPORTANT: `getPrerenderParams` içinde [`inject`](api/core/inject 'API reference') kullanırken, `inject`'in senkron olarak kullanılması gerektiğini lütfen unutmayın. Asenkron geri çağırmalarda veya herhangi bir `await` ifadesinden sonra çağrılamaz. Daha fazla bilgi için `runInInjectionContext`'e bakın.

#### Fallback strategies

[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') modu kullanırken, ön-render edilmemiş yollar için istekleri işlemek üzere bir geri dönüş stratejisi belirleyebilirsiniz.

Kullanılabilir geri dönüş stratejileri şunlardır:

- **Server:** Sunucu tarafı render'a geri döner. Herhangi bir `fallback` özelliği belirtilmezse bu **varsayılan** davranıştır.
- **Client:** İstemci tarafı render'a geri döner.
- **None:** Geri dönüş yok. Angular, ön-render edilmemiş yollar için istekleri işlemez.

```ts
// app.routes.server.ts
import {RenderMode, PrerenderFallback, ServerRoute} from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: 'post/:id',
    renderMode: RenderMode.Prerender,
    fallback: PrerenderFallback.Client, // Fallback to CSR if not prerendered
    async getPrerenderParams() {
      // This function returns an array of objects representing prerendered posts at the paths:
      // `/post/1`, `/post/2`, and `/post/3`.
      // The path `/post/4` will utilize the fallback behavior if it's requested.
      return [{id: 1}, {id: 2}, {id: 3}];
    },
  },
];
```

## Authoring server-compatible components

Bazı yaygın tarayıcı API'leri ve yetenekleri sunucuda mevcut olmayabilir. Uygulamalar `window`, `document`, `navigator` veya `location` gibi tarayıcıya özgü genel nesneleri ve `HTMLElement`'in belirli özelliklerini kullanamazlar.

Genel olarak, tarayıcıya özgü sembollere dayanan kod yalnızca tarayıcıda çalıştırılmalıdır, sunucuda değil. Bu, `afterEveryRender` ve `afterNextRender` yaşam döngüsü kancaları aracılığıyla sağlanabilir. Bunlar yalnızca tarayıcıda çalıştırılır ve sunucuda atlanır.

```typescript
import {Component, viewChild, afterNextRender} from '@angular/core';

@Component({
  selector: 'my-cmp',
  template: `<span #content>{{ ... }}</span>`,
})
export class MyComponent {
  contentRef = viewChild.required<ElementRef>('content');

constructor() {
    afterNextRender(() => {
      // Safe to check `scrollHeight` because this will only run in the browser, not the server.
      console.log('content height: ' + this.contentRef().nativeElement.scrollHeight);
    });
  }
}
```

NOTE: `isPlatformBrowser` veya `isPlatformServer` ile çalışma zamanı kontrolleri yerine [platforma özgü sağlayıcıları](guide/ssr#providing-platform-specific-implementations) tercih edin.

IMPORTANT: Sunucu ve istemcide farklı içerik render etmek için `@if` veya diğer koşullu ifadelerle şablonlarda `isPlatformBrowser` kullanmaktan kaçının. Bu, hidrasyon uyumsuzluklarına ve düzen kaymalarına neden olarak kullanıcı deneyimini ve [Core Web Vitals](https://web.dev/learn-core-web-vitals/) değerlerini olumsuz etkiler. Bunun yerine, tarayıcıya özgü başlatma için `afterNextRender` kullanın ve render edilen içeriği platformlar arasında tutarlı tutun.

## Setting providers on the server

Sunucu tarafında, üst düzey sağlayıcı değerleri, uygulama kodu ilk kez ayrıştırılıp değerlendirildiğinde bir kez ayarlanır.
Bu, `useValue` ile yapılandırılmış sağlayıcıların sunucu uygulaması yeniden başlatılana kadar birden fazla istek boyunca değerlerini koruyacağı anlamına gelir.

Her istek için yeni bir değer oluşturmak istiyorsanız, `useFactory` ile bir fabrika sağlayıcısı kullanın. Fabrika fonksiyonu her gelen istek için çalışır ve her seferinde yeni bir değer oluşturulup token'a atanmasını sağlar.

## Providing platform-specific implementations

Uygulamanız tarayıcı ve sunucuda farklı davranış gerektirdiğinde, her platform için ayrı servis uygulamaları sağlayın. Bu yaklaşım, platform mantığını özel servislerde merkezileştirir.

```ts
export abstract class AnalyticsService {
  abstract trackEvent(name: string): void;
}
```

Tarayıcı uygulamasını oluşturun:

```ts
@Injectable()
export class BrowserAnalyticsService implements AnalyticsService {
  trackEvent(name: string): void {
    // Sends the event to the browser-based third-party analytics provider
  }
}
```

Sunucu uygulamasını oluşturun:

```ts
@Injectable()
export class ServerAnalyticsService implements AnalyticsService {
  trackEvent(name: string): void {
    // Records the event on the server
  }
}
```

Ana uygulama yapılandırmanızda tarayıcı uygulamasını kaydedin:

```ts
// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [{provide: AnalyticsService, useClass: BrowserAnalyticsService}],
};
```

Sunucu yapılandırmanızda sunucu uygulamasıyla geçersiz kılın:

```ts
// app.config.server.ts
const serverConfig: ApplicationConfig = {
  providers: [{provide: AnalyticsService, useClass: ServerAnalyticsService}],
};
```

Servisi bileşenlerinize enjekte edin ve kullanın:

```ts
@Component({
  /*...*/
})
export class Checkout {
  private analytics = inject(AnalyticsService);

onAction() {
    this.analytics.trackEvent('action');
  }
}
```

## Accessing Document via DI

Sunucu tarafı render ile çalışırken, `document` gibi tarayıcıya özgü global değişkenlere doğrudan başvurmaktan kaçınmalısınız. Bunun yerine, belge nesnesine platforma agnostik bir şekilde erişmek için [`DOCUMENT`](api/core/DOCUMENT) token'ını kullanın.

```ts
import {inject, DOCUMENT, Service} from '@angular/core';

@Service()
export class CanonicalLinkService {
  private readonly document = inject(DOCUMENT);

// During server rendering, inject a <link rel="canonical"> tag
  // so the generated HTML includes the correct canonical URL
  setCanonical(href: string): void {
    const link = this.document.createElement('link');
    link.rel = 'canonical';
    link.href = href;
    this.document.head.appendChild(link);
  }
}
```

HELPFUL: Meta etiketlerini yönetmek için Angular `Meta` servisini sağlar.

## Accessing Request and Response via DI

`@angular/core` paketi, sunucu tarafı render ortamıyla etkileşim için birkaç token sağlar. Bu token'lar, SSR sırasında Angular uygulamanızdaki önemli bilgilere ve nesnelere erişmenizi sağlar.

- **[`REQUEST`](api/core/REQUEST 'API reference'):** Web API'sinden [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) türünde olan mevcut istek nesnesine erişim sağlar. Bu, başlıklara, çerezlere ve diğer istek bilgilerine erişmenize olanak tanır.
- **[`RESPONSE_INIT`](api/core/RESPONSE_INIT 'API reference'):** Web API'sinden [`ResponseInit`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#parameters) türünde olan yanıt başlatma seçeneklerine erişim sağlar. Bu, yanıt için başlıkları ve durum kodunu dinamik olarak ayarlamanıza olanak tanır. Çalışma zamanında belirlenmesi gereken başlıkları veya durum kodlarını ayarlamak için bu token'ı kullanın.
- **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** Mevcut istekle ilgili ek bağlam sağlar. Bu bağlam, [`handle`](api/ssr/AngularAppEngine#handle 'API reference') fonksiyonunun ikinci parametresi olarak geçirilebilir. Genellikle, standart Web API'sinin parçası olmayan ek istekle ilgili bilgi sağlamak için kullanılır.

```typescript
import {inject, REQUEST} from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>My Component</h1>`,
})
export class MyComponent {
  constructor() {
    const request = inject(REQUEST);
    console.log(request?.url);
  }
}
```

IMPORTANT: Yukarıdaki token'lar aşağıdaki senaryolarda `null` olacaktır:<ul class="docs-list">
  <li>Derleme işlemleri sırasında.</li>
  <li>Uygulama tarayıcıda (CSR) render edildiğinde.</li>
  <li>Statik site oluşturma (SSG) yapılırken.</li>
  <li>Geliştirme sırasında rota çıkarma esnasında (istek anında).</li>
</ul>

## Generate a fully static application

Varsayılan olarak, Angular tüm uygulamanızı ön-render eder ve istekleri işlemek için bir sunucu dosyası oluşturur. Bu, uygulamanızın kullanıcılara ön-render edilmiş içerik sunmasına olanak tanır. Ancak, sunucu olmadan tamamen statik bir site tercih ediyorsanız, `angular.json` yapılandırma dosyanızda `outputMode`'u `static` olarak ayarlayarak bu davranıştan çıkabilirsiniz.

`outputMode` `static` olarak ayarlandığında, Angular derleme zamanında her rota için ön-render edilmiş HTML dosyaları oluşturur, ancak bir sunucu dosyası oluşturmaz veya uygulamayı sunmak için bir Node.js sunucusu gerektirmez. Bu, bir arka uç sunucusunun gerekli olmadığı statik barındırma sağlayıcılarına dağıtım için kullanışlıdır.

Bunu yapılandırmak için `angular.json` dosyanızı aşağıdaki gibi güncelleyin:

```json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "outputMode": "static"
          }
        }
      }
    }
  }
}
```

## Caching data when using HttpClient

`HttpClient`, sunucuda çalışırken giden ağ isteklerini önbelleğe alır. Bu bilgi serileştirilir ve sunucudan gönderilen ilk HTML'in bir parçası olarak tarayıcıya aktarılır. Tarayıcıda, `HttpClient` önbellekte veri olup olmadığını kontrol eder ve varsa, ilk uygulama render'ı sırasında yeni bir HTTP isteği yapmak yerine onu yeniden kullanır. `HttpClient`, bir uygulama tarayıcıda çalışırken [kararlı](api/core/ApplicationRef#isStable) hale geldikten sonra önbelleği kullanmayı bırakır.

### Configuring the caching options

Angular'ın sunucu tarafı render (SSR) sırasında HTTP yanıtlarını nasıl önbelleğe aldığını ve hidrasyon sırasında yeniden kullandığını `HttpTransferCacheOptions` yapılandırarak özelleştirebilirsiniz.
Bu yapılandırma, `provideClientHydration()` içinde `withHttpTransferCacheOptions` kullanılarak global olarak sağlanır.

Varsayılan olarak, `HttpClient` `Authorization`, `Proxy-Authorization` veya `Cookie` başlıkları içermeyen ve `withCredentials` ile ya da kimlik bilgisi gönderebilen Fetch API `credentials` modlarıyla gönderilmeyen tüm `HEAD` ve `GET` isteklerini önbelleğe alır. Ayrıca Angular, bir istek veya yanıt önbelleğe almayı yasaklayan `Cache-Control` direktifleri (`no-store`, `no-cache` veya `private`) içerdiğinde ya da Fetch API `cache` seçeneği `no-store` veya `no-cache` olarak ayarlandığında transfer önbelleğini atlar. İstek filtreleme ayarlarını hidrasyon yapılandırmasında `withHttpTransferCacheOptions` kullanarak geçersiz kılabilirsiniz.

```ts
import {bootstrapApplication} from '@angular/platform-browser';
import {provideClientHydration, withHttpTransferCacheOptions} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [
    provideClientHydration(
      withHttpTransferCacheOptions({
        includeHeaders: ['ETag', 'Cache-Control'],
        filter: (req) => !req.url.includes('/api/profile'),
        includePostRequests: true,
        includeRequestsWithAuthHeaders: false,
      }),
    ),
  ],
});
```

---

### `includeHeaders`

Sunucu yanıtından hangi başlıkların önbelleğe alınan girişlere dahil edilmesi gerektiğini belirtir.
Varsayılan olarak hiçbir başlık dahil edilmez.

```ts
withHttpTransferCacheOptions({
  includeHeaders: ['ETag', 'Cache-Control'],
});
```

IMPORTANT: Kimlik doğrulama token'ları gibi hassas başlıkları dahil etmekten kaçının. Bunlar, istekler arasında kullanıcıya özgü verilerin sızmasına neden olabilir.

`includeHeaders` içine `Cache-Control` eklemek yalnızca o başlığı hidrasyonu yapılmış yanıtta erişilebilir kılar. Angular, bir istek veya yanıtın transfer önbelleğine uygun olup olmadığına karar verirken `Cache-Control` başlıklarını zaten otomatik olarak değerlendirir.

---

### `includePostRequests`

Varsayılan olarak, yalnızca `GET` ve `HEAD` istekleri önbelleğe alınır.
GraphQL sorguları gibi okuma işlemleri olarak kullanıldığında `POST` istekleri için önbelleğe almayı etkinleştirebilirsiniz.

```ts
withHttpTransferCacheOptions({
  includePostRequests: true,
});
```

Bunu yalnızca `POST` istekleri **idempotent** olduğunda ve sunucu ile istemci render'ları arasında yeniden kullanılması güvenli olduğunda kullanın.

---

### `includeRequestsWithAuthHeaders`

`Authorization`, `Proxy‑Authorization` veya `Cookie` başlıkları içeren isteklerin önbelleğe alma için uygun olup olmadığını belirler.
Varsayılan olarak, kullanıcıya özgü yanıtların önbelleğe alınmasını önlemek için bunlar hariç tutulur. `withCredentials` ile ya da Fetch API `credentials` değeri `include` veya `same-origin` olarak ayarlanmış şekilde gönderilen istekler de varsayılan olarak hariç tutulur.

```ts
withHttpTransferCacheOptions({
  includeRequestsWithAuthHeaders: true,
});
```

Bunu yalnızca kimlik doğrulama başlıkları yanıt içeriğini **etkilemediğinde** (örneğin, analitik API'leri için genel token'lar) etkinleştirin.

### Per‑request overrides

`transferCache` istek seçeneğini kullanarak belirli bir istek için önbelleğe alma davranışını geçersiz kılabilirsiniz.

```ts
// Include specific headers for this request
http.get('/api/profile', {transferCache: {includeHeaders: ['CustomHeader']}});
```

### Disabling caching

Sunucudan gönderilen isteklerin HTTP önbelleğe alınmasını global olarak veya bireysel olarak devre dışı bırakabilirsiniz.

#### Globally

Uygulamanızdaki tüm istekler için önbelleğe almayı devre dışı bırakmak için `withNoHttpTransferCache` özelliğini kullanın:

```ts
import {
  bootstrapApplication,
  provideClientHydration,
  withNoHttpTransferCache,
} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [provideClientHydration(withNoHttpTransferCache())],
});
```

#### Filtering

Belirli istekler için önbelleğe almayı seçici olarak devre dışı bırakmak amacıyla `withHttpTransferCacheOptions` içindeki [`filter`](api/common/http/HttpTransferCacheOptions) seçeneğini de kullanabilirsiniz. Örneğin, belirli bir API uç noktası için önbelleğe almayı devre dışı bırakabilirsiniz:

```ts
import {
  bootstrapApplication,
  provideClientHydration,
  withHttpTransferCacheOptions,
} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [
    provideClientHydration(
      withHttpTransferCacheOptions({
        filter: (req) => !req.url.includes('/api/sensitive-data'),
      }),
    ),
  ],
});
```

Bu seçeneği, kullanıcıya özgü veya dinamik verilere sahip uç noktaları (örneğin `/api/profile`) hariç tutmak için kullanın.

#### Per-request

Bireysel bir istek için önbelleğe almayı devre dışı bırakmak amacıyla, bir `HttpRequest`'te [`transferCache`](api/common/http/HttpRequest#transferCache) seçeneğini belirtebilirsiniz.

```ts
httpClient.get('/api/sensitive-data', {transferCache: false});
```

`HttpTransferCache`, önbelleğe almayı açıkça devre dışı bırakan istekleri veya yanıtları önbelleğe almaz. Angular, bir istek `no-store`, `no-cache` veya `private` içeren bir `Cache-Control` başlığı içerdiğinde ya da istek Fetch API `cache` seçeneğini `no-store` veya `no-cache` olarak kullandığında transfer önbelleği girdilerini atlar. `Cache-Control: no-store`, `Cache-Control: no-cache` veya `Cache-Control: private` içeren yanıtlar da transfer önbelleğinde saklanmaz.

NOTE: Uygulamanız sunucu ve istemcide API çağrıları yapmak için farklı HTTP kaynakları kullanıyorsa, `HTTP_TRANSFER_CACHE_ORIGIN_MAP` token'ı bu kaynaklar arasında bir eşleme oluşturmanıza olanak tanır, böylece `HttpTransferCache` özelliği bu istekleri aynı istekler olarak tanıyabilir ve istemcide hidrasyon sırasında sunucuda önbelleğe alınan verileri yeniden kullanabilir.

## Configuring a server

### Node.js

`@angular/ssr/node`, Node.js ortamları için özelleştirilmiş `@angular/ssr`'yi genişletir. Node.js uygulamanızda sunucu tarafı render'ı uygulamayı kolaylaştıran API'ler sağlar. Fonksiyonların tam listesi ve kullanım örnekleri için [`@angular/ssr/node` API referansına](api/ssr/node/AngularNodeAppEngine) bakın.

```ts
// server.ts
import {
  AngularNodeAppEngine,
  createNodeRequestHandler,
  writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';

const app = express();
const angularApp = new AngularNodeAppEngine();

app.use('*', (req, res, next) => {
  angularApp
    .handle(req)
    .then((response) => {
      if (response) {
        writeResponseToNodeResponse(response, res);
      } else {
        next(); // Pass control to the next middleware
      }
    })
    .catch(next);
});

/**
 * The request handler used by the Angular CLI (dev-server and during build).
 */
export const reqHandler = createNodeRequestHandler(app);
```

### Non-Node.js

`@angular/ssr`, Node.js dışındaki platformlarda Angular uygulamanızı sunucu tarafı render etmek için temel API'ler sağlar. Web API'sinden standart [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) ve [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) nesnelerini kullanır ve Angular SSR'yi çeşitli sunucu ortamlarına entegre etmenizi sağlar. Ayrıntılı bilgi ve örnekler için [`@angular/ssr` API referansına](api/ssr/AngularAppEngine) bakın.

```ts
// server.ts
import {AngularAppEngine, createRequestHandler} from '@angular/ssr';

const angularApp = new AngularAppEngine();

/**
 * This is a request handler used by the Angular CLI (dev-server and during build).
 */
export const reqHandler = createRequestHandler(async (req: Request) => {
  const res: Response | null = await angularApp.render(req);

// ...
});
```

## Security

Sunucu Tarafı İstek Sahteciliğini (SSRF) önleme ve izin verilen ana bilgisayarları yapılandırma hakkında ayrıntılı bilgi için [Sunucu tarafı güvenlik](best-practices/security#sunucu-tarafı-istek-sahteciliğini-ssrf-önleme) kılavuzuna bakın.
# Hydration

## Hydration nedir

Hidrasyon, sunucu tarafında render edilmiş uygulamayı istemcide geri yükleme işlemidir. Bu, sunucu tarafında render edilmiş DOM yapılarının yeniden kullanılması, uygulama durumunun korunması, sunucu tarafından zaten alınmış olan uygulama verilerinin aktarılması ve diğer işlemleri içerir.

## Hydration neden önemlidir?

Hidrasyon, DOM düğümlerini yeniden oluşturmak için gereken ekstra işi önleyerek uygulama performansını artırır. Bunun yerine, Angular mevcut DOM öğelerini çalışma zamanında uygulama yapısıyla eşleştirmeye çalışır ve mümkün olduğunda DOM düğümlerini yeniden kullanır. Bu, [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) istatistikleri kullanılarak ölçülebilen bir performans iyileştirmesi sağlar; örneğin First Input Delay ([FID](https://web.dev/fid/)) ve Largest Contentful Paint ([LCP](https://web.dev/lcp/)) azaltılması ile Cumulative Layout Shift ([CLS](https://web.dev/cls/)) iyileştirilmesi gibi. Bu sayıların iyileştirilmesi ayrıca SEO performansı gibi konuları da etkiler.

Hidrasyon etkinleştirilmeden, sunucu tarafında render edilmiş Angular uygulamaları uygulamanın DOM'unu yok edip yeniden render eder ve bu da görünür bir UI titremesine neden olabilir. Bu yeniden render işlemi, [Core Web Vitals](https://web.dev/learn-core-web-vitals/) değerlerini, örneğin [LCP](https://web.dev/lcp/)'yi olumsuz etkileyebilir ve düzen kaymasına neden olabilir. Hidrasyonun etkinleştirilmesi, mevcut DOM'un yeniden kullanılmasını sağlar ve titremeyi önler.

## Angular'da hydration nasıl etkinleştirilir

Hidrasyon yalnızca sunucu tarafında render edilmiş (SSR) uygulamalar için etkinleştirilebilir. Önce sunucu tarafı render işlemini etkinleştirmek için [Angular SSR Kılavuzu](guide/ssr)'nu takip edin.

### Angular CLI kullanarak

SSR'yi etkinleştirmek için Angular CLI kullandıysanız (uygulama oluşturma sırasında veya daha sonra `ng add @angular/ssr` aracılığıyla), hidrasyonu etkinleştiren kod zaten uygulamanıza dahil edilmiş olmalıdır.

### Manuel kurulum

Özel bir kurulumunuz varsa ve SSR'yi etkinleştirmek için Angular CLI kullanmadıysanız, ana uygulama bileşeninizi veya modülünüzü ziyaret ederek ve `@angular/platform-browser`'dan `provideClientHydration`'ı içe aktararak hidrasyonu manuel olarak etkinleştirebilirsiniz. Ardından bu sağlayıcıyı uygulamanızın başlatma sağlayıcıları listesine eklersiniz.

```typescript
import {
  bootstrapApplication,
  provideClientHydration,
} from '@angular/platform-browser';
...

bootstrapApplication(App, {
  providers: [provideClientHydration()]
});
```

Alternatif olarak, NgModules kullanıyorsanız, `provideClientHydration`'ı kök uygulama modülünüzün sağlayıcı listesine eklersiniz.

```typescript
import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

@NgModule({
  declarations: [App],
  exports: [App],
  bootstrap: [App],
  providers: [provideClientHydration()],
})
export class AppModule {}
```

IMPORTANT: `provideClientHydration()` çağrısının **sunucuda** uygulamayı başlatmak için kullanılan sağlayıcı setine de dahil edildiğinden emin olun. Varsayılan proje yapısına sahip uygulamalarda (`ng new` komutuyla oluşturulan), çağrıyı kök `AppModule`'e eklemek yeterli olmalıdır, çünkü bu modül sunucu modülü tarafından içe aktarılır. Özel bir kurulum kullanıyorsanız, `provideClientHydration()` çağrısını sunucu başlatma yapılandırmasındaki sağlayıcılar listesine ekleyin.

### Hydration'ın etkin olduğunu doğrulama

Hidrasyonu yapılandırdıktan ve sunucunuzu başlattıktan sonra, uygulamanızı tarayıcıda yükleyin.

HELPFUL: Hidrasyonun tam olarak çalışması için muhtemelen Doğrudan DOM Manipülasyonu örneklerini düzeltmeniz gerekecektir; bunun için Angular yapılarına geçiş yapabilir veya `ngSkipHydration` kullanabilirsiniz. Daha fazla ayrıntı için [Kısıtlamalar](#kısıtlamalar), [Doğrudan DOM Manipülasyonu](#doğrudan-dom-manipülasyonu) ve [Belirli bileşenler için hidrasyon nasıl atlanır](#belirli-bileşenler-için-hydration-nasıl-atlanır) bölümlerine bakın.

Uygulamanızı geliştirme modunda çalıştırırken, tarayıcınızda Geliştirici Araçları'nı açarak ve konsolu görüntüleyerek hidrasyonun etkin olduğunu doğrulayabilirsiniz. Hidrasyon ile ilgili istatistikleri içeren bir mesaj görmelisiniz; örneğin hidrasyon yapılan bileşen ve düğüm sayısı gibi. Angular, bir sayfada render edilen tüm bileşenlere dayalı olarak istatistikleri hesaplar ve bunlara üçüncü taraf kütüphanelerden gelen bileşenler de dahildir.

Ayrıca [Angular DevTools tarayıcı uzantısını](tools/devtools) kullanarak bir sayfadaki bileşenlerin hidrasyon durumunu görebilirsiniz. Angular DevTools, sayfanın hangi bölümlerinin hidrasyon yapıldığını gösteren bir katman etkinleştirmenize de olanak tanır. Bir hidrasyon uyumsuzluk hatası varsa, DevTools hataya neden olan bileşeni de vurgular.

## Olayları yakalama ve yeniden oynatma

Bir uygulama sunucuda render edildiğinde, üretilen HTML yüklenir yüklenmez tarayıcıda görünür hale gelir. Kullanıcılar sayfayla etkileşime geçebileceklerini varsayabilir, ancak olay dinleyicileri hidrasyon tamamlanana kadar eklenmez. v18'den itibaren, hidrasyon öncesinde gerçekleşen tüm olayları yakalayan ve hidrasyon tamamlandıktan sonra bu olayları yeniden oynatan Olay Tekrarı özelliğini etkinleştirebilirsiniz. Bunu `withEventReplay()` fonksiyonu ile etkinleştirebilirsiniz, örneğin:

```typescript
import {provideClientHydration, withEventReplay} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [provideClientHydration(withEventReplay())],
});
```

### Olay tekrarı nasıl çalışır

Olay Tekrarı, hidrasyon işlemi tamamlanmadan önce tetiklenen kullanıcı olaylarını yakalayarak kullanıcı deneyimini iyileştiren bir özelliktir. Ardından bu olaylar yeniden oynatılır ve bu etkileşimin hiçbirinin kaybolmaması sağlanır.

Olay Tekrarı üç ana aşamaya ayrılır:

- **Kullanıcı etkileşimlerinin yakalanması**<br>
  **Hidrasyon** öncesinde, Olay Tekrarı kullanıcının gerçekleştirebileceği tıklamalar ve diğer tarayıcı yerel olayları gibi tüm etkileşimleri yakalar ve saklar.

- **Olayların saklanması**<br>
  **Olay Sözleşmesi**, bir önceki adımda kaydedilen tüm etkileşimleri bellekte tutar ve daha sonra tekrar oynatılmak üzere kaybolmamalarını sağlar.

- **Olayların yeniden başlatılması**<br>
  **Hidrasyon** tamamlandıktan sonra, Angular yakalanan olayları yeniden çağırır.

Olay tekrarı _yerel tarayıcı olaylarını_ destekler, örneğin `click`, `mouseover` ve `focusin`. Olay tekrarını güçlendiren kütüphane olan JSAction hakkında daha fazla bilgi edinmek istiyorsanız, [readme dosyasında](https://github.com/angular/angular/tree/main/packages/core/primitives/event-dispatch#readme) daha fazla bilgi bulabilirsiniz.

---

Bu özellik, Hidrasyon öncesinde gerçekleştirilen kullanıcı eylemlerinin göz ardı edilmesini önleyerek tutarlı bir kullanıcı deneyimi sağlar.

NOTE: [Artımlı hidrasyon](guide/incremental-hydration) etkinleştirdiyseniz, olay tekrarı arka planda otomatik olarak etkinleştirilir.

## Kısıtlamalar

Hidrasyon, hidrasyon etkinleştirilmeden mevcut olmayan uygulamanıza bazı kısıtlamalar getirir. Uygulamanız hem sunucuda hem de istemcide aynı üretilmiş DOM yapısına sahip olmalıdır. Hidrasyon işlemi, DOM ağacının her iki yerde de aynı yapıya sahip olmasını bekler. Bu, Angular'ın sunucuda render sırasında ürettiği boşlukları ve yorum düğümlerini de içerir. Bu boşluklar ve düğümler, sunucu tarafı render işlemi tarafından üretilen HTML'de mevcut olmalıdır.

IMPORTANT: Sunucu tarafı render işlemi tarafından üretilen HTML, sunucu ve istemci arasında **değiştirilmemelidir**.

Sunucu ve istemci DOM ağaç yapıları arasında bir uyumsuzluk varsa, hidrasyon işlemi beklenen ile DOM'da gerçekte bulunan arasında eşleştirme yapmaya çalışırken sorunlarla karşılaşır. Yerel DOM API'lerini kullanarak doğrudan DOM manipülasyonu yapan bileşenler en yaygın nedendir.

### Doğrudan DOM Manipülasyonu

Yerel DOM API'lerini kullanarak DOM'u manipüle eden veya `innerHTML` ya da `outerHTML` kullanan bileşenleriniz varsa, hidrasyon işlemi hatalarla karşılaşır. DOM manipülasyonunun sorun olduğu belirli durumlar `document`'e erişme, belirli öğeleri sorgulama ve `appendChild` kullanarak ek düğümler ekleme gibi durumlardır. DOM düğümlerini ayırma ve başka konumlara taşıma da hatalara neden olur.

Bunun nedeni, Angular'ın bu DOM değişikliklerinden haberdar olmaması ve hidrasyon işlemi sırasında bunları çözememesidir. Angular belirli bir yapı bekler, ancak hidrasyon yapmaya çalışırken farklı bir yapıyla karşılaşır. Bu uyumsuzluk, hidrasyon hatasına neden olur ve bir DOM uyumsuzluk hatası fırlatır ([aşağıya bakın](#hatalar)).

Bileşeninizi bu tür DOM manipülasyonundan kaçınmak için yeniden düzenlemeniz en iyisidir. Mümkünse bu işi yapmak için Angular API'lerini kullanmayı deneyin. Bu davranışı yeniden düzenleyemiyorsanız, hidrasyon dostu bir çözüme geçene kadar `ngSkipHydration` niteliğini ([aşağıda açıklanmıştır](#belirli-bileşenler-için-hydration-nasıl-atlanır)) kullanın.

### Geçerli HTML yapısı

Bileşen şablonunuz geçerli bir HTML yapısına sahip değilse, hidrasyon sırasında DOM uyumsuzluk hatasına neden olabilecek birkaç durum vardır.

Örneğin, bu sorunun en yaygın durumlarından bazıları şunlardır.

- `<tbody>` olmayan `<table>`
- `<p>` içinde `<div>`
- Başka bir `<a>` içinde `<a>`

HTML'inizin geçerli olup olmadığından emin değilseniz, kontrol etmek için bir [sözdizimi doğrulayıcı](https://validator.w3.org/) kullanabilirsiniz.

NOTE: HTML standardı tablolarda `<tbody>` öğesini gerektirmese de, modern tarayıcılar `<tbody>` bildirmeyen tablolarda otomatik olarak bir `<tbody>` öğesi oluşturur. Bu tutarsızlık nedeniyle, hidrasyon hatalarını önlemek için tablolarda her zaman açıkça bir `<tbody>` öğesi bildirin.

### Boşlukları Koruma Yapılandırması

Hidrasyon özelliğini kullanırken, `preserveWhitespaces` için varsayılan `false` ayarını kullanmanızı öneririz. Bu ayar tsconfig'inizde yoksa, değer `false` olacaktır ve herhangi bir değişiklik gerekmez. Tsconfig'inize `preserveWhitespaces: true` ekleyerek boşlukların korunmasını etkinleştirmeyi seçerseniz, hidrasyon ile ilgili sorunlarla karşılaşabilirsiniz. Bu henüz tam olarak desteklenen bir yapılandırma değildir.

HELPFUL: Bu ayarın, sunucunuz için `tsconfig.server.json`'da ve tarayıcı derlemeleriniz için `tsconfig.app.json`'da **tutarlı** olarak ayarlandığından emin olun. Uyumsuz bir değer hidrasyonun bozulmasına neden olur.

Bu ayarı tsconfig'inizde ayarlamayı seçerseniz, bunu yalnızca `tsconfig.app.json`'da ayarlamanızı öneririz; varsayılan olarak `tsconfig.server.json` bunu ondan devralacaktır.

### Özel veya Noop Zone.js henüz desteklenmiyor

Hidrasyon, uygulama içinde kararlı hale geldiğinde Zone.js'den gelen bir sinyale dayanır; böylece Angular sunucuda serileştirme işlemini veya istemcide hidrasyon sonrası temizliği başlatabilir ve sahipsiz kalan DOM düğümlerini kaldırabilir.

Özel veya "noop" bir Zone.js uygulaması sağlamak, "kararlı" olayının farklı zamanlamasına yol açabilir ve bu da serileştirme veya temizliğin çok erken veya çok geç tetiklenmesine neden olabilir. Bu henüz tam olarak desteklenen bir yapılandırma değildir ve özel Zone.js uygulamanızda `onStable` olayının zamanlamasını ayarlamanız gerekebilir.

## Hatalar

Düğüm uyumsuzluklarından `ngSkipHydration`'ın geçersiz bir ana düğümde kullanıldığı durumlara kadar karşılaşabileceğiniz birkaç hidrasyon ile ilgili hata vardır. Oluşabilecek en yaygın hata durumu, yerel API'ler kullanılarak doğrudan DOM manipülasyonu nedeniyle hidrasyonun istemcide sunucu tarafından render edilen beklenen DOM ağaç yapısını bulamaması veya eşleştirememesidir. Bu tür bir hatayla karşılaşabileceğiniz diğer durum, daha önce [Geçerli HTML yapısı](#geçerli-html-yapısı) bölümünde belirtilmiştir. Bu nedenle, şablonlarınızdaki HTML'in geçerli bir yapı kullandığından emin olun ve bu hata durumundan kaçınmış olursunuz.

Hidrasyon ile ilgili hataların tam referansı için [Hatalar Referans Kılavuzu](/errors)'nu ziyaret edin.

## Belirli bileşenler için hydration nasıl atlanır

Yukarıda bahsedilen [Doğrudan DOM Manipülasyonu](#doğrudan-dom-manipülasyonu) gibi bazı sorunlar nedeniyle bazı bileşenler hidrasyon etkinleştirildiğinde düzgün çalışmayabilir. Geçici çözüm olarak, bileşenin tamamının hidrasyon yapılmasını atlamak için bileşenin etiketine `ngSkipHydration` niteliğini ekleyebilirsiniz.

```html
<app-example ngSkipHydration />
```

Alternatif olarak `ngSkipHydration`'ı bir host bağlayıcı olarak ayarlayabilirsiniz.

```typescript
@Component({
  ...
  host: {ngSkipHydration: 'true'},
})
class ExampleComponent {}
```

`ngSkipHydration` niteliği, Angular'ı bileşenin tamamı ve alt bileşenleri için hidrasyonu atlamaya zorlar. Bu niteliği kullanmak, bileşenin hidrasyon etkinleştirilmemiş gibi davranacağı anlamına gelir; yani kendini yok edip yeniden render edecektir.

HELPFUL: Bu, render sorunlarını düzeltecektir, ancak bu bileşen (ve alt bileşenleri) için hidrasyonun faydalarından yararlanamayacağınız anlamına gelir. Hidrasyon atlama notasyonunu kaldırabilmek için bileşeninizin uygulamasını hidrasyon bozan kalıplardan (yani Doğrudan DOM Manipülasyonu) kaçınacak şekilde ayarlamanız gerekecektir.

`ngSkipHydration` niteliği yalnızca bileşen ana düğümlerinde kullanılabilir. Angular, bu nitelik diğer düğümlere eklenirse hata fırlatır.

`ngSkipHydration` niteliğini kök uygulama bileşeninize eklemenin tüm uygulamanız için hidrasyonu etkili bir şekilde devre dışı bırakacağını unutmayın. Bu niteliği kullanırken dikkatli ve düşünceli olun. Son çare geçici çözüm olarak tasarlanmıştır. Hidrasyonu bozan bileşenler, düzeltilmesi gereken hatalar olarak değerlendirilmelidir.

## Hydration Zamanlaması ve Uygulama Kararlılığı

Uygulama kararlılığı hidrasyon sürecinin önemli bir parçasıdır. Hidrasyon ve hidrasyon sonrası işlemler yalnızca uygulama kararlılığını bildirdikten sonra gerçekleşir. Kararlılığı geciktirebilecek birçok yol vardır. Örnekler arasında zamanlayıcılar ve aralıklar ayarlama, çözülmemiş promise'ler ve bekleyen mikro görevler bulunur. Bu durumlarda, uygulamanızın 10 saniye sonra hala kararlı duruma ulaşmadığını gösteren [Uygulama kararsız kalıyor](errors/NG0506) hatasıyla karşılaşabilirsiniz. Uygulamanızın hemen hidrasyon yapmadığını fark ediyorsanız, uygulama kararlılığını neyin etkilediğine bakın ve bu gecikmelere neden olmayı önlemek için yeniden düzenleyin.

### Uygulama Kararlılığını Hata Ayıklama

`provideStabilityDebugging` yardımcı aracı, uygulamanızın neden kararlı hale gelemediğini belirlemenize yardımcı olur. Bu yardımcı araç, `provideClientHydration` kullanıldığında geliştirme modunda varsayılan olarak sağlanır. Ayrıca, örneğin üretim paketlerinde veya hidrasyon olmadan SSR kullanırken kullanmak için uygulama sağlayıcılarına manuel olarak da ekleyebilirsiniz. Bu özellik, uygulama kararlı hale gelmesi beklenenden uzun sürerse konsola bilgi kaydeder.

```typescript
import {provideStabilityDebugging} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
import 'zone.js/plugins/task-tracking'; // `provideZoneChangeDetection` ile Zone.js kullanıyorsanız kullanın

bootstrapApplication(App, {
  providers: [provideStabilityDebugging()],
});
```

Etkinleştirildiğinde, yardımcı araç bekleyen görevleri (`PendingTasks`) konsola kaydeder. Uygulamanız Zone.js kullanıyorsa, Angular Zone'unun kararlı hale gelmesini engelleyen makro görevleri görmek için `zone.js/plugins/task-tracking`'i de içe aktarabilirsiniz. Bu eklenti, makro görev oluşturmanın yığın izini sağlayarak gecikmenin kaynağını etkili bir şekilde belirlemenize yardımcı olur.

IMPORTANT: Angular, zone.js görev izleme eklentisini veya bu yardımcı aracı üretim paketlerinden kaldırmaz. Bunları yalnızca geliştirme sırasında kararlılık sorunlarının geçici hata ayıklaması için kullanın; optimize edilmiş üretim derlemeleri dahil.

## I18N

HELPFUL: Varsayılan olarak Angular, i18n blokları kullanan bileşenler için hidrasyonu atlar ve bu bileşenleri sıfırdan yeniden render eder.

i18n blokları için hidrasyonu etkinleştirmek amacıyla `provideClientHydration` çağrınıza [`withI18nSupport`](/api/platform-browser/withI18nSupport) ekleyebilirsiniz.

```typescript
import {
  bootstrapApplication,
  provideClientHydration,
  withI18nSupport,
} from '@angular/platform-browser';
...

bootstrapApplication(App, {
  providers: [provideClientHydration(withI18nSupport())]
});
```

## Sunucu tarafı ve istemci tarafı arasında tutarlı render

Sunucu tarafı render ile istemci tarafı render arasında farklı içerik görüntüleyen `@if` blokları ve diğer koşullu ifadeleri kullanmaktan kaçının; örneğin Angular'ın `isPlatformBrowser` fonksiyonu ile bir `@if` bloğu kullanmak gibi. Bu render farklılıkları düzen kaymalarına neden olur ve son kullanıcı deneyimini ve core web vitals'ı olumsuz etkiler.

## DOM Manipülasyonu Yapan Üçüncü Taraf Kütüphaneler

Render yapabilmek için DOM manipülasyonuna bağımlı birçok üçüncü taraf kütüphanesi vardır. D3 grafikleri bunun başlıca örneğidir. Bu kütüphaneler hidrasyon olmadan çalışıyordu, ancak hidrasyon etkinleştirildiğinde DOM uyumsuzluk hatalarına neden olabilirler. Şimdilik, bu kütüphanelerden birini kullanırken DOM uyumsuzluk hatalarıyla karşılaşırsanız, o kütüphaneyi kullanarak render yapan bileşene `ngSkipHydration` niteliğini ekleyebilirsiniz.

## DOM Manipülasyonu Yapan Üçüncü Taraf Betikler

Reklam takipçileri ve analitik gibi birçok üçüncü taraf betiği, hidrasyon gerçekleşmeden önce DOM'u değiştirir. Bu betikler, sayfa artık Angular'ın beklediği yapıyla eşleşmediği için hidrasyon hatalarına neden olabilir. Mümkün olduğunda bu tür betikleri hidrasyon sonrasına ertelemeyi tercih edin. Betiği hidrasyon sonrası işlemler gerçekleştikten sonra geciktirmek için [`AfterNextRender`](api/core/afterNextRender) kullanmayı düşünün.

## Artımlı Hydration

Artımlı hidrasyon, hidrasyonun ne zaman gerçekleşeceği üzerinde daha ayrıntılı kontrol sağlayan gelişmiş bir hidrasyon biçimidir. Daha fazla bilgi için [artımlı hidrasyon kılavuzuna](guide/incremental-hydration) bakın.
# Artımlı Hydration

**Artımlı hidrasyon**, uygulamanızın bölümlerini dehidrate bırakabilen ve ihtiyaç duyuldukça bu bölümlerin hidrasyonunu _artımlı olarak_ tetikleyebilen gelişmiş bir [hidrasyon](guide/hydration) türüdür.

## Artımlı hydration neden kullanılır?

Artımlı hidrasyon, tam uygulama hidrasyonunun üzerine inşa edilen bir performans iyileştirmesidir. Tam uygulama hidrasyon deneyimiyle karşılaştırılabilir bir son kullanıcı deneyimi sunarken daha küçük başlangıç paketleri üretebilir. Daha küçük paketler başlangıç yükleme sürelerini iyileştirir, [First Input Delay (FID)](https://web.dev/fid) ve [Cumulative Layout Shift (CLS)](https://web.dev/cls) değerlerini azaltır.

Artımlı hidrasyon ayrıca daha önce ertelenebilir olmayan içerik için ertelenebilir görünümler (`@defer`) kullanmanıza da olanak tanır. Özellikle, artık ekranın üst kısmındaki (above the fold) içerik için ertelenebilir görünümler kullanabilirsiniz. Artımlı hidrasyon öncesinde, ekranın üst kısmına bir `@defer` bloğu koymak, yer tutucu içeriğin render edilmesine ve ardından `@defer` bloğunun ana şablon içeriğiyle değiştirilmesine neden olurdu. Bu da düzen kaymasına yol açardı. Artımlı hidrasyon, `@defer` bloğunun ana şablonunun hidrasyon sırasında düzen kayması olmadan render edileceği anlamına gelir.

## Angular'da artımlı hydration nasıl etkinleştirilir?

Artımlı hidrasyonu, zaten hidrasyon ile sunucu tarafı render (SSR) kullanan uygulamalar için etkinleştirebilirsiniz. Önce sunucu tarafı render'ı etkinleştirmek için [Angular SSR Kılavuzu](guide/ssr)'nu ve hidrasyonu etkinleştirmek için [Angular Hidrasyon Kılavuzu](guide/hydration)'nu takip edin.

Artımlı hidrasyon, `provideClientHydration()` kullandığınızda varsayılan olarak etkindir.

```ts
import {bootstrapApplication, provideClientHydration} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [provideClientHydration()],
});
```

NOTE: Artımlı Hidrasyon, [olay tekrarına](guide/hydration#olayları-yakalama-ve-yeniden-oynatma) bağımlıdır ve onu otomatik olarak etkinleştirir. Listenizde zaten `withEventReplay()` varsa, güvenle kaldırabilirsiniz.

Artımlı hidrasyondan vazgeçmek için `withNoIncrementalHydration()` kullanın:

```ts
import {
  bootstrapApplication,
  provideClientHydration,
  withNoIncrementalHydration,
} from '@angular/platform-browser';

bootstrapApplication(App, {
  providers: [provideClientHydration(withNoIncrementalHydration())],
});
```

## Artımlı hydration nasıl çalışır?

Artımlı hidrasyon, tam uygulama [hidrasyonu](guide/hydration), [ertelenebilir görünümler](/guide/templates/defer) ve [olay tekrarı](guide/hydration#olayları-yakalama-ve-yeniden-oynatma) üzerine inşa edilmiştir. Artımlı hidrasyon ile artımlı hidrasyon sınırlarını tanımlayan `@defer` bloklarına ek tetikleyiciler ekleyebilirsiniz. Bir defer bloğuna `hydrate` tetikleyicisi eklemek, Angular'a sunucu tarafı render sırasında o defer bloğunun bağımlılıklarını yüklemesi ve `@placeholder` yerine ana şablonu render etmesi gerektiğini söyler. İstemci tarafı render sırasında, bağımlılıklar hâlâ ertelenir ve defer bloğu içeriği `hydrate` tetikleyicisi tetiklenene kadar dehidrate kalır. Bu tetikleyici, defer bloğuna bağımlılıklarını getirmesini ve içeriği hidrasyon yapmasını söyler. Kullanıcı tarafından hidrasyon öncesinde tetiklenen herhangi bir tarayıcı olayı, özellikle bileşeninizde kayıtlı dinleyicilerle eşleşenler, sıraya alınır ve hidrasyon işlemi tamamlandıktan sonra yeniden oynatılır.

## Tetikleyicilerle içerik hidrasyonunu kontrol etme

İçeriğin ne zaman yükleneceğini ve hidrasyon yapılacağını kontrol eden **hidrasyon tetikleyicileri** belirleyebilirsiniz. Bunlar, normal `@defer` tetikleyicilerinin yanında kullanılabilen ek tetikleyicilerdir.

Her `@defer` bloğu, noktalı virgül (`;`) ile ayrılmış birden fazla hidrasyon olay tetikleyicisine sahip olabilir. Angular, tetikleyicilerden _herhangi biri_ tetiklendiğinde hidrasyonu başlatır.

Üç tür hidrasyon tetikleyicisi vardır: `hydrate on`, `hydrate when` ve `hydrate never`.

### `hydrate on`

`hydrate on`, `@defer` bloğu için hidrasyonun ne zaman tetikleneceğine ilişkin bir koşul belirtir.

Kullanılabilir tetikleyiciler aşağıdaki gibidir:

| Trigger                                             | Description                                                                    |
| --------------------------------------------------- | ------------------------------------------------------------------------------ |
| [`hydrate on idle`](#hydrate-on-idle)               | Tarayıcı boşta olduğunda tetiklenir. İsteğe bağlı bir zaman aşımını destekler. |
| [`hydrate on viewport`](#hydrate-on-viewport)       | Belirtilen içerik görünüm alanına girdiğinde tetiklenir                        |
| [`hydrate on interaction`](#hydrate-on-interaction) | Kullanıcı belirtilen öğeyle etkileşime geçtiğinde tetiklenir                   |
| [`hydrate on hover`](#hydrate-on-hover)             | Fare belirtilen alanın üzerine geldiğinde tetiklenir                           |
| [`hydrate on immediate`](#hydrate-on-immediate)     | Ertelenmemiş içerik render edilmeyi bitirdikten hemen sonra tetiklenir         |
| [`hydrate on timer`](#hydrate-on-timer)             | Belirli bir süre sonra tetiklenir                                              |

#### `hydrate on idle`

`hydrate on idle` tetikleyicisi, `requestIdleCallback`'e dayalı olarak tarayıcı boşta durumuna ulaştığında ertelenebilir görünümün bağımlılıklarını yükler ve içeriği hidrasyon yapar.

İsteğe bağlı olarak, [`requestIdleCallback`](https://developer.mozilla.org/docs/Web/API/Window/requestIdleCallback)'e iletilen milisaniye cinsinden bir zaman aşımı belirtebilirsiniz. Tarayıcı geri çağrıyı yeterince erken zamanlamazsa, iş belirtilen zaman aşımından daha geç olmayacak şekilde çalışır.

```html
@defer (hydrate on idle) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}

@defer (hydrate on idle(500)) {
  <large-cmp />
}
```

#### `hydrate on viewport`

`hydrate on viewport` tetikleyicisi, belirtilen içerik [Intersection Observer API](https://developer.mozilla.org/docs/Web/API/Intersection_Observer_API) kullanılarak görünüm alanına girdiğinde ertelenebilir görünümün bağımlılıklarını yükler ve uygulamanın ilgili sayfasını hidrasyon yapar.

```html
@defer (hydrate on viewport) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

#### `hydrate on interaction`

`hydrate on interaction` tetikleyicisi, kullanıcı belirtilen öğeyle `click` veya `keydown` olayları aracılığıyla etkileşime geçtiğinde ertelenebilir görünümün bağımlılıklarını yükler ve içeriği hidrasyon yapar.

```html
@defer (hydrate on interaction) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

#### `hydrate on hover`

`hydrate on hover` tetikleyicisi, fare `mouseover` ve `focusin` olayları aracılığıyla tetiklenen alanın üzerine geldiğinde ertelenebilir görünümün bağımlılıklarını yükler ve içeriği hidrasyon yapar.

```html
@defer (hydrate on hover) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

#### `hydrate on immediate`

`hydrate on immediate` tetikleyicisi, ertelenebilir görünümün bağımlılıklarını hemen yükler ve içeriği hidrasyon yapar. Bu, ertelenmiş bloğun diğer tüm ertelenmemiş içerik render edilmeyi bitirdikten sonra yüklendiği anlamına gelir.

```html
@defer (hydrate on immediate) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

#### `hydrate on timer`

`hydrate on timer` tetikleyicisi, belirli bir süre sonra ertelenebilir görünümün bağımlılıklarını yükler ve içeriği hidrasyon yapar.

```html
@defer (hydrate on timer(500ms)) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

Süre parametresi milisaniye (`ms`) veya saniye (`s`) cinsinden belirtilmelidir.

### `hydrate when`

`hydrate when` tetikleyicisi özel bir koşul ifadesi kabul eder ve koşul doğru olduğunda ertelenebilir görünümün bağımlılıklarını yükler ve içeriği hidrasyon yapar.

```html
@defer (hydrate when condition) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

NOTE: `hydrate when` koşulları yalnızca en üstteki dehidrate `@defer` bloğu olduklarında tetiklenir. Tetikleyici için sağlanan koşul üst bileşende belirtilir ve tetiklenmeden önce mevcut olması gerekir. Üst blok dehidrate ise, bu ifade henüz Angular tarafından çözümlenemez.

### `hydrate never`

`hydrate never`, kullanıcıların defer bloğundaki içeriğin süresiz olarak dehidrate kalması gerektiğini belirtmelerine olanak tanır ve etkili bir şekilde statik içerik haline gelir. Bunun yalnızca ilk render için geçerli olduğunu unutmayın. Sonraki istemci tarafı render sırasında, `hydrate never` olan bir `@defer` bloğu yine de bağımlılıkları getirir çünkü hidrasyon yalnızca sunucu tarafında render edilmiş içeriğin ilk yüklemesi için geçerlidir. Aşağıdaki örnekte, sonraki istemci tarafı render'lar viewport'ta `@defer` bloğu bağımlılıklarını yükler.

```html
@defer (on viewport; hydrate never) {
  <large-cmp />
} @placeholder {
  <div>Large component placeholder</div>
}
```

NOTE: `hydrate never` kullanmak, verilen `@defer` bloğunun tüm iç içe geçmiş alt ağacının hidrasyonunu engeller. O bloğun altında iç içe geçmiş içerik için başka hiçbir `hydrate` tetikleyicisi tetiklenmez.

## Normal tetikleyicilerin yanında hydrate tetikleyicileri

Hidrasyon tetikleyicileri, bir `@defer` bloğundaki normal tetikleyicilerin yanında kullanılan ek tetikleyicilerdir. Hidrasyon bir ilk yükleme optimizasyonudur ve bu, hidrasyon tetikleyicilerinin yalnızca o ilk yükleme için geçerli olduğu anlamına gelir. Sonraki herhangi bir istemci tarafı render yine de normal tetikleyiciyi kullanır.

```html
@defer (on idle; hydrate on interaction) {
  <example-cmp />
} @placeholder {
  <div>Example Placeholder</div>
}
```

Bu örnekte, ilk yüklemede `hydrate on interaction` uygulanır. Hidrasyon, `<example-cmp />` bileşeni ile etkileşim sırasında tetiklenir. İstemci tarafında render edilen herhangi bir sonraki sayfa yüklemesinde, örneğin bir kullanıcının bu bileşeni içeren bir sayfayı yükleyen bir routerLink'e tıklaması durumunda, `on idle` uygulanır.

## Artımlı hydration iç içe geçmiş `@defer` bloklarıyla nasıl çalışır?

Angular'ın bileşen ve bağımlılık sistemi hiyerarşiktir, yani herhangi bir bileşenin hidrasyon yapılması tüm üst bileşenlerinin de hidrasyon yapılmasını gerektirir. Bu nedenle, dehidrate `@defer` bloklarının iç içe geçmiş bir kümesinin bir alt `@defer` bloğu için hidrasyon tetiklenirse, hidrasyon en üstteki dehidrate `@defer` bloğundan tetiklenen alt bloğa kadar tetiklenir ve bu sırayla gerçekleşir.

```html
@defer (hydrate on interaction) {
  <parent-block-cmp />
  @defer (hydrate on hover) {
    <child-block-cmp />
  } @placeholder {
    <div>Child placeholder</div>
  }
} @placeholder {
  <div>Parent Placeholder</div>
}
```

Yukarıdaki örnekte, iç içe geçmiş `@defer` bloğunun üzerine gelinmesi hidrasyonu tetikler. `<parent-block-cmp />` ile üst `@defer` bloğu önce hidrasyon yapar, ardından `<child-block-cmp />` ile alt `@defer` bloğu sonra hidrasyon yapar.

## Kısıtlamalar

Artımlı hidrasyon, doğrudan DOM manipülasyonu sınırlamaları ve geçerli HTML yapısı gerekliliği dahil olmak üzere tam uygulama hidrasyonu ile aynı kısıtlamalara sahiptir. Daha fazla ayrıntı için [Hidrasyon kılavuzu kısıtlamaları](guide/hydration#kısıtlamalar) bölümünü ziyaret edin.

## Hâlâ `@placeholder` blokları belirtmem gerekiyor mu?

Evet. `@placeholder` bloğu içeriği artımlı hidrasyon için kullanılmaz, ancak sonraki istemci tarafı render durumları için bir `@placeholder` hâlâ gereklidir. İçeriğiniz ilk yüklemenin parçası olan rotada değilse, `@defer` bloğu içeriğinize sahip rotaya yapılan herhangi bir navigasyon normal bir `@defer` bloğu gibi render edilir. Bu nedenle `@placeholder`, bu istemci tarafı render durumlarında render edilir.
# Birim Test

Angular uygulamanızı test etmek, beklediğiniz gibi çalışıp çalışmadığını kontrol etmenize yardımcı olur. Birim testleri, hataları erken yakalamak, kod kalitesini sağlamak ve güvenli yeniden düzenlemeyi kolaylaştırmak için kritik öneme sahiptir.

NOTE: Bu kılavuz, Vitest kullanan yeni Angular CLI projeleri için varsayılan test kurulumunu kapsar. Mevcut bir projeyi Karma'dan taşıyorsanız, [Karma'dan Vitest'e Geçiş kılavuzuna](guide/testing/migrating-to-vitest) bakın. Karma hâlâ desteklenmektedir; daha fazla bilgi için [Karma test kılavuzuna](guide/testing/karma) bakın.

## Test için kurulum

Angular CLI, bir Angular uygulamasını [Vitest test çerçevesi](https://vitest.dev) ile test etmek için ihtiyaç duyduğunuz her şeyi indirir ve yükler. Yeni projeler varsayılan olarak `vitest` ve `jsdom` içerir.

Vitest, birim testlerinizi bir Node.js ortamında çalıştırır. Tarayıcının DOM'unu simüle etmek için Vitest, `jsdom` adlı bir kütüphane kullanır. Bu, tarayıcı başlatma yükünü ortadan kaldırarak daha hızlı test yürütülmesini sağlar. `jsdom` yerine `happy-dom` gibi bir alternatifi yükleyip `jsdom`'u kaldırarak değiştirebilirsiniz. Şu anda `jsdom` ve `happy-dom` desteklenen DOM emülasyon kütüphaneleridir.

CLI ile oluşturduğunuz proje hemen teste hazırdır. [`ng test`](cli/test) komutunu çalıştırın:

```shell
ng test
```

`ng test` komutu uygulamayı _izleme modunda_ derler ve [Vitest test çalıştırıcısını](https://vitest.dev) başlatır.

Konsol çıktısı şu şekilde görünür:

```shell
✓ src/app/app.spec.ts (3)
   ✓ AppComponent should create the app
   ✓ AppComponent should have as title 'my-app'
   ✓ AppComponent should render title
 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  18:18:01
   Duration  2.46s (transform 615ms, setup 2ms, collect 2.21s, tests 5ms)
```

`ng test` komutu ayrıca dosyalarınızı değişiklikler için izler. Bir dosyayı değiştirip kaydederseniz, testler tekrar çalışır.

## Yapılandırma

Angular CLI, Vitest yapılandırmasının çoğunu sizin için yönetir. `angular.json` dosyanızdaki `test` hedef seçeneklerini değiştirerek test davranışını özelleştirebilirsiniz.

### Angular.json seçenekleri

- `include`: Test için dahil edilecek dosyalar için glob kalıpları. Varsayılan olarak `['**/*.spec.ts', '**/*.test.ts']` değerindedir.
- `exclude`: Testten hariç tutulacak dosyalar için glob kalıpları.
- `setupFiles`: Testlerinizden önce çalıştırılan global kurulum dosyalarına (ör. polyfill'ler veya global mock'lar) giden yolların listesi.
- `providersFile`: Test ortamı için varsayılan bir Angular sağlayıcı dizisi dışa aktaran bir dosyanın yolu. Bu, testlerinize enjekte edilen global test sağlayıcılarını ayarlamak için kullanışlıdır.
- `coverage`: Kod kapsam raporlamasını etkinleştirmek veya devre dışı bırakmak için bir boolean değer. Varsayılan olarak `false` değerindedir.
- `browsers`: Testleri gerçek bir tarayıcıda çalıştırmak için tarayıcı adları dizisi (ör. `["chromium"]`). Bir tarayıcı sağlayıcısının yüklenmesini gerektirir. Daha fazla ayrıntı için [Testleri tarayıcıda çalıştırma](#tarayıcıda-test-çalıştırma) bölümüne bakın.

### Global test kurulumu ve provider'lar

`setupFiles` ve `providersFile` seçenekleri, global test yapılandırmasını yönetmek için özellikle kullanışlıdır.

Örneğin, tüm testlerinize `provideHttpClientTesting` sağlamak için bir `src/test-providers.ts` dosyası oluşturabilirsiniz:

```typescript
{header: "src/test-providers.ts"}
import {EnvironmentProviders, Provider} from '@angular/core';
import {provideHttpClientTesting} from '@angular/common/http/testing';

const testProviders: (Provider | EnvironmentProviders)[] = [provideHttpClientTesting()];

export default testProviders;
```

Ardından bu dosyayı `angular.json` dosyanızda referans gösterirsiniz:

```json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "providersFile": "src/test-providers.ts"
          }
        }
      }
    }
  }
}
```

HELPFUL: Test kurulumu veya sağlayıcılar için `src/test-providers.ts` gibi yeni TypeScript dosyaları oluştururken, bunların projenizin test TypeScript yapılandırma dosyasına (genellikle `tsconfig.spec.json`) dahil edildiğinden emin olun. Bu, TypeScript derleyicisinin test sırasında bu dosyaları düzgün bir şekilde işlemesini sağlar.

### Gelişmiş Vitest yapılandırması

İleri düzey kullanım durumları için, `angular.json` dosyasındaki `configFile` seçeneğini kullanarak özel bir Vitest yapılandırma dosyası sağlayabilirsiniz.

IMPORTANT: Özel bir yapılandırma kullanmak ileri düzey seçenekleri etkinleştirirken, Angular ekibi yapılandırma dosyasının içeriği veya herhangi bir üçüncü taraf eklentisi için destek sağlamaz. CLI ayrıca düzgün entegrasyon sağlamak için belirli özellikleri (`test.projects`, `test.include`) geçersiz kılacaktır.

Bir Vitest yapılandırma dosyası (ör. `vitest-base.config.ts`) oluşturabilir ve `angular.json` dosyanızda referans gösterebilirsiniz:

```json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "runnerConfig": "vitest-base.config.ts"
          }
        }
      }
    }
  }
}
```

CLI kullanarak bir temel yapılandırma dosyası da oluşturabilirsiniz:

```shell
ng generate config vitest
```

Bu, özelleştirebileceğiniz bir `vitest-base.config.ts` dosyası oluşturur.

HELPFUL: Vitest yapılandırması hakkında daha fazla bilgi için [resmi Vitest belgelerini](https://vitest.dev/config/) okuyun.

## Kod coverage

`ng test` komutuna `--coverage` bayrağını ekleyerek bir kod kapsam raporu oluşturabilirsiniz. Rapor `coverage/` dizininde oluşturulur.

Daha ayrıntılı bilgi için [Kod kapsam kılavuzuna](guide/testing/code-coverage) bakın.

## Tarayıcıda test çalıştırma

Varsayılan Node.js ortamı çoğu birim testi için daha hızlı olsa da, testlerinizi gerçek bir tarayıcıda da çalıştırabilirsiniz. Bu, tarayıcıya özgü API'lere (örneğin render etme) dayanan testler veya hata ayıklama için kullanışlıdır.

Testleri bir tarayıcıda çalıştırmak için önce bir tarayıcı sağlayıcısı yüklemeniz gerekir. Vitest'in tarayıcı modu hakkında daha fazla bilgi için [resmi belgeleri](https://vitest.dev/guide/browser) okuyun.

Sağlayıcı yüklendikten sonra, `angular.json` dosyasındaki `browsers` seçeneğini yapılandırarak veya `--browsers` CLI bayrağını kullanarak testlerinizi tarayıcıda çalıştırabilirsiniz. Testler varsayılan olarak görünür tarayıcıda çalışır. `CI` ortam değişkeni ayarlandıysa, bunun yerine başsız mod kullanılır. Başsız modu açıkça kontrol etmek için tarayıcı adının sonuna `Headless` ekleyebilirsiniz (ör. `chromiumHeadless`).

```bash
# Playwright örneği (görünür)
ng test --browsers=chromium

# Playwright örneği (başsız)
ng test --browsers=chromiumHeadless

# WebdriverIO örneği (görünür)
ng test --browsers=chrome

# WebdriverIO örneği (başsız)
ng test --browsers=chromeHeadless
```

İhtiyaçlarınıza göre aşağıdaki tarayıcı sağlayıcılarından birini seçin:

### Playwright

[Playwright](https://playwright.dev/), Chromium, Firefox ve WebKit'i destekleyen bir tarayıcı otomasyon kütüphanesidir.

```shell
// npm
npm install --save-dev @vitest/browser-playwright playwright
```
```shell
// yarn
yarn add --dev @vitest/browser-playwright playwright
```
```shell
// pnpm
pnpm add -D @vitest/browser-playwright playwright
```
```shell
// bun
bun add --dev @vitest/browser-playwright playwright
```
### WebdriverIO

[WebdriverIO](https://webdriver.io/), Chrome, Firefox, Safari ve Edge'i destekleyen bir tarayıcı ve mobil otomasyon test çerçevesidir.

```shell
// npm
npm install --save-dev @vitest/browser-webdriverio webdriverio
```
```shell
// yarn
yarn add --dev @vitest/browser-webdriverio webdriverio
```
```shell
// pnpm
pnpm add -D @vitest/browser-webdriverio webdriverio
```
```shell
// bun
bun add --dev @vitest/browser-webdriverio webdriverio
```
### Preview

`@vitest/browser-preview` sağlayıcısı, StackBlitz gibi WebContainer ortamları için tasarlanmıştır ve CI/CD'de kullanılmak üzere tasarlanmamıştır.

```shell
// npm
npm install --save-dev @vitest/browser-preview
```
```shell
// yarn
yarn add --dev @vitest/browser-preview
```
```shell
// pnpm
pnpm add -D @vitest/browser-preview
```
```shell
// bun
bun add --dev @vitest/browser-preview
```
HELPFUL: Daha gelişmiş tarayıcıya özgü yapılandırma için [Gelişmiş Vitest yapılandırması](#gelişmiş-vitest-yapılandırması) bölümüne bakın.

## Diğer test framework'leri

Bir Angular uygulamasını diğer test kütüphaneleri ve test çalıştırıcıları ile de birim test edebilirsiniz. Her kütüphane ve çalıştırıcının kendi kurulum prosedürleri, yapılandırması ve sözdizimi vardır.

## Sürekli entegrasyonda test etme

Sağlam bir test paketi, sürekli entegrasyon (CI) hattının önemli bir parçasıdır. CI sunucuları, testlerinizi her commit ve pull request'te otomatik olarak çalıştırmanızı sağlar.

Angular uygulamanızı bir CI sunucusunda test etmek için standart test komutunu çalıştırın:

```shell
ng test
```

Çoğu CI sunucusu, `ng test`'in algıladığı bir `CI=true` ortam değişkeni ayarlar. Bu, testlerinizi otomatik olarak etkileşimsiz, tek çalıştırma modunda yapılandırır.

CI sunucunuz bu değişkeni ayarlamıyorsa veya tek çalıştırma modunu manuel olarak zorlamanız gerekiyorsa, `--no-watch` ve `--no-progress` bayraklarını kullanabilirsiniz:

```shell
ng test --no-watch --no-progress
```

## Test hakkında daha fazla bilgi

Uygulamanızı test için kurduktan sonra, aşağıdaki test kılavuzlarını faydalı bulabilirsiniz.

|                                                                    | Ayrıntılar                                                                                      |
| :----------------------------------------------------------------- | :---------------------------------------------------------------------------------------------- |
| [Code coverage](guide/testing/code-coverage)                       | Testlerinizin uygulamanızın ne kadarını kapsadığı ve gerekli miktarları nasıl belirleyeceğiniz. |
| [Testing services](guide/testing/services)                         | Uygulamanızın kullandığı servisleri nasıl test edeceğiniz.                                      |
| [Basics of testing components](guide/testing/components-basics)    | Angular bileşenlerini test etmenin temelleri.                                                   |
| [Component testing scenarios](guide/testing/components-scenarios)  | Çeşitli bileşen test senaryoları ve kullanım durumları.                                         |
| [Testing attribute directives](guide/testing/attribute-directives) | Nitelik yönergelerinizi nasıl test edeceğiniz.                                                  |
| [Testing pipes](guide/testing/pipes)                               | Pipe'ları nasıl test edeceğiniz.                                                                |
| [Debugging tests](guide/testing/debugging)                         | Yaygın test hataları.                                                                           |
| [Testing utility APIs](guide/testing/utility-apis)                 | Angular test özellikleri.                                                                       |
# Kod coverage

Kod kapsam raporları, birim testleriniz tarafından düzgün şekilde test edilmemiş olabilecek kod tabanınızın herhangi bir bölümünü gösterir.

## Ön koşullar

Vitest ile kod kapsam raporları oluşturmak için `@vitest/coverage-v8` paketini yüklemeniz gerekir:

```shell
// npm
npm install --save-dev @vitest/coverage-v8
```
```shell
// yarn
yarn add --dev @vitest/coverage-v8
```
```shell
// pnpm
pnpm add -D @vitest/coverage-v8
```
```shell
// bun
bun add --dev @vitest/coverage-v8
```
## Rapor oluşturma

Bir kapsam raporu oluşturmak için `ng test` komutuna `--coverage` bayrağını ekleyin:

```shell
ng test --coverage
```

Testler çalıştıktan sonra komut, projede yeni bir `coverage/` dizini oluşturur. Kaynak kodunuzu ve kod kapsam değerlerini içeren bir rapor görmek için `index.html` dosyasını açın.

Her test ettiğinizde kod kapsam raporları oluşturmak istiyorsanız, `angular.json` dosyanızda `coverage` seçeneğini `true` olarak ayarlayabilirsiniz:

```json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "coverage": true
          }
        }
      }
    }
  }
}
```

## Kod coverage eşiklerini zorunlu kılma

Kod kapsam yüzdeleri, kodunuzun ne kadarının test edildiğini tahmin etmenize olanak tanır. Ekibiniz birim testi yapılması gereken minimum bir miktar belirlerse, bu minimumu yapılandırmanızda zorunlu kılabilirsiniz.

Örneğin, kod tabanının minimum %80 kod kapsamına sahip olmasını istediğinizi varsayalım. Bunu etkinleştirmek için `angular.json` dosyanıza `coverageThresholds` seçeneğini ekleyin:

```json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "coverage": true,
            "coverageThresholds": {
              "statements": 80,
              "branches": 80,
              "functions": 80,
              "lines": 80
            }
          }
        }
      }
    }
  }
}
```

Artık testlerinizi çalıştırdığınızda kapsamınız %80'in altına düşerse, komut başarısız olur.

## Gelişmiş yapılandırma

`angular.json` dosyanızda birkaç başka kapsam seçeneğini yapılandırabilirsiniz:

- `coverageInclude`: Kapsam raporuna dahil edilecek dosyaların glob kalıpları.
- `coverageExclude`: Kapsam raporundan hariç tutulacak dosyaların glob kalıpları.
- `coverageReporters`: Kullanılacak muhabir dizisi (ör. `html`, `lcov`, `json`).
- `coverageWatermarks`: HTML muhabiri için `[düşük, yüksek]` filigranlarını belirten ve raporun renk kodlamasını etkileyebilen bir nesne.

```json
{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "coverage": true,
            "coverageReporters": ["html", "lcov"],
            "coverageWatermarks": {
              "statements": [50, 80],
              "branches": [50, 80],
              "functions": [50, 80],
              "lines": [50, 80]
            }
          }
        }
      }
    }
  }
}
```
# Servisleri test etme

Servisler genellikle bileşenlerin dayandığı uygulamanızın iş mantığını içerir. Servisleri test etmek, mantığın herhangi bir bileşen veya şablondan bağımsız olarak doğru çalıştığını doğrular.

Bu kılavuz, Angular CLI projelerinin varsayılan olarak içerdiği [Vitest](https://vitest.dev/)'i kullanır. Test kurulumu hakkında daha fazla bilgi için [test genel bakış kılavuzuna](guide/testing#test-için-kurulum) bakın.

## Bir servisi test etme

Temel aritmetik işlemleri yapan bir `Calculator` servisi düşünün:

```ts
{ header: 'calculator.ts' }
import {Service} from '@angular/core';

@Service()
export class Calculator {
  add(a: number, b: number): number {
    return a + b;
  }

subtract(a: number, b: number): number {
    return a - b;
  }
}
```

Bu servisi test etmek için, her test için izole bir test ortamı oluşturan Angular'ın test aracı olan `TestBed`'i yapılandırın. Bağımlılık enjeksiyonunu kurar ve servis örneklerini almanıza olanak tanır - Angular'ın gerçek bir uygulamada her şeyi nasıl birbirine bağladığını simüle eder.

```ts
{ header: 'calculator.spec.ts' }
import {TestBed} from '@angular/core/testing';
import {beforeEach, describe, expect, it} from 'vitest';
import {Calculator} from './calculator';

describe('Calculator', () => {
  let service: Calculator;

beforeEach(() => {
    // Calculator servisini enjekte eder; servis `providedIn: 'root'`
    // kullandığı için Angular tarafından erişilebilirdir
    service = TestBed.inject(Calculator);
  });

it('adds two numbers', () => {
    expect(service.add(1, 2)).toBe(3);
  });

it('subtracts two numbers', () => {
    expect(service.subtract(5, 3)).toBe(2);
  });
});
```

Yukarıdaki örnekte, `beforeEach` bloğu her testten önce servisin taze bir örneğini enjekte eder. Bu, her testin önceki testlerden sızmış durum olmadan izole çalışmasını sağlar.

## Bağımlılıkları olan servisleri test etme

Çoğu servis, düzgün çalışmak için diğer servislere bağımlıdır. Varsayılan olarak `TestBed`, bu bağımlılıkların gerçek uygulamalarını sağlar; bu da testlerinizin uygulamanızın kullandığı gerçek kod yollarını çalıştırdığı anlamına gelir. Ancak bazen bir bağımlılık karmaşık, yavaş veya öngörülemez olabilir. Bu durumlarda, kontrollü bir yedek ile değiştirebilirsiniz.

Bir siparişin nihai fiyatını hesaplamak için `TaxCalculator`'a dayanan bir `OrderTotal` servisi düşünün:

```ts
{ header: 'tax-calculator.ts' }
import {Service} from '@angular/core';

@Service()
export class TaxCalculator {
  calculate(subtotal: number): number {
    return subtotal * 0.05;
  }
}
```

```ts
{ header: 'order-total.ts' }
import {inject, Service} from '@angular/core';
import {TaxCalculator} from './tax-calculator';

@Service()
export class OrderTotal {
  private taxCalculator = inject(TaxCalculator);

total(subtotal: number): number {
    return subtotal + this.taxCalculator.calculate(subtotal);
  }
}
```

Bu örnekte `OrderTotal`, Angular'ın bağımlılık enjeksiyon sisteminden `TaxCalculator`'ı talep etmek için `inject()` kullanır. Varsayılan olarak `TestBed`, bunun gibi basit hesaplamalar için mükemmel olan gerçek `TaxCalculator`'ı sağlar. Ancak `TaxCalculator` karmaşık mantık, ağ istekleri veya öngörülemez sonuçlar içeriyorsa, kontrollü bir yedek ile değiştirmek isteyebilirsiniz.

### Bir bağımlılığı stub ile değiştirme

Bir stub, bir bağımlılığı veya metodu öngörülebilir değerler döndüren biriyle değiştirmenin bir yoludur ve bu da test sonuçlarının doğrulanmasını kolaylaştırabilir.

`OrderTotal`'ı gerçek `TaxCalculator`'a dayanmadan test etmek için, `TestBed` yapılandırmasında bir stub sağlayabilirsiniz.

```ts
{ header: 'order-total.spec.ts' }
import {TestBed} from '@angular/core/testing';
import {beforeEach, describe, expect, it, vi, type Mocked} from 'vitest';
import {OrderTotal} from './order-total';
import {TaxCalculator} from './tax-calculator';

// Vitest'in `Mocked` yardımcı tipi stub'ın tip güvenli olmasını sağlar,
// `vi.fn()` ise her metot için bir mock fonksiyonu oluşturur
const taxCalculatorStub: Mocked<TaxCalculator> = {
  calculate: vi.fn(),
};

describe('OrderTotal', () => {
  let service: OrderTotal;

beforeEach(() => {
    // `mockReturnValue` stub için kontrollü bir dönüş değeri ayarlar
    taxCalculatorStub.calculate.mockReturnValue(5);

TestBed.configureTestingModule({
      // `providers` dizisi, `provide` ile değiştirilecek bağımlılığı
      // ve `useValue` ile stub'ı tanımlayan bir provider nesnesi kabul eder
      providers: [{provide: TaxCalculator, useValue: taxCalculatorStub}],
    });
    service = TestBed.inject(OrderTotal);
  });

it('adds tax to the subtotal', () => {
    expect(service.total(100)).toBe(105);
  });
});
```

Bu stub ile `OrderTotal` `TaxCalculator`'ı talep ettiğinde, `TestBed` bunun yerine `taxCalculatorStub`'ı kullanmayı bilir. Stub her zaman 5 döndürdüğünden, test `OrderTotal`'ın vergi oranının `TaxCalculator`'da değişip değişmediğinden bağımsız olarak ara toplamına vergi değerini doğru şekilde eklediğini doğrular.

### Spy'lar ile etkileşimleri doğrulama

Bir stub, bir bağımlılığın ne döndürdüğünü kontrol eder, ancak bazen bir servisin bağımlılığını doğru argümanlarla çağırdığını da doğrulamanız gerekir. Bu, bir fonksiyonun nasıl çağrıldığını izleyen spy'lar ile gerçekleştirilebilir. Vitest'te bu işlevsellik `vi.fn()` içine yerleştirilmiştir ve servisler arasındaki etkileşimleri doğrulamanıza olanak tanır.

const taxCalculatorStub: Mocked<TaxCalculator> = {
  calculate: vi.fn(),
};

describe('OrderTotal', () => {
  let service: OrderTotal;

beforeEach(() => {
    taxCalculatorStub.calculate.mockReturnValue(5);

TestBed.configureTestingModule({
      providers: [{provide: TaxCalculator, useValue: taxCalculatorStub}],
    });
    service = TestBed.inject(OrderTotal);
  });

it('adds tax to the subtotal', () => {
    expect(service.total(100)).toBe(105);
  });

// Spy ile etkileşimi doğrula
  it('calls the tax calculator', () => {
    service.total(100);
    expect(taxCalculatorStub.calculate).toHaveBeenCalledExactlyOnce();
  });
});
```

Yeni test, `OrderTotal`'ın toplamı hesaplarken `TaxCalculator.calculate`'i çağırdığını doğrular. Bu, servisler arasındaki etkileşimin doğru şekilde gerçekleştiğini doğrulamak istediğinizde faydalıdır.

## HTTP servisleri test etme

Birçok servis, sunucudan veri almak için Angular'ın `HttpClient`'ını kullanır. Angular, gerçek ağ istekleri yapmadan HTTP yanıtlarını kontrol etmenize olanak tanıyan `HttpClient` için özel test araçları sağlar.

`HttpClient` kullanan servisleri test etme hakkında ayrıntılar için [HTTP test kılavuzuna](guide/http/testing) bakın.
ın.
# Bileşen test'lerinin temelleri

Bir bileşen, Angular uygulamasının diğer tüm parçalarından farklı olarak, bir HTML şablonu ile bir TypeScript sınıfını birleştirir.
Bileşen gerçekten şablon ve sınıfın _birlikte çalışmasıdır_.
Bir bileşeni yeterince test etmek için, amaçlandığı gibi birlikte çalıştıklarını test etmelisiniz.

Bu tür testler, Angular'ın yaptığı gibi, bileşenin ana öğesini tarayıcı DOM'unda oluşturmayı ve bileşen sınıfının şablonu tarafından tanımlanan DOM ile etkileşimini incelemeyi gerektirir.

Angular `TestBed`, aşağıdaki bölümlerde göreceğiniz gibi bu tür testleri kolaylaştırır.
Ancak birçok durumda, DOM katılımı olmadan _bileşen sınıfını tek başına test etmek_, bileşenin davranışının çoğunu basit ve daha belirgin bir şekilde doğrulayabilir.

## Bileşen DOM test'i

Bir bileşen sadece sınıfından ibaret değildir.
Bir bileşen DOM ile ve diğer bileşenlerle etkileşim kurar.
Sınıflar tek başına, bileşenin düzgün render edilip edilmeyeceğini, kullanıcı girdisine ve hareketlerine yanıt verip vermeyeceğini veya üst ve alt bileşenleriyle entegre olup olmayacağını söyleyemez.

- `Lightswitch.clicked()` kullanıcının çağırabilmesi için bir şeye bağlı mı?
- `Lightswitch.message` görüntüleniyor mu?
- Kullanıcı `DashboardHero` bileşeni tarafından görüntülenen kahramanı gerçekten seçebilir mi?
- Kahraman adı beklendiği gibi görüntüleniyor mu $örneğin büyük harfle$?
- `Welcome` bileşeninin şablonu tarafından karşılama mesajı görüntüleniyor mu?

Bunlar, daha önce gösterilen basit bileşenler için sorunlu sorular olmayabilir.
Ancak birçok bileşen, şablonlarında tanımlanan DOM öğeleriyle karmaşık etkileşimlere sahiptir ve bileşen durumu değiştikçe HTML'nin görünüp kaybolmasına neden olur.

Bu tür soruları yanıtlamak için, bileşenlerle ilişkili DOM öğelerini oluşturmanız, bileşen durumunun uygun zamanlarda düzgün şekilde görüntülendiğini doğrulamak için DOM'u incelemeniz ve bu etkileşimlerin bileşenin beklendiği gibi davranmasına neden olup olmadığını belirlemek için ekranla kullanıcı etkileşimini simüle etmeniz gerekir.

Bu tür testleri yazmak için `TestBed`'in ek özelliklerini ve diğer test yardımcılarını kullanacaksınız.

### CLI tarafından oluşturulan test'ler

CLI, yeni bir bileşen oluşturmanızı istediğinizde varsayılan olarak sizin için bir başlangıç test dosyası oluşturur.

Örneğin, aşağıdaki CLI komutu `app/banner` klasöründe bir `Banner` bileşeni oluşturur $satır içi şablon ve stillerle$:

```shell
ng generate component banner --inline-template --inline-style
```

Ayrıca bileşen için şu şekilde görünen bir başlangıç test dosyası olan `banner.spec.ts` oluşturur:

```ts
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {Banner} from './banner';

describe('Banner', () => {
  let component: Banner;
  let fixture: ComponentFixture<Banner>;

beforeEach(async () => {
    TestBed.configureTestingModule({});

fixture = TestBed.createComponent(Banner);
    component = fixture.componentInstance;
    await fixture.whenStable();
  });

it('should create', () => {
    expect(component).toBeTruthy();
  });
});
```

### Kurulumu sadeleştirme

Bu dosyanın yalnızca son üç satırı bileşeni gerçekten test eder ve yaptıkları tek şey Angular'ın bileşeni oluşturabildiğini doğrulamaktır.

Dosyanın geri kalanı, bileşen önemli bir şeye dönüşürse gerekli _olabilecek_ daha gelişmiş testler için hazırlık yapan şablon kodudur.

Bu gelişmiş test özelliklerini aşağıdaki bölümlerde öğreneceksiniz.
Şimdilik, bu test dosyasını daha yönetilebilir bir boyuta radikal olarak küçültebilirsiniz:

```ts
describe('Banner (minimal)', () => {
  it('should create', () => {
    const fixture = TestBed.createComponent(Banner);
    const component = fixture.componentInstance;
    expect(component).toBeDefined();
  });
});
```

Daha sonra test ihtiyaçlarınıza uygun imports, providers ve daha fazla bildirim ile `TestBed.configureTestingModule()` çağıracaksınız.
İsteğe bağlı `override` metotları yapılandırmanın özelliklerini daha da ince ayar yapabilir.

NOTE: `TestBed.compileComponents` yalnızca test edilen bileşenlerde `@defer` blokları kullanıldığında gereklidir.

### `createComponent()`

`TestBed`'i yapılandırdıktan sonra, `createComponent()` metodunu çağırırsınız.

```ts
const fixture = TestBed.createComponent(Banner);
```

`TestBed.createComponent()`, `Banner` bileşeninin bir örneğini oluşturur, test çalıştırıcısı DOM'una karşılık gelen bir öğe ekler ve bir [`ComponentFixture`](#componentfixture) döndürür.

IMPORTANT: `createComponent` çağrıldıktan sonra `TestBed`'i yeniden yapılandırmayın.

`createComponent` metodu mevcut `TestBed` tanımını dondurur ve daha fazla yapılandırmaya kapatır.

Artık başka `TestBed` yapılandırma metotları, ne `configureTestingModule()`, ne `get()`, ne de herhangi bir `override...` metodu çağıramazsınız.
Denerseniz, `TestBed` bir hata fırlatır.

### `ComponentFixture`

[`ComponentFixture`](api/core/testing/ComponentFixture), oluşturulan bileşen ve karşılık gelen öğesi ile etkileşim kurmak için bir test donanımıdır.

Fixture aracılığıyla bileşen örneğine erişin ve bir beklenti ile var olduğunu doğrulayın:

```ts
const component = fixture.componentInstance;
expect(component).toBeDefined();
```

### `beforeEach()`

Bu bileşen geliştikçe daha fazla test ekleyeceksiniz.
Her test için `TestBed` yapılandırmasını tekrarlamak yerine, kurulumu bir `beforeEach()` içine ve bazı destekleyici değişkenlere çekecek şekilde yeniden düzenlersiniz:

```ts
describe('Banner (with beforeEach)', () => {
  let component: Banner;
  let fixture: ComponentFixture<Banner>;

beforeEach(async () => {
    fixture = TestBed.createComponent(Banner);
    component = fixture.componentInstance;

await fixture.whenStable(); // ilk render'ı beklemek için gerekli
  });

it('should create', () => {
    expect(component).toBeDefined();
  });
});
```

HELPFUL: `beforeEach` içinde `await fixture.whenStable` ile ilk render'ı bekleyerek tek testler senkron hale gelir.

Şimdi `fixture.nativeElement`'den bileşenin öğesini alan ve beklenen metni arayan bir test ekleyin.

```ts
it('should contain "banner works!"', () => {
  const bannerElement: HTMLElement = fixture.nativeElement;
  expect(bannerElement.textContent).toContain('banner works!');
});
```

### Bir `setup` fonksiyonu oluşturma

`beforeEach`'e alternatif olarak, her testte çağıracağınız bir kurulum fonksiyonu da oluşturabilirsiniz.
Bir kurulum fonksiyonu, parametreler aracılığıyla özelleştirilebilme avantajına sahiptir.

İşte bir kurulum fonksiyonunun nasıl görünebileceğine dair bir örnek:

```ts
function setup(providers?: StaticProviders[]): ComponentFixture<Banner> {
  TestBed.configureTestingModule({providers});
  return TestBed.createComponent(Banner);
}
```

### `nativeElement`

`ComponentFixture.nativeElement` değeri `any` tipindedir.
Daha sonra `DebugElement.nativeElement` ile karşılaşacaksınız ve o da `any` tipindedir.

Angular, derleme zamanında `nativeElement`'in ne tür bir HTML öğesi olduğunu veya bir HTML öğesi olup olmadığını bilemez.
Uygulama, sunucu veya node ortamı gibi _tarayıcı olmayan bir platformda_ çalışıyor olabilir; burada öğe azaltılmış bir API'ye sahip olabilir veya hiç mevcut olmayabilir.

Bu kılavuzdaki testler tarayıcıda çalıştırılmak üzere tasarlanmıştır, bu nedenle `nativeElement` değeri her zaman bir `HTMLElement` veya türetilmiş sınıflarından biri olacaktır.

Bir tür `HTMLElement` olduğunu bilerek, öğe ağacına daha derinlemesine dalmak için standart HTML `querySelector` kullanın.

İşte paragraf öğesini almak ve banner metnini aramak için `HTMLElement.querySelector` çağıran başka bir test:

```ts
it('should have <p> with "banner works!"', () => {
  const bannerElement: HTMLElement = fixture.nativeElement;
  const p = bannerElement.querySelector('p')!;
  expect(p.textContent).toEqual('banner works!');
});
```

### `DebugElement`

Angular _fixture_, bileşenin öğesini doğrudan `fixture.nativeElement` aracılığıyla sağlar.

```ts
const bannerElement: HTMLElement = fixture.nativeElement;
```

Bu aslında `fixture.debugElement.nativeElement` olarak uygulanan bir kolaylık metodudur.

```ts
const bannerDe: DebugElement = fixture.debugElement;
const bannerEl: HTMLElement = bannerDe.nativeElement;
```

Öğeye bu dolambaçlı yolun iyi bir nedeni vardır.

`nativeElement`'in özellikleri çalışma zamanı ortamına bağlıdır.
Bu testleri DOM'u olmayan veya DOM emülasyonu tam `HTMLElement` API'sini desteklemeyen _tarayıcı olmayan_ bir platformda çalıştırıyor olabilirsiniz.

Angular, _desteklenen tüm platformlarda_ güvenli şekilde çalışmak için `DebugElement` soyutlamasına güvenir.
Angular, bir HTML öğe ağacı oluşturmak yerine, çalışma zamanı platformu için _yerel öğeleri_ saran bir `DebugElement` ağacı oluşturur.
`nativeElement` özelliği `DebugElement`'i açar ve platforma özgü öğe nesnesini döndürür.

Bu kılavuz için örnek testler yalnızca tarayıcıda çalıştırılmak üzere tasarlandığından, bu testlerdeki `nativeElement` her zaman bir test içinde keşfedebileceğiniz tanıdık metotları ve özellikleri olan bir `HTMLElement`'dir.

İşte `fixture.debugElement.nativeElement` ile yeniden uygulanan önceki test:

```ts
it('should find the <p> with fixture.debugElement.nativeElement', () => {
  const bannerDe: DebugElement = fixture.debugElement;
  const bannerEl: HTMLElement = bannerDe.nativeElement;
  const p = bannerEl.querySelector('p')!;
  expect(p.textContent).toEqual('banner works!');
});
```

`DebugElement`, bu kılavuzun başka yerlerinde göreceğiniz gibi, testlerde faydalı olan başka metot ve özelliklere sahiptir.

`DebugElement` sembolünü Angular çekirdek kütüphanesinden içe aktarırsınız.

```ts
import {DebugElement} from '@angular/core';
```

### `By.css()`

Bu kılavuzdaki tüm testler tarayıcıda çalışsa da, bazı uygulamalar en azından bazen farklı bir platformda çalışabilir.

Örneğin, bileşen önce sunucuda render edilebilir, uygulamanın zayıf bağlantılı cihazlarda daha hızlı başlatılmasını sağlamak için bir strateji olarak.
Sunucu tarafı render'ı tam HTML öğe API'sini desteklemeyebilir.
`querySelector`'ı desteklemiyorsa, önceki test başarısız olabilir.

`DebugElement`, desteklenen tüm platformlar için çalışan sorgu metotları sunar.
Bu sorgu metotları, `DebugElement` ağacındaki bir düğüm seçim kriterlerine uyduğunda `true` döndüren bir _yüklem_ fonksiyonu alır.

Çalışma zamanı platformu için bir kütüphaneden içe aktarılan `By` sınıfının yardımıyla bir _yüklem_ oluşturursunuz.
İşte tarayıcı platformu için `By` içe aktarma:

```ts
import {By} from '@angular/platform-browser';
```

Aşağıdaki örnek, `DebugElement.query()` ve tarayıcının `By.css` metodu ile önceki testi yeniden uygular.

```ts
it('should find the <p> with fixture.debugElement.query(By.css)', () => {
  const bannerDe: DebugElement = fixture.debugElement;
  const paragraphDe = bannerDe.query(By.css('p'));
  const p: HTMLElement = paragraphDe.nativeElement;
  expect(p.textContent).toEqual('banner works!');
});
```

Bazı dikkat çekici gözlemler:

- `By.css()` statik metodu, [standart CSS seçici](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors 'CSS selectors') ile `DebugElement` düğümlerini seçer.
- Sorgu, paragraf için bir `DebugElement` döndürür.
- Paragraf öğesini almak için bu sonucu açmanız gerekir.

CSS seçiciye göre filtreleme yapıyorsanız ve yalnızca tarayıcının _yerel öğesinin_ özelliklerini test ediyorsanız, `By.css` yaklaşımı abartılı olabilir.

`querySelector()` veya `querySelectorAll()` gibi standart bir `HTMLElement` metodu ile filtreleme yapmak genellikle daha basit ve anlaşılırdır.
# Bileşen test senaryoları

Bu kılavuz yaygın bileşen test kullanım durumlarını inceler.

## Bileşen bağlama

Örnek uygulamada, `Banner` bileşeni HTML şablonunda statik başlık metni sunar.

Birkaç değişiklikten sonra, `Banner` bileşeni, bileşenin `title` özelliğine bağlanarak şu şekilde dinamik bir başlık sunar.

```typescript
{header="banner.ts"}
import {Component, signal} from '@angular/core';

@Component({
  selector: 'app-banner',
  template: '<h1>{{ title() }}</h1>',
  styles: ['h1 { color: green; font-size: 350%}'],
})
export class Banner {
  title = signal('Test Tour of Heroes');
}
```

Bu kadar minimal olsa da, bileşenin doğru içeriği olması gereken yerde görüntülediğini doğrulamak için bir test eklemeye karar verirsiniz.

### `<h1>` için sorgu

_title_ özelliği interpolasyon bağlamasını saran `<h1>` öğesinin değerini inceleyen bir dizi test yazacaksınız.

`beforeEach`'i, o öğeyi standart HTML `querySelector` ile bulmak ve `h1` değişkenine atamak için güncellersiniz.

```ts
{header: "banner.component.spec.ts"}
let component: Banner;
let fixture: ComponentFixture<Banner>;
let h1: HTMLElement;

beforeEach(() => {
  fixture = TestBed.createComponent(Banner);
  component = fixture.componentInstance; // Banner test örneği
  h1 = fixture.nativeElement.querySelector('h1');
});
```

### `createComponent()` veri bağlamaz

İlk testinizde ekranın varsayılan `title`'ı görüntülemesini görmek istersiniz.
İçgüdünüz `<h1>`'i hemen inceleyen bir test yazmaktır:

```ts
it('should display original title', () => {
  expect(h1.textContent).toContain(component.title());
});
```

_Bu test_ şu mesajla _başarısız olur_:

```shell
{hideCopy}
expected '' to contain 'Test Tour of Heroes'.
```

Bağlama, Angular **değişiklik algılama** gerçekleştirdiğinde olur.

Üretim ortamında, Angular bir bileşen oluşturduğunda veya kullanıcı bir tuşa bastığında değişiklik algılama otomatik olarak devreye girer.

`TestBed.createComponent` değişiklik algılamayı senkron olarak tetiklemez; revize edilmiş testte doğrulanan bir gerçek:

```ts
it('no title in the DOM after createComponent()', () => {
  expect(h1.textContent).toEqual('');
});
```

### `whenStable()`

`TestBed`'e `await fixture.whenStable()` ile değişiklik algılamanın çalışmasını beklemesini söyleyebilirsiniz.
Ancak o zaman `<h1>` beklenen başlığa sahip olur.

```ts
it('should display original title', async () => {
  await fixture.whenStable();
  expect(h1.textContent).toContain(component.title());
});
```

Gecikmiş değişiklik algılama kasıtlı ve kullanışlıdır.
Test yazarına, Angular veri bağlamayı başlatmadan ve [yaşam döngüsü kancalarını](guide/components/lifecycle) çağırmadan _önce_ bileşenin durumunu inceleme ve değiştirme fırsatı verir.

İşte `fixture.whenStable()` çağrılmadan _önce_ bileşenin `title` özelliğini değiştiren başka bir test.

```ts
it('should display a different test title', async () => {
  component.title.set('Test Title');
  await fixture.whenStable();
  expect(h1.textContent).toContain('Test Title');
});
```

### Signal'leri input'lara bağlama

Girdilerdeki değişiklikleri yansıtmak ve çıktıları dinlemek için sinyalleri girdilere ve fonksiyonları çıktılara dinamik olarak bağlayabilirsiniz.

```ts
import {inputBinding, outputBinding} from '@angular/core';

const fixture = TestBed.createComponent(ValueDisplay, {
  bindings: [
    inputBinding('value', value),
    outputBinding('valueChange', () =>  (/* ... */) ),
  ],
});
```

### `dispatchEvent()` ile bir input değerini değiştirme

Kullanıcı girdisini simüle etmek için girdi öğesini bulun ve `value` özelliğini ayarlayın.

Ancak önemli bir ara adım vardır.

Angular, girdi öğesinin `value` özelliğini ayarladığınızı bilmez.
`dispatchEvent()` çağrısı ile öğenin `input` olayını tetikleyene kadar o özelliği okumaz.

`TitleCasePipe` kullanan bir bileşenin aşağıdaki örneği uygun sırayı gösterir.

```ts
it('should convert hero name to Title Case', async () => {
  const hostElement = fixture.nativeElement;
  const nameInput: HTMLInputElement = hostElement.querySelector('input')!;
  const nameDisplay: HTMLElement = hostElement.querySelector('span')!;

// kullanıcının girdi kutusuna yeni bir ad girmesini simüle et
  nameInput.value = 'quick BROWN  fOx';

// Angular'ın girdi değeri değişikliğini öğrenmesi için bir DOM olayı gönder.
  nameInput.dispatchEvent(new Event('input'));

// Angular'ın title pipe üzerinden görüntü bağlamasını güncellemesini bekle
  await fixture.whenStable();

expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
});
```

## Bağımlılığı olan bileşen

Bileşenler genellikle servis bağımlılıklarına sahiptir.

`Welcome` bileşeni, oturum açmış kullanıcıya bir karşılama mesajı görüntüler.
Kullanıcının kim olduğunu, enjekte edilen `UserAuthentication`'ın bir özelliğine dayanarak bilir:

```typescript
import {Component, inject, OnInit, signal} from '@angular/core';
import {UserAuthentication} from '../model/user.authentication';

@Component({
  selector: 'app-welcome',
  template: '<h3 class="welcome"><i>{{ welcome() }}</i></h3>',
})
export class Welcome {
  private userAuth = inject(UserAuthentication);
  welcome = signal(
    this.userAuth.isLoggedIn() ? `Welcome, ${this.userAuth.user().name}` : 'Please log in.',
  );
}
```

`Welcome` bileşeni, servis ile etkileşim kuran karar mantığına sahiptir; bu mantık, bileşeni test etmeye değer kılar.

### Servis test double'ları sağlama

_Test altındaki bileşenin_ gerçek servislerle sağlanması gerekmez.

Gerçek `UserAuthentication`'ı enjekte etmek zor olabilir.
Gerçek servis kullanıcıdan oturum açma kimlik bilgileri isteyebilir ve bir kimlik doğrulama sunucusuna ulaşmaya çalışabilir.
Bu davranışları engellemek zor olabilir. Test double'ları kullanmanın testi üretimden farklı davranmasına neden olacağını unutmayın, bu nedenle bunları idareli kullanın.

### Enjekte edilen servisleri alma

Testlerin `Welcome` bileşenine enjekte edilen `UserAuthentication`'a erişmesi gerekir.

Angular'ın hiyerarşik bir enjeksiyon sistemi vardır.
`TestBed` tarafından oluşturulan kök enjektörden bileşen ağacına kadar birden fazla seviyede enjektörler olabilir.

Enjekte edilen servisi almanın en güvenli yolu, **_her zaman çalışan_** yol, **bunu _test altındaki bileşenin_ enjektöründen almaktır**.
Bileşen enjektörü, fixture'ın `DebugElement`'inin bir özelliğidir.

```ts
// Bileşene gerçekten enjekte edilen UserAuthentication
userAuth = fixture.debugElement.injector.get(UserAuthentication);
```

HELPFUL: Bu genellikle gerekli _değildir_. Servisler genellikle kök seviyesinde veya TestBed geçersiz kılmalarında sağlanır ve `TestBed.inject()` ile daha kolay alınabilir (aşağıya bakın).

### `TestBed.inject()`

Bu, fixture'ın `DebugElement`'ini kullanarak bir servisi almaktan daha kolay hatırlanır ve daha az ayrıntılıdır.

Bu test paketinde `UserAuthentication`'ın _tek_ sağlayıcısı kök test modülüdür, bu nedenle `TestBed.inject()`'i şu şekilde çağırmak güvenlidir:

```ts
userAuth = TestBed.inject(UserAuthentication);
```

HELPFUL: `TestBed.inject()`'in çalışmadığı bir kullanım durumu için, servisi neden ve ne zaman bileşenin enjektöründen almanız gerektiğini açıklayan [_Bileşen sağlayıcılarını geçersiz kılma_](#bileşen-providerlarını-geçersiz-kılma) bölümüne bakın.

### Son kurulum ve test'ler

İşte `TestBed.inject()` kullanan tam `beforeEach()`:

```ts
let fixture: ComponentFixture<Welcome>;
let comp: Welcome;
let userAuth: UserAuthentication; // TestBed tarafından enjekte edilen servis
let el: HTMLElement; // karşılama mesajını içeren DOM öğesi

beforeEach(() => {
  fixture = TestBed.createComponent(Welcome);
  comp = fixture.componentInstance;

// Kök enjektörden UserAuthentication
  userAuth = TestBed.inject(UserAuthentication);

//  "welcome" öğesini CSS seçici ile al (ör. sınıf adı ile)
  el = fixture.nativeElement.querySelector('.welcome');
});
```

Ve işte bazı testler:

```ts
it('should welcome the user', async () => {
  await fixture.whenStable();
  const content = el.textContent;

expect(content, '"Welcome ..."').toContain('Welcome');
  expect(content, 'expected name').toContain('Test User');
});

it('should welcome "Bubba"', async () => {
  userAuth.user.set({name: 'Bubba'}); // karşılama mesajı henüz gösterilmedi
  await fixture.whenStable();

expect(el.textContent).toContain('Bubba');
});

it('should request login if not logged in', async () => {
  userAuth.isLoggedIn.set(false); // karşılama mesajı henüz gösterilmedi
  await fixture.whenStable();
  const content = el.textContent;

expect(content, 'not welcomed').not.toContain('Welcome');
  expect(content, '"log in"').toMatch(/log in/i);
});
```

İlki bir akıl sağlığı testidir; `UserAuthentication`'ın çağrıldığını ve çalıştığını doğrular.

HELPFUL: `expect`'in 2. argümanı $örneğin `'expected name'`$ isteğe bağlı bir başarısızlık etiketidir.
Beklenti başarısız olursa, Vitest bu etiketi beklenti başarısızlık mesajına ekler.
Birden fazla beklentiye sahip bir spesifikasyonda, neyin yanlış gittiğini ve hangi beklentinin başarısız olduğunu netleştirmeye yardımcı olabilir.

Geri kalan testler, servis farklı değerler döndürdüğünde bileşenin mantığını doğrular.
İkinci test, kullanıcı adını değiştirmenin etkisini doğrular.
Üçüncü test, oturum açmış kullanıcı olmadığında bileşenin uygun mesajı görüntülediğini kontrol eder.

## Asenkron servise sahip bileşen

Bu örnekte, `About` bileşeni şablonu bir `Twain` bileşenine ev sahipliği yapar.
`Twain` bileşeni Mark Twain alıntılarını görüntüler.

```html
<p class="twain">
  <i>{{ quote | async }}</i>
</p>
<button type="button" (click)="getQuote()">Next quote</button>
@if (errorMessage()) {
  <p class="error">{{ errorMessage() }}</p>
}
```

HELPFUL: Bileşenin `quote` özelliğinin değeri bir `AsyncPipe` üzerinden geçer.
Bu, özelliğin bir `Promise` veya `Observable` döndürdüğü anlamına gelir.

Bu örnekte, `TwainQuotes.getQuote()` metodu size `quote` özelliğinin bir `Observable` döndürdüğünü söyler.

```ts
getQuote() {
  this.errorMessage.set('');
  this.quote = this.twainQuotes.getQuote().pipe(
    startWith('...'),
    catchError((err: any) => {
      this.errorMessage.set(err.message || err.toString());
      return of('...'); // reset message to placeholder
    }),
  );
}
```

`Twain` bileşeni, enjekte edilen `TwainQuotes`'dan alıntıları alır.
Bileşen, servis ilk alıntısını döndürmeden önce döndürülen `Observable`'ı bir yer tutucu değerle $`'...'`$ başlatır.

`catchError`, servis hatalarını yakalar, bir hata mesajı hazırlar ve başarı kanalında yer tutucu değeri döndürür.

Bunların hepsi test etmek isteyeceğiniz özelliklerdir.

### `HttpTestingController` ile HTTP isteklerini mock'layarak test etme.

Bir bileşeni test ederken, yalnızca servisin genel API'si önemli olmalıdır.
Genel olarak testler, uzak sunuculara çağrı yapmamalıdır.
Bu tür çağrıları taklit etmelidirler.

Asenkron servisiniz uzak verileri yüklemek için `HttpClient`'a güveniyorsa, HTTP düzeyinde sahte yanıtlar döndürmek için `HttpTestingController` kullanılması önerilir.

`HttpBackend`'i taklit etme hakkında daha fazla ayrıntı için [özel kılavuza](guide/http/testing) başvurun.

### Bir servisin stub uygulamasını sağlayarak test etme.

HTTP düzeyinde asenkron isteği taklit etmek mümkün olmadığında, bir alternatif spy'lardan yararlanmaktır.

Bu `app/twain/twain-quotes.spec.ts`'deki kurulum, bunu yapmanın bir yolunu gösterir:

```ts
{header: "twain.spec.ts"}
class TwainQuotesStub implements TwainQuotes {
  private testQuote = 'Test Quote';

getQuote() {
    return of(this.testQuote);
  }

// ... API'ye uyum sağlamak için her şeyi uygulayın
}

beforeEach(async () => {
  TestBed.configureTestingModule({
    providers: [{provide: TwainQuotes, useClass: TwainQuotesStub}],
  });

fixture = TestBed.createComponent(Twain);
  component = fixture.componentInstance;
  await fixture.whenStable();
  quoteEl = fixture.nativeElement.querySelector('.twain');
});
```

Stub uygulamasının orijinalin yerini nasıl aldığına odaklanın.

```ts
TestBed.configureTestingModule({
  providers: [{provide: TwainQuotes, useClass: TwainQuotesStub}],
});
```

Stub, onu enjekte eden herhangi bir bileşen veya servisin stub uygulamasını alacağı şekilde tasarlanmıştır.
Bu, `getQuote`'a yapılan herhangi bir çağrının bir test alıntısı içeren observable aldığı anlamına gelir.

Gerçek `getQuote()` metodunun aksine, bu spy sunucuyu atlar ve değeri hemen kullanılabilen senkron bir observable döndürür.

### Vitest sahte zamanlayıcıları ile asenkron test

`setTimeout` veya `Promise` gibi asenkron fonksiyonları taklit etmek için, ne zaman tetikleneceklerini kontrol etmek üzere Vitest sahte zamanlayıcılarından yararlanabilirsiniz.

```ts
it('should display error when TwainQuotes service fails', async () => {
  class TwainQuotesStub implements TwainQuotes {
    getQuote() {
      return defer(() => {
        return new Promise<string>((_, reject) => {
          setTimeout(() => reject('TwainService test failure'));
        });
      });
    }

// ... API'ye uyum sağlamak için her şeyi uygulayın
  }

TestBed.configureTestingModule({
    providers: [{provide: TwainQuotes, useClass: TwainQuotesStub}],
  });

vi.useFakeTimers(); // sahte zamanlayıcıları kurma
  const fixture = TestBed.createComponent(TwainComponent);

// render asenkron değil, temizlememiz gerekiyor
  await vi.runAllTimersAsync();

await expect(fixture.nativeElement.querySelector('.error')!.textContent).toMatch(/test failure/);
  expect(fixture.nativeElement.querySelector('.twain')!.textContent).toBe('...');

vi.useRealTimers(); // normal asenkron yürütmeye sıfırlar
});
```

### Daha fazla asenkron test

Stub servisi asenkron observable'lar döndürdüğünde, testlerinizin çoğunun da asenkron olması gerekecektir.

İşte gerçek dünyada beklediğiniz veri akışını gösteren bir test.

```ts
it('should show quote after getQuote', async () => {
  class MockTwainQuotes implements TwainQuotes {
    private subject = new Subject<string>();

getQuote() {
      return this.subject.asObservable();
    }

emit(val: string) {
      this.subject.next(val);
    }
  }

it('should show quote after getQuote (success)', async () => {
    vi.useFakeTimers();

TestBed.configureTestingModule({
      providers: [{provide: TwainQuotes, useClass: MockTwainQuotes}],
    });

const fixture = TestBed.createComponent(TwainComponent);
    const twainQuotes = TestBed.inject(TwainQuotes) as MockTwainQuotes;
    await vi.runAllTimersAsync(); // alıntı alınmadan önce render et

const quoteEl = fixture.nativeElement.querySelector('.twain');
    expect(quoteEl.textContent).toBe('...');

twainQuotes.emit('Twain Quote'); // alıntıyı yayınlar
    await vi.runAllTimersAsync(); // alıntı alındıktan sonra render et

expect(quoteEl.textContent).toBe('Twain Quote');
    expect(fixture.nativeElement.querySelector('.error')).toBeNull();

vi.useRealTimers(); // normal asenkron yürütmeye sıfırlar
  });
});
```

Alıntı öğesinin ilk render'da yer tutucu değeri $`'...'`$ görüntülediğine dikkat edin.
İlk alıntı henüz gelmemiştir.

Ardından alıntı öğesinin beklenen metni görüntülediğini doğrulayabilirsiniz.

### `zone.js` ve `fakeAsync` ile asenkron test'ler

`fakeAsync` yardımcı fonksiyonu, asenkron API'leri `zone.js` ile yamalayarak çalışan başka bir sahte saattir. `zone.js` tabanlı uygulamalarda test için yaygın olarak kullanılıyordu. `fakeAsync` kullanımı artık önerilmemektedir.

TIP: Yerel asenkron test stratejileri veya Vitest veya Jasmine'den olanlar gibi diğer sahte zamanlayıcıları (sahte saat olarak da adlandırılır) kullanmayı tercih edin.

IMPORTANT: Bu çalıştırıcı için `zone.js` yaması uygulanmadığından `fakeAsync` Vitest test çalıştırıcısı ile kullanılamaz.

## Input ve output'lara sahip bileşen

Girdi ve çıktılara sahip bir bileşen tipik olarak bir ana bileşenin görünüm şablonunda görünür.
Ana bileşen, girdi özelliğini ayarlamak için özellik bağlama ve çıktı özelliği tarafından oluşturulan olayları dinlemek için olay bağlama kullanır.

Test amacı, bu tür bağlamaların beklendiği gibi çalıştığını doğrulamaktır.
Testler girdi değerlerini ayarlamalı ve çıktı olaylarını dinlemelidir.

`DashboardHero` bileşeni bu roldeki bir bileşenin küçük bir örneğidir.
`Dashboard` bileşeni tarafından sağlanan bireysel bir kahramanı görüntüler.
O kahramana tıklamak, `Dashboard` bileşenine kullanıcının kahramanı seçtiğini söyler.

`DashboardHero` bileşeni `Dashboard` bileşeni şablonuna şu şekilde gömülüdür:

```html
@for (hero of heroes; track hero) {
  <dashboard-hero class="col-1-4" [hero]="hero" (selected)="gotoDetail($event)" />
}
```

`DashboardHero` bileşeni bir `@for` bloğunda görünür; bu blok, her bileşenin `hero` girdi özelliğini döngü değerine ayarlar ve bileşenin `selected` olayını dinler.

İşte bileşenin tam tanımı:

```typescript
@Component({
  selector: 'dashboard-hero',
  imports: [UpperCasePipe],
  template: `
    <button type="button" (click)="click()" class="hero">
      {{ hero().name | uppercase }}
    </button>
  `,
})
export class DashboardHero {
  readonly hero = input.required<Hero>();
  readonly selected = output<Hero>();

click() {
    this.selected.emit(this.hero());
  }
}
```

Bu kadar basit bir bileşeni test etmenin içsel değeri az olsa da, nasıl yapılacağını bilmek faydalıdır.
Bu yaklaşımlardan birini kullanın:

- `Dashboard` bileşeni tarafından kullanıldığı şekilde test edin
- Bağımsız bir bileşen olarak test edin
- `Dashboard` bileşeninin yedeği tarafından kullanıldığı şekilde test edin

Anlık hedef `DashboardHero` bileşenini test etmektir, `Dashboard` bileşenini değil, bu nedenle ikinci ve üçüncü seçenekleri deneyin.

### `DashboardHero` bileşenini bağımsız test etme

İşte spec dosyası kurulumunun özü.

```ts
let fixture: ComponentFixture<DashboardHero>;
let comp: DashboardHero;
let heroDe: DebugElement;
let heroEl: HTMLElement;
let expectedHero: Hero;

beforeEach(async () => {
  fixture = TestBed.createComponent(DashboardHero);
  comp = fixture.componentInstance;

// kahramanın DebugElement ve öğesini bul
  heroDe = fixture.debugElement.query(By.css('.hero'));
  heroEl = heroDe.nativeElement;

// üst bileşen tarafından sağlanan kahramanı mock'la
  expectedHero = {id: 42, name: 'Test Name'};

// üst bileşenin input özelliğini bu kahramanla ayarlamasını simüle et
  fixture.componentRef.setInput('hero', expectedHero);

// ilk veri bağlamasını bekle
  await fixture.whenStable();
});
```

Kurulum kodunun, `Dashboard`'ın tekrarlayıcısında özellik bağlama kullanarak ayarlayacağı şekilde bileşenin `hero` özelliğine bir test kahramanı $`expectedHero`$ atadığına dikkat edin.

Aşağıdaki test, kahraman adının bir bağlama kullanılarak şablona yayıldığını doğrular.

```ts
it('should display hero name in uppercase', () => {
  const expectedPipedName = expectedHero.name.toUpperCase();
  expect(heroEl.textContent).toContain(expectedPipedName);
});
```

Şablon, kahraman adını Angular `UpperCasePipe` üzerinden geçirdiğinden, test öğe değerini büyük harfli adla eşleştirmelidir.

### Tıklama

Kahramana tıklamak, ana bileşenin $muhtemelen `Dashboard`$ duyabileceği bir `selected` olayı oluşturmalıdır:

```ts
it('should raise selected event when clicked (triggerEventHandler)', () => {
  let selectedHero: Hero | undefined;
  comp.selected.subscribe((hero: Hero) => (selectedHero = hero));

heroDe.triggerEventHandler('click');
  expect(selectedHero).toBe(expectedHero);
});
```

Bileşenin `selected` özelliği, tüketiciler için RxJS senkron `Observable`'ına benzeyen bir `EventEmitter` döndürür.
Test, ana bileşenin _örtük olarak_ yaptığı gibi buna _açıkça_ abone olur.

Bileşen beklendiği gibi davranırsa, kahramanın öğesine tıklamak bileşenin `selected` özelliğine `hero` nesnesini yayınlamasını söylemelidir.

Test bu olayı `selected`'a aboneliği aracılığıyla algılar.

### `triggerEventHandler`

Önceki testteki `heroDe`, kahraman `<div>`'ini temsil eden bir `DebugElement`'dir.

Yerel öğeyle etkileşimi soyutlayan Angular özellikleri ve metotlarına sahiptir.
Bu test, `DebugElement.triggerEventHandler`'ı "click" olay adıyla çağırır.
"click" olay bağlaması, `DashboardHero.click()` çağrısıyla yanıt verir.

Angular `DebugElement.triggerEventHandler`, herhangi bir _veri bağlı olayı_ _olay adıyla_ tetikleyebilir.
İkinci parametre, işleyiciye aktarılan olay nesnesidir.

Test bir "click" olayı tetikledi.

```ts
heroDe.triggerEventHandler('click');
```

Bu durumda, test çalışma zamanı olay işleyicisinin, yani bileşenin `click()` metodunun, olay nesnesiyle ilgilenmediğini doğru bir şekilde varsayar.

HELPFUL: Diğer işleyiciler daha az hoşgörülüdür.
Örneğin, `RouterLink` yönergesi, varsa hangi fare düğmesine basıldığını tanımlayan bir `button` özelliğine sahip bir nesne bekler.
Olay nesnesi eksikse `RouterLink` yönergesi bir hata fırlatır.

### Öğeye tıklama

Aşağıdaki test alternatifi, yerel öğenin kendi `click()` metodunu çağırır; bu, _bu bileşen_ için tamamen uygundur.

```ts
it('should raise selected event when clicked (element.click)', () => {
  let selectedHero: Hero | undefined;
  comp.selected.subscribe((hero: Hero) => (selectedHero = hero));

heroEl.click();
  expect(selectedHero).toBe(expectedHero);
});
```

### `click()` yardımcı fonksiyonu

Bir düğmeye, bir bağlantıya veya rastgele bir HTML öğesine tıklamak yaygın bir test görevidir.

Bunu tutarlı ve basit hale getirmek için _tıklama tetikleme_ sürecini aşağıdaki `click()` fonksiyonu gibi bir yardımcıda kapsülleyin:

```ts
/** RouterLink olay işleyicisi için `DebugElement.triggerEventHandler`'a aktarılacak düğme olayları */
export const ButtonClickEvents = {
  left: {button: 0},
  right: {button: 2},
};

/** Öğe tıklamasını simüle eder. Varsayılan olarak fare sol düğme tıklama olayıdır. */
export function click(
  el: DebugElement | HTMLElement,
  eventObj: any = ButtonClickEvents.left,
): void {
  if (el instanceof HTMLElement) {
    el.click();
  } else {
    el.triggerEventHandler('click', eventObj);
  }
}
```

İlk parametre _tıklanacak öğedir_.
İsterseniz, ikinci parametre olarak özel bir olay nesnesi aktarın.
Varsayılan, `RouterLink` yönergesi dahil birçok işleyici tarafından kabul edilen kısmi bir [sol düğme fare olay nesnesidir](https://developer.mozilla.org/docs/Web/API/MouseEvent/button).

IMPORTANT: `click()` yardımcı fonksiyonu Angular test araçlarından **değildir**.
_Bu kılavuzun örnek kodunda_ tanımlanan bir fonksiyondur.
Tüm örnek testler bunu kullanır.
Beğenirseniz, kendi yardımcılar koleksiyonunuza ekleyin.

İşte click yardımcısını kullanan önceki test, yeniden yazılmış haliyle.

```ts
it('should raise selected event when clicked (click helper with DebugElement)', () => {
  let selectedHero: Hero | undefined;
  comp.selected.subscribe((hero: Hero) => (selectedHero = hero));

click(heroDe); // DebugElement ile click yardımcısı

expect(selectedHero).toBe(expectedHero);
});
```

## Test host içindeki bileşen

Önceki testler ana `Dashboard` bileşeninin rolünü kendileri oynadı.
Peki `DashboardHero` bileşeni bir ana bileşene düzgün şekilde veri bağlandığında doğru çalışır mı?

```typescript
@Component({
  imports: [DashboardHero],
  template: ` <dashboard-hero [hero]="hero" (selected)="onSelected($event)" />`,
})
class TestHost {
  hero: Hero = {id: 42, name: 'Test Name'};
  selectedHero: Hero | undefined;

onSelected(hero: Hero) {
    this.selectedHero = hero;
  }
}
```

Test ana bileşeni, bileşenin `hero` girdi özelliğini test kahramanıyla ayarlar.
Bileşenin `selected` olayını, yayınlanan kahramanı `selectedHero` özelliğinde kaydeden `onSelected` işleyicisine bağlar.

Daha sonra testler, `DashboardHero.selected` olayının beklenen kahramanı yayınladığını doğrulamak için `selectedHero`'yu kontrol edebilecektir.

`test-host` testleri için kurulum, bağımsız testler için kuruluma benzer:

```ts
beforeEach(async () => {
  // DashboardHero yerine TestHost oluştur
  fixture = TestBed.createComponent(TestHost);
  testHost = fixture.componentInstance;
  heroEl = fixture.nativeElement.querySelector('.hero');

await fixture.whenStable();
});
```

Bu test modülü yapılandırması iki önemli fark gösterir:

- `DashboardHero` yerine `TestHost` bileşenini _oluşturur_
- `TestHost` bileşeni, `DashboardHero.hero`'yu bir bağlama ile ayarlar

`createComponent`, bir `DashboardHero` örneği yerine bir `TestHost` örneği tutan bir `fixture` döndürür.

`TestHost`'u oluşturmak, ikincisi birincisinin şablonunda göründüğü için bir `DashboardHero` oluşturmanın yan etkisine sahiptir.
Kahraman öğesi $`heroEl`$ sorgusu onu hâlâ test DOM'unda bulur, ancak öğe ağacında daha derin bir yerde.

Testlerin kendileri neredeyse bağımsız sürümle aynıdır:

```ts
it('should display hero name', () => {
  const expectedPipedName = testHost.hero.name.toUpperCase();
  expect(heroEl.textContent).toContain(expectedPipedName);
});

it('should raise selected event when clicked', () => {
  click(heroEl);
  // seçilen kahraman, veri bağlı kahramanla aynı olmalı
  expect(testHost.selectedHero).toBe(testHost.hero);
});
```

Yalnızca seçili olay testi farklıdır.
Seçilen `DashboardHero` kahramanının olay bağlaması aracılığıyla gerçekten ana bileşene ulaştığını doğrular.

## Yönlendirme bileşeni

Bir _yönlendirme bileşeni_, `Router`'a başka bir bileşene navigasyon yapmasını söyleyen bir bileşendir.
`Dashboard` bileşeni bir _yönlendirme bileşenidir_ çünkü kullanıcı panodaki _kahraman düğmelerinden_ birine tıklayarak `HeroDetail` bileşenine navigasyon yapabilir.

Angular, şablon kodunu azaltmak ve `HttpClient`'a bağlı kodu daha etkili bir şekilde test etmek için test yardımcıları sağlar. `provideRouter` fonksiyonu doğrudan test modülünde de kullanılabilir.

```ts
beforeEach(async () => {
  TestBed.configureTestingModule({
    providers: [
      provideRouter([{path: '**', component: Dashboard}]),
      provideHttpClientTesting(),
      HeroService,
    ],
  });
  harness = await RouterTestingHarness.create();
  comp = await harness.navigateByUrl('/', Dashboard);
  TestBed.inject(HttpTestingController).expectOne('api/heroes').flush(getTestHeroes());
});
```

Aşağıdaki test, görüntülenen kahramana tıklar ve beklenen URL'ye navigasyon yapıldığını doğrular.

```ts
it('should tell navigate when hero clicked', async () => {
  // ilk <dashboard-hero> DebugElement'ini al
  const heroDe = harness.routeDebugElement!.query(By.css('dashboard-hero'));
  heroDe.triggerEventHandler('selected', comp.heroes[0]);

// bileşenin ilk kahramanının id'sine navigasyon bekleniyor
  const id = comp.heroes[0].id;
  expect(TestBed.inject(Router).url, 'should nav to HeroDetail for first hero').toEqual(
    `/heroes/${id}`,
  );
});
```

## Yönlendirilmiş bileşenler

Bir _yönlendirilmiş bileşen_, `Router` navigasyonunun hedefidir.
Özellikle bileşene giden rota _parametreler içerdiğinde_ test etmek daha zor olabilir.
`HeroDetail`, böyle bir rotanın hedefi olan _yönlendirilmiş bir bileşendir_.

Kullanıcı bir _Dashboard_ kahramanına tıkladığında, `Dashboard` `Router`'a `heroes/:id` adresine navigasyon yapmasını söyler.
`:id`, düzenlenecek kahramanın `id`'si olan bir rota parametresidir.

`Router`, bu URL'yi `HeroDetail` bileşenine giden bir rota ile eşleştirir.
Yönlendirme bilgilerini içeren bir `ActivatedRoute` nesnesi oluşturur ve bunu `HeroDetail`'in yeni bir örneğine enjekte eder.

İşte `HeroDetail`'e enjekte edilen servisler:

```ts
private heroDetailService = inject(HeroDetailService);
private route = inject(ActivatedRoute);
private router = inject(Router);
```

`HeroDetail` bileşeninin, `HeroDetailService` kullanarak karşılık gelen kahramanı almak için `id` parametresine ihtiyacı vardır.
Bileşen, `Observable` olan `ActivatedRoute.paramMap` özelliğinden `id`'yi almalıdır.

`ActivatedRoute.paramMap`'in `id` özelliğine sadece referans veremez.
Bileşenin `ActivatedRoute.paramMap` observable'ına _abone olması_ ve yaşam süresi boyunca `id`'nin değişmesine hazırlıklı olması gerekir.

```ts
constructor() {
  // `id` parametresi değiştiğinde kahramanı al
  this.route.paramMap
    .pipe(takeUntilDestroyed())
    .subscribe((pmap) => this.getHero(pmap.get('id')));
}
```

Testler, farklı rotalara navigasyon yaparak `HeroDetail`'in farklı `id` parametre değerlerine nasıl yanıt verdiğini keşfedebilir.

## İç içe bileşen test'leri

Bileşen şablonlarında genellikle iç içe bileşenler bulunur ve bu bileşenlerin şablonları daha fazla bileşen içerebilir.

Bileşen ağacı çok derin olabilir ve bazen iç içe bileşenler, ağacın tepesindeki bileşenin test edilmesinde herhangi bir rol oynamaz.

Örneğin `App` bileşeni, bağlantıları ve `RouterLink` yönergeleri olan bir navigasyon çubuğu görüntüler.

```html
<app-banner />
<app-welcome />

<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet />
```

Bağlantıları doğrulamak ancak navigasyonu doğrulamamak için `Router`'ın navigasyon yapmasına ve `Router`'ın _yönlendirilmiş bileşenleri_ nereye eklediğini işaretlemek için `<router-outlet>`'e ihtiyacınız yoktur.

`Banner` ve `Welcome` bileşenleri $`<app-banner>` ve `<app-welcome>` ile belirtilen$ da ilgisizdir.

Yine de DOM'da `App` bileşenini oluşturan herhangi bir test, bu üç bileşenin de örneklerini oluşturur ve buna izin verirseniz, bunları oluşturmak için `TestBed`'i yapılandırmanız gerekir.

Bunları bildirmeyi ihmal ederseniz, Angular derleyicisi `App` şablonundaki `<app-banner>`, `<app-welcome>` ve `<router-outlet>` etiketlerini tanımaz ve bir hata fırlatır.

Gerçek bileşenleri bildirirseniz, _onların_ iç içe bileşenlerini de bildirmeniz ve ağaçtaki _herhangi bir_ bileşene enjekte edilen _tüm_ servisler için sağlama yapmanız gerekir.

Bu bölüm kurulumu en aza indirmek için iki tekniği açıklar.
Birincil bileşeni test etmeye odaklanmak için bunları tek başına veya birlikte kullanın.

### Gereksiz bileşenleri stub'lama

İlk teknikte, testlerde çok az veya hiç rol oynamayan bileşenlerin ve yönergenin stub sürümlerini oluşturur ve bildirirsiniz.

```ts
@Component({selector: 'app-banner', template: ''})
class BannerStub {}

@Component({selector: 'router-outlet', template: ''})
class RouterOutletStub {}

@Component({selector: 'app-welcome', template: ''})
class WelcomeStub {}
```

Stub seçicileri, karşılık gelen gerçek bileşenlerin seçicileriyle eşleşir.
Ancak şablonları ve sınıfları boştur.

Ardından `TestBed.overrideComponent` kullanarak bileşeninizin `imports`'ını geçersiz kılarak bunları bildirin.

```ts
let comp: App;
let fixture: ComponentFixture<App>;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [provideRouter([]), UserAuthentication],
  }).overrideComponent(App, {
    set: {
      imports: [RouterLink, BannerStub, RouterOutletStub, WelcomeStub],
    },
  });

fixture = TestBed.createComponent(App);
  comp = fixture.componentInstance;
});
```

HELPFUL: Bu örnekteki `set` anahtarı bileşeninizdeki tüm mevcut import'ları değiştirir, yalnızca stub'ları değil tüm bağımlılıkları import ettiğinizden emin olun. Alternatif olarak import'ları seçici şekilde kaldırmak ve eklemek için `remove`/`add` anahtarlarını kullanabilirsiniz.

### `NO_ERRORS_SCHEMA`

İkinci yaklaşımda, bileşeninizin meta veri geçersiz kılmalarına `NO_ERRORS_SCHEMA` ekleyin.

```ts
beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [provideRouter([]), UserAuthentication],
  }).overrideComponent(App, {
    set: {
      imports: [], // resets all imports
      schemas: [NO_ERRORS_SCHEMA],
    },
  });
});
```

`NO_ERRORS_SCHEMA`, Angular derleyicisine tanınmayan öğeleri ve nitelikleri yok saymasını söyler.

Derleyici, `<app-root>` öğesini ve `routerLink` niteliğini tanır çünkü `TestBed` yapılandırmasında karşılık gelen `App` bileşenini ve `RouterLink`'i bildirdiniz.

Ancak `<app-banner>`, `<app-welcome>` veya `<router-outlet>` ile karşılaştığında hata fırlatmaz.
Bunları boş etiketler olarak render eder ve tarayıcı bunları yok sayar.

Artık stub bileşenlere ihtiyacınız yoktur.

### Her iki tekniği birlikte kullanma

Bunlar, testler için önemli olan şablon öğelerine bileşenin görsel yüzeyini azalttıkları için _Sığ Bileşen Testi_ olarak adlandırılan tekniklerdir.

`NO_ERRORS_SCHEMA` yaklaşımı ikisinin daha kolayıdır ancak aşırı kullanmayın.

`NO_ERRORS_SCHEMA` ayrıca derleyicinin, kasıtlı veya yanlışlıkla atladığınız veya yanlış yazdığınız eksik bileşenler ve nitelikler hakkında sizi bilgilendirmesini de engeller.
Derleyicinin bir an içinde yakalayacağı hayalet hataları kovalamak için saatler harcayabilirsiniz.

_Stub bileşen_ yaklaşımının başka bir avantajı vardır.
_Bu_ örnekteki stub'lar boş olsa da, testlerinizin bunlarla bir şekilde etkileşim kurması gerekiyorsa onlara sadeleştirilmiş şablonlar ve sınıflar verebilirsiniz.

Pratikte, bu örnekte görüldüğü gibi aynı kurulumda iki tekniği birleştireceksiniz.

```ts
beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [provideRouter([]), UserAuthentication],
  }).overrideComponent(App, {
    remove: {imports: [RouterOutlet, Welcome]},
    set: {schemas: [NO_ERRORS_SCHEMA]},
  });
});
```

Angular derleyicisi `<app-banner>` için `BannerStub`'ı oluşturur ve `routerLink` niteliğine sahip bağlantılara `RouterLink`'i uygular, ancak `<app-welcome>` ve `<router-outlet>` etiketlerini yok sayar.

### `By.directive` ve enjekte edilen directive'ler

Biraz daha kurulum, başlangıç veri bağlamasını tetikler ve navigasyon bağlantılarına referanslar alır:

```ts
beforeEach(async () => {
  await fixture.whenStable();

// RouterLinkStubDirective eklenmiş DebugElement'leri bul
  linkDes = fixture.debugElement.queryAll(By.directive(RouterLink));

// her DebugElement'in enjektörünü kullanarak
  // eklenmiş link directive örneklerini al
  routerLinks = linkDes.map((de) => de.injector.get(RouterLink));
});
```

Özel ilgi çeken üç nokta:

- `By.directive` kullanarak bağlı yönergeli bağlantı öğelerini bulun
- Sorgu, eşleşen öğelerin etrafında `DebugElement` sarmalayıcıları döndürür
- Her `DebugElement`, o öğeye bağlı yönergenin belirli örneğini içeren bir bağımlılık enjektörü ortaya çıkarır

Doğrulanacak `App` bileşeni bağlantıları şunlardır:

```html
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/about">About</a>
</nav>
```

İşte bu bağlantıların `routerLink` yönergelerine beklendiği gibi bağlandığını doğrulayan bazı testler:

```ts
it('can get RouterLinks from template', () => {
  expect(routerLinks.length, 'should have 3 routerLinks').toBe(3);
  expect(routerLinks[0].href).toBe('/dashboard');
  expect(routerLinks[1].href).toBe('/heroes');
  expect(routerLinks[2].href).toBe('/about');
});

it('can click Heroes link in template', async () => {
  const heroesLinkDe = linkDes[1]; // heroes link DebugElement

TestBed.inject(Router).resetConfig([{path: '**', children: []}]);
  heroesLinkDe.triggerEventHandler('click', {button: 0});

await fixture.whenStable();

expect(TestBed.inject(Router).url).toBe('/heroes');
});
```

## Bir `page` nesnesi kullanma

`HeroDetail` bileşeni başlık, iki kahraman alanı ve iki düğme içeren basit bir görünümdür.

Ancak bu basit formda bile bol miktarda şablon karmaşıklığı vardır.

```html
@if (hero) {
  <div>
    <h2>
      <span>{{ hero.name | titlecase }}</span> Details
    </h2>
    <div><span>id: </span>{{ hero.id }}</div>
    <div>
      <label for="name">name: </label>
      <input id="name" [(ngModel)]="hero.name" placeholder="name" />
    </div>
    <button type="button" (click)="save()">Save</button>
    <button type="button" (click)="cancel()">Cancel</button>
  </div>
}
```

Bileşeni çalıştıran testlerin ihtiyaçları:

- Öğelerin DOM'da görünmesi için kahramanın gelmesini beklemek
- Başlık metnine bir referans
- İncelemek ve ayarlamak için ad girdi kutusuna bir referans
- Tıklanabilmeleri için iki düğmeye referanslar

Böyle küçük bir form bile çetrefilli koşullu kurulum ve CSS öğe seçiminden oluşan bir karmaşa üretebilir.

Karmaşıklığı, bileşen özelliklerine erişimi ele alan ve bunları ayarlamanın mantığını kapsülleyen bir `Page` sınıfıyla yönetin.

İşte `hero-detail.component.spec.ts` için böyle bir `Page` sınıfı

```ts
class Page {
  // getter özellikleri, çağrılana kadar DOM'u sorgulamayı bekler.
  get buttons() {
    return this.queryAll<HTMLButtonElement>('button');
  }
  get saveBtn() {
    return this.buttons[0];
  }
  get cancelBtn() {
    return this.buttons[1];
  }
  get nameDisplay() {
    return this.query<HTMLElement>('span');
  }
  get nameInput() {
    return this.query<HTMLInputElement>('input');
  }

//// sorgu yardımcıları ////
  private query<T>(selector: string): T {
    return harness.routeNativeElement!.querySelector(selector)! as T;
  }

private queryAll<T>(selector: string): T[] {
    return harness.routeNativeElement!.querySelectorAll(selector) as any as T[];
  }
}
```

Artık bileşen manipülasyonu ve denetimi için önemli kancalar düzgün bir şekilde organize edilmiş ve bir `Page` örneğinden erişilebilir durumdadır.

Bir `createComponent` metodu, `page` nesnesini oluşturur ve `hero` geldiğinde boşlukları doldurur.

```ts
async function createComponent(id: number) {
  harness = await RouterTestingHarness.create();
  component = await harness.navigateByUrl(`/heroes/${id}`, HeroDetail);
  page = new Page();

const request = TestBed.inject(HttpTestingController).expectOne(`api/heroes/?id=${id}`);
  const hero = getTestHeroes().find((h) => h.id === Number(id));
  request.flush(hero ? [hero] : []);
  await harness.fixture.whenStable();
}
```

İşte konuyu pekiştirmek için birkaç `HeroDetail` bileşeni testi daha.

```ts
it("should display that hero's name", () => {
  expect(page.nameDisplay.textContent).toBe(expectedHero.name);
});

it('should navigate when click cancel', () => {
  click(page.cancelBtn);
  expect(TestBed.inject(Router).url).toEqual(`/heroes/${expectedHero.id}`);
});

it('should save when click save but not navigate immediately', () => {
  click(page.saveBtn);
  expect(TestBed.inject(HttpTestingController).expectOne({method: 'PUT', url: 'api/heroes'}));
  expect(TestBed.inject(Router).url).toEqual('/heroes/41');
});

it('should navigate when click save and save resolves', async () => {
  click(page.saveBtn);
  await harness.fixture.whenStable();
  expect(TestBed.inject(Router).url).toEqual('/heroes/41');
});

it('should convert hero name to Title Case', async () => {
  // DOM'dan adın girdi ve görüntü öğelerini al
  const hostElement: HTMLElement = harness.routeNativeElement!;
  const nameInput: HTMLInputElement = hostElement.querySelector('input')!;
  const nameDisplay: HTMLElement = hostElement.querySelector('span')!;

// kullanıcının girdi kutusuna yeni bir ad girmesini simüle et
  nameInput.value = 'quick BROWN  fOx';

// Angular'ın girdi değeri değişikliğini öğrenmesi için bir DOM olayı gönder.
  nameInput.dispatchEvent(new Event('input'));

// Angular'ın title pipe üzerinden görüntü bağlamasını güncellemesini bekle
  await harness.fixture.whenStable();

expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
});
```

## Bileşen provider'larını geçersiz kılma

`HeroDetail`, kendi `HeroDetailService`'ini sağlar.

```ts
@Component({
  /* ... */
  providers: [HeroDetailService],
})
export class HeroDetail {
  private heroDetailService = inject(HeroDetailService);
  private route = inject(ActivatedRoute);
  private router = inject(Router);
}
```

Bileşenin `HeroDetailService`'ini `TestBed.configureTestingModule`'un `providers`'ında stub'lamak mümkün değildir.
Bunlar bileşenin değil _test modülünün_ sağlayıcılarıdır.
_Fixture seviyesindeki_ bağımlılık enjektörünü hazırlarlar.

Angular, bileşeni fixture enjektörünün bir _alt_ enjektörü olan _kendi_ enjektörü ile oluşturur.
Bileşenin sağlayıcılarını (bu durumda `HeroDetailService`) alt enjektöre kaydeder.

Bir test, fixture enjektöründen alt enjektör servislerine ulaşamaz.
Ve `TestBed.configureTestingModule` da bunları yapılandıramaz.

Angular tüm bu süre boyunca gerçek `HeroDetailService`'in yeni örneklerini oluşturmuştur!

HELPFUL: Bu testler, `HeroDetailService` uzak bir sunucuya kendi XHR çağrıları yapıyorsa başarısız olabilir veya zaman aşımına uğrayabilir.
Çağrılacak bir uzak sunucu olmayabilir.

Neyse ki `HeroDetailService`, uzak veri erişimi sorumluluğunu enjekte edilen `HeroService`'e devreder.

```ts
@Service()
export class HeroDetailService {
  private heroService = inject(HeroService);
}
```

Önceki test yapılandırması, gerçek `HeroService`'i sunucu isteklerini yakalayan ve yanıtlarını taklit eden bir `TestHeroService` ile değiştirir.

Ya o kadar şanslı değilseniz?
`HeroService`'i taklit etmek zorsa?
`HeroDetailService` kendi sunucu isteklerini yapıyorsa?

`TestBed.overrideComponent` metodu, aşağıdaki kurulum varyasyonunda görüldüğü gibi bileşenin `providers`'ını kolay yönetilebilir _test double'larla_ değiştirebilir:

```ts
beforeEach(async () => {
  await TestBed.configureTestingModule({
    providers: [
      provideRouter([
        {path: 'heroes', component: HeroList},
        {path: 'heroes/:id', component: HeroDetail},
      ]),
      // Bu seviyedeki HeroDetailService İLGİSİZDİR!
      {provide: HeroDetailService, useValue: {}},
    ],
  }).overrideComponent(HeroDetail, {
    set: {providers: [{provide: HeroDetailService, useClass: HeroDetailServiceSpy}]},
  });
});
```

`TestBed.configureTestingModule`'un artık sahte bir `HeroService` sağlamadığına dikkat edin çünkü buna [ihtiyaç yoktur](#bir-spy-stub-sağlama-herodetailservicespy).

### `overrideComponent` metodu

`overrideComponent` metoduna odaklanın.

```ts
.overrideComponent(HeroDetail, {
  set: {providers: [{provide: HeroDetailService, useClass: HeroDetailServiceSpy}]},
});
```

İki argüman alır: geçersiz kılınacak bileşen tipi $`HeroDetail`$ ve bir geçersiz kılma meta veri nesnesi.
[Geçersiz kılma meta veri nesnesi](/guide/testing/utility-apis#testbed-sınıf-özeti) şu şekilde tanımlanan bir genel tiptir:

```ts
type MetadataOverride<T> = {
  add?: Partial<T>;
  remove?: Partial<T>;
  set?: Partial<T>;
};
```

Bir meta veri geçersiz kılma nesnesi, meta veri özelliklerinde öğeleri ekleyip kaldırabilir veya bu özellikleri tamamen sıfırlayabilir.
Bu örnek, bileşenin `providers` meta verilerini sıfırlar.

Tip parametresi `T`, `@Component` dekoratörüne aktaracağınız meta veri türüdür:

```ts
selector?: string;
template?: string;
templateUrl?: string;
providers?: any[];
…
```

### Bir _spy stub_ sağlama (`HeroDetailServiceSpy`)

Bu örnek, bileşenin `providers` dizisini bir `HeroDetailServiceSpy` içeren yeni bir dizi ile tamamen değiştirir.

`HeroDetailServiceSpy`, gerçek `HeroDetailService`'in tüm gerekli özelliklerini taklit eden stub bir versiyondur.
Ne alt seviye `HeroService`'i enjekte eder ne de ona devreder, bu nedenle bunun için bir test double sağlamaya gerek yoktur.

İlgili `HeroDetail` bileşen testleri, servis metotlarını gözetleyerek `HeroDetailService` metotlarının çağrıldığını doğrulayacaktır.
Buna göre stub, metotlarını spy olarak uygular:

```ts
import {vi} from 'vitest';

class HeroDetailServiceSpy {
  testHero: Hero = {...testHero};

/* klonlanmış test kahramanını yayınla */
  getHero = vi.fn(() => asyncData({...this.testHero}));

/* değişiklikler birleştirilmiş test kahramanının klonunu yayınla */
  saveHero = vi.fn((hero: Hero) => asyncData(Object.assign(this.testHero, hero)));
}
```

### Geçersiz kılma test'leri

Artık testler, spy-stub'ın `testHero`'sunu doğrudan manipüle ederek bileşenin kahramanını kontrol edebilir ve servis metotlarının çağrıldığını doğrulayabilir.

```ts
let hdsSpy: HeroDetailServiceSpy;

beforeEach(async () => {
  harness = await RouterTestingHarness.create();
  component = await harness.navigateByUrl(`/heroes/${testHero.id}`, HeroDetail);
  page = new Page();
  // bileşenin enjekte edilen HeroDetailServiceSpy'ını al
  hdsSpy = harness.routeDebugElement!.injector.get(HeroDetailService) as any;

harness.detectChanges();
});

it('should have called `getHero`', () => {
  expect(hdsSpy.getHero, 'getHero called once').toHaveBeenCalledTimes(1);
});

it("should display stub hero's name", () => {
  expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name);
});

it('should save stub hero change', async () => {
  const origName = hdsSpy.testHero.name;
  const newName = 'New Name';

page.nameInput.value = newName;

page.nameInput.dispatchEvent(new Event('input')); // tell Angular

expect(component.hero.name, 'component hero has new name').toBe(newName);
  expect(hdsSpy.testHero.name, 'service hero unchanged before save').toBe(origName);

click(page.saveBtn);
  expect(hdsSpy.saveHero, 'saveHero called once').toHaveBeenCalledTimes(1);

await harness.fixture.whenStable();
  expect(hdsSpy.testHero.name, 'service hero has new name after save').toBe(newName);
  expect(TestBed.inject(Router).url).toEqual('/heroes');
});
```

### Daha fazla geçersiz kılma

`TestBed.overrideComponent` metodu aynı veya farklı bileşenler için birden fazla kez çağrılabilir.
`TestBed`, bu diğer sınıfların parçalarını derinlemesine incelemek ve değiştirmek için benzer `overrideDirective`, `overrideModule` ve `overridePipe` metotları sunar.

Seçenekleri ve kombinasyonları kendiniz keşfedin.
# Test'lerde hata ayıklama

Testleriniz beklediğiniz gibi çalışmıyorsa, hem varsayılan Node.js ortamında hem de gerçek bir tarayıcıda hata ayıklayabilirsiniz.

## Node.js'de hata ayıklama

Varsayılan Node.js ortamında hata ayıklama, tarayıcıya özgü API'ler veya render ile ilgili olmayan sorunları teşhis etmenin genellikle en hızlı yoludur.

1.  `ng test` komutunu `--debug` bayrağı ile çalıştırın:
    ```shell
ng test --debug
    ```
2.  Test çalıştırıcısı hata ayıklama modunda başlar ve bir hata ayıklayıcının bağlanmasını bekler.
3.  Artık tercih ettiğiniz hata ayıklayıcıyı bağlayabilirsiniz. Örneğin, VS Code'daki yerleşik Node.js hata ayıklayıcısını veya Node.js için Chrome DevTools'u kullanabilirsiniz.

## Tarayıcıda hata ayıklama

Node'da bir hata ayıklama oturumu başlattığınız şekilde, Vitest ve [tarayıcı modu](/guide/testing/migrating-to-vitest#5-tarayıcı-modunu-yapılandırma-isteğe-bağlı) ile `ng test`'i `--debug` bayrağı ile kullanabilirsiniz.

Test çalıştırıcısı hata ayıklama modunda başlar ve testleri hata ayıklamak için tarayıcı geliştirici araçlarını açmanızı bekler.
# Test Yardımcı API'leri

NOTE: Bu kılavuz Vitest için güncellenirken, yardımcı API'lerin bazı açıklamaları ve örnekleri şu anda Karma/Jasmine bağlamında sunulmaktadır. Uygulanabilir yerlerde Vitest eşdeğerlerini ve güncellenmiş rehberliği sağlamak için aktif olarak çalışıyoruz.

Bu sayfa en kullanışlı Angular test özelliklerini açıklar.

Angular test araçları `TestBed`, `ComponentFixture` ve test ortamını kontrol eden bir avuç fonksiyon içerir.
[`TestBed`](#testbed-sınıf-özeti) ve [`ComponentFixture`](#componentfixture) sınıfları ayrı ayrı ele alınmaktadır.

İşte bağımsız fonksiyonların olası kullanım sırasına göre bir özeti:

| Fonksiyon    | Ayrıntılar                                                                                                                                                                                                                                                                      |
| :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [`inject`]   | Mevcut `TestBed` enjektöründen bir veya daha fazla servisi bir test fonksiyonuna enjekte eder. Bileşenin kendisi tarafından sağlanan bir servisi enjekte edemez. [debugElement.injector](guide/testing/components-scenarios#enjekte-edilen-servisleri-alma) tartışmasına bakın. |
| `getTestBed` | `TestBed`'in mevcut örneğini alır. Genellikle gereksizdir çünkü `TestBed` sınıfının statik sınıf metotları genellikle yeterlidir. `TestBed` örneği, statik metotlar olarak mevcut olmayan nadiren kullanılan birkaç üyeyi ortaya çıkarır.                                       |

Karmaşık asenkron senaryoları ele almak veya eski Zone.js tabanlı uygulamaları test etmek için [Zone.js Test Araçları](guide/testing/zone-js-testing-utilities) kılavuzuna bakın.

## `TestBed` sınıf özeti

`TestBed` sınıfı, temel Angular test araçlarından biridir.
API'si oldukça geniştir ve onu parça parça keşfedene kadar bunaltıcı olabilir.
Tam API'yi kavramaya çalışmadan önce temelleri almak için bu kılavuzun ilk bölümünü okuyun.

`configureTestingModule`'a aktarılan modül tanımı, `@NgModule` meta veri özelliklerinin bir alt kümesidir.

```ts
type TestModuleMetadata = {
  providers?: any[];
  declarations?: any[];
  imports?: any[];
  schemas?: Array<SchemaMetadata | any[]>;
};
```

Her geçersiz kılma metodu, `T`'nin metoda uygun meta veri türü olduğu, yani bir `@NgModule`, `@Component`, `@Directive` veya `@Pipe` parametresi olan bir `MetadataOverride<T>` alır.

```ts
type MetadataOverride<T> = {
  add?: Partial<T>;
  remove?: Partial<T>;
  set?: Partial<T>;
};
```

`TestBed` API'si, `TestBed`'in _global_ bir örneğini güncelleyen veya referans alan statik sınıf metotlarından oluşur.

Dahili olarak, tüm statik metotlar, `getTestBed()` fonksiyonu tarafından da döndürülen mevcut çalışma zamanı `TestBed` örneğinin metotlarını kapsar.

Her bireysel testten önce yeni bir başlangıç sağlamak için `TestBed` metotlarını bir `beforeEach()` _içinde_ çağırın.

İşte olası kullanım sırasına göre en önemli statik metotlar.

| Metotlar                 | Ayrıntılar                                                                                                                                                                                                                                                                                                                                                                                                                   |
| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `configureTestingModule` | Test shim'leri [başlangıç test ortamını](guide/testing) ve her test yazarının ihtiyaç duyduğu temel bildirimler ve bazı Angular servis yedekleri ile yapılandırılmış varsayılan bir test modülü oluşturur. <br /> Belirli bir test kümesi için test modülü yapılandırmasını imports, declarations $bileşenler, yönergeler ve pipe'lar$ ve providers ekleyip kaldırarak iyileştirmek için `configureTestingModule` çağırın. |
| `compileComponents`      | Yapılandırmayı tamamladıktan sonra test modülünü asenkron olarak derleyin. Test modülü bileşenlerinden _herhangi birinin_ asenkron olarak yüklenen kaynakları (ör. @defer blokları) varsa bu metodu **çağırmalısınız**. <br /> `compileComponents` çağrıldıktan sonra, `TestBed` yapılandırması mevcut spesifikasyonun süresi boyunca dondurulur.                                                                            |
| `createComponent<T>`     | Mevcut `TestBed` yapılandırmasına dayalı olarak `T` tipinde bir bileşen örneği oluşturun. `createComponent` çağrıldıktan sonra, `TestBed` yapılandırması mevcut spesifikasyonun süresi boyunca dondurulur.                                                                                                                                                                                                                   |
| `overrideComponent`      | Bir iç modülde derinlere gömülü olabilecek verilen bileşen sınıfı için meta verileri değiştirin.                                                                                                                                                                                                                                                                                                                             |
| `overrideDirective`      | Bir iç modülde derinlere gömülü olabilecek verilen yönerge sınıfı için meta verileri değiştirin.                                                                                                                                                                                                                                                                                                                             |
| `overridePipe`           | Bir iç modülde derinlere gömülü olabilecek verilen pipe sınıfı için meta verileri değiştirin.                                                                                                                                                                                                                                                                                                                                |
| `overrideModule`         | Verilen `NgModule` için meta verileri değiştirin. Modüllerin diğer modülleri içe aktarabileceğini hatırlayın. `overrideModule` metodu, bu iç modüllerden birini değiştirmek için mevcut test modülünün derinlerine ulaşabilir.                                                                                                                                                                                               |

|
`inject` | Mevcut `TestBed` enjektöründen bir servis alın. `inject` fonksiyonu genellikle bu amaç için yeterlidir. Ancak servisi sağlayamazsa `inject` bir hata fırlatır. <br /> Servis isteğe bağlı ise? <br /> `TestBed.inject()` metodu, Angular sağlayıcıyı bulamazsa döndürülecek nesne olan isteğe bağlı ikinci bir parametre alır $bu örnekte `null`$: `expect(TestBed.inject(NotProvided, null)).toBeNull();` `TestBed.inject` çağrıldıktan sonra, `TestBed` yapılandırması mevcut spesifikasyonun süresi boyunca dondurulur. |
|
`initTestEnvironment` | Tüm test çalıştırması için test ortamını başlatın. <br /> Test shim'leri bunu sizin için çağırır, bu nedenle kendiniz çağırmanız için nadiren bir neden vardır. <br /> Bu metodu _tam olarak bir kez_ çağırın. Bir test çalıştırmasının ortasında bu varsayılanı değiştirmek için önce `resetTestEnvironment` çağırın. <br /> Angular derleyici fabrikasını, bir `PlatformRef`'i ve varsayılan Angular test modülünü belirtin. Tarayıcı olmayan platformlar için alternatifler `@angular/platform-<platform_name>/testing/<platform_name>` genel biçiminde mevcuttur. |
| `resetTestEnvironment` | Varsayılan test modülü dahil olmak üzere başlangıç test ortamını sıfırlayın. |

Statik `TestBed` _sınıf_ metotları tarafından kapsanmayan birkaç `TestBed` örnek metodu vardır.
Bunlara nadiren ihtiyaç duyulur.

## `ComponentFixture`

`TestBed.createComponent<T>`, `T` bileşeninin bir örneğini oluşturur ve o bileşen için güçlü tipli bir `ComponentFixture` döndürür.

`ComponentFixture` özellikleri ve metotları, bileşene, DOM temsiline ve Angular ortamının yönlerine erişim sağlar.

### `ComponentFixture` özellikleri

İşte test yazarları için olası kullanım sırasına göre en önemli özellikler.

| Özellikler          | Ayrıntılar                                                                                                                                                                                                                                                  |
| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `componentInstance` | `TestBed.createComponent` tarafından oluşturulan bileşen sınıfının örneği.                                                                                                                                                                                  |
| `debugElement`      | Bileşenin kök öğesiyle ilişkili `DebugElement`. <br /> `debugElement`, test ve hata ayıklama sırasında bileşen ve DOM öğesi hakkında içgörü sağlar. Test yazarları için kritik bir özelliktir. En ilginç üyeleri [aşağıda](#debugelement) ele alınmaktadır. |
| `nativeElement`     | Bileşenin kökündeki yerel DOM öğesi.                                                                                                                                                                                                                        |
| `changeDetectorRef` | Bileşen için `ChangeDetectorRef`. <br /> `ChangeDetectorRef`, `ChangeDetectionStrategy.OnPush` yöntemine sahip bir bileşeni test ederken veya bileşenin değişiklik algılaması programatik kontrolünüz altında olduğunda en değerlidir.                      |

### `ComponentFixture` metotları

_Fixture_ metotları, Angular'ın bileşen ağacında belirli görevleri yerine getirmesini sağlar.
Simüle edilmiş kullanıcı eylemine yanıt olarak Angular davranışını tetiklemek için bu metotları çağırın.

İşte test yazarları için en kullanışlı metotlar.

| Metotlar            | Ayrıntılar                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `detectChanges`     | Bileşen için bir değişiklik algılama döngüsü tetikleyin. <br /> Bileşeni başlatmak için $`ngOnInit` çağırır$ ve test kodunuzdan sonra bileşenin veri bağlı özellik değerlerini değiştirmek için çağırın. Angular, `personComponent.name`'i değiştirdiğinizi göremez ve siz `detectChanges`'i çağırana kadar `name` bağlamasını güncellemez. <br /> Dairesel güncellemeler olmadığını doğrulamak için arkasından `checkNoChanges` çalıştırır; `detectChanges(false)` olarak çağrılmadıkça.                                                                                                                        |
| `autoDetectChanges` | Fixture'ın değişiklikleri otomatik algılamasını istediğinizde bunu `true` olarak ayarlayın. <br /> Otomatik algılama `true` olduğunda, test fixture'ı bileşeni oluşturduktan hemen sonra `detectChanges`'i çağırır. Ardından ilgili zone olaylarını dinler ve buna göre `detectChanges`'i çağırır. Test kodunuz bileşen özellik değerlerini doğrudan değiştirdiğinde, veri bağlama güncellemelerini tetiklemek için muhtemelen hâlâ `fixture.detectChanges`'i çağırmanız gerekir. <br /> Varsayılan `false`'tur. Test davranışı üzerinde ince kontrol tercih eden test yazarları bunu `false` tutma eğilimindedir. |
| `checkNoChanges`    | Bekleyen değişiklik olmadığından emin olmak için bir değişiklik algılama çalıştırması yapın. Varsa bir istisna fırlatır.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `isStable`          | Fixture şu anda _kararlı_ ise `true` döndürür. Tamamlanmamış asenkron görevler varsa `false` döndürür.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `whenStable`        | Fixture kararlı olduğunda çözülen bir promise döndürür. <br /> Asenkron etkinliğin veya asenkron değişiklik algılamanın tamamlanmasından sonra teste devam etmek için bu promise'a bağlanın. [whenStable](guide/testing/components-scenarios#whenstable) bakın.                                                                                                                                                                                                                                                                                                                                                    |
| `destroy`           | Bileşen yok edilmesini tetikleyin.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |

#### `DebugElement`

`DebugElement`, bileşenin DOM temsili hakkında kritik içgörüler sağlar.

`fixture.debugElement` tarafından döndürülen test kök bileşeninin `DebugElement`'inden, fixture'ın tüm öğe ve bileşen alt ağacını yürüyebilir $ve sorgulayabilirsiniz$.

İşte test yazarları için yaklaşık kullanım sırasına göre en kullanışlı `DebugElement` üyeleri:

| Üyeler                | Ayrıntılar                                                                                                                                                                                                                                                                                                                              |
| :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `nativeElement`       | Tarayıcıdaki karşılık gelen DOM öğesi                                                                                                                                                                                                                                                                                                   |
| `query`               | `query(predicate: Predicate<DebugElement>)` çağrısı, alt ağaçta herhangi bir derinlikte yüklemle eşleşen ilk `DebugElement`'i döndürür.                                                                                                                                                                                                 |
| `queryAll`            | `queryAll(predicate: Predicate<DebugElement>)` çağrısı, alt ağaçta herhangi bir derinlikte yüklemle eşleşen tüm `DebugElement`'leri döndürür.                                                                                                                                                                                           |
| `injector`            | Ana bağımlılık enjektörü. Örneğin, kök öğenin bileşen örneği enjektörü.                                                                                                                                                                                                                                                                 |
| `componentInstance`   | Varsa öğenin kendi bileşen örneği.                                                                                                                                                                                                                                                                                                      |
| `context`             | Bu öğe için üst bağlamı sağlayan bir nesne. Genellikle bu öğeyi yöneten bir üst bileşen örneği. <br /> Bir öğe `@for` bloğu içinde tekrarlandığında, bağlam `$implicit` özelliği satır örneği değeri olan bir `RepeaterContext`'tir. Örneğin, `@for(hero of heroes; ...)` içindeki `hero`.                                              |
| `children`            | Doğrudan `DebugElement` alt öğeleri. `children` üzerinden inerek ağaçta yürüyün. `DebugElement` ayrıca `DebugNode` nesnelerinin bir listesi olan `childNodes`'a sahiptir. `DebugElement`, `DebugNode` nesnelerinden türer ve genellikle öğelerden daha fazla düğüm vardır. Test yazarları genellikle düz düğümleri görmezden gelebilir. |
| `parent`              | `DebugElement` üst öğesi. Bu kök öğe ise Null.                                                                                                                                                                                                                                                                                          |
| `name`                | Bir öğe ise öğe etiketi adı.                                                                                                                                                                                                                                                                                                            |
| `triggerEventHandler` | Öğenin `listeners` koleksiyonunda karşılık gelen bir dinleyici varsa olayı adıyla tetikler. İkinci parametre, işleyicinin beklediği _olay nesnesidir_. <br /> Olayda bir dinleyici yoksa veya başka bir sorun varsa, `nativeElement.dispatchEvent(eventObject)` çağırmayı düşünün.                                                      |
| `listeners`           | Bileşenin `@Output` özelliklerine ve/veya öğenin olay özelliklerine bağlı geri çağırma fonksiyonları.                                                                                                                                                                                                                                   |
| `providerTokens`      | Bu bileşenin enjektör arama belirteçleri. Bileşenin kendisini ve bileşenin `providers` meta verisinde listelediği belirteçleri içerir.                                                                                                                                                                                                  |
| `source`              | Bu öğenin kaynak bileşen şablonunda bulunduğu yer.                                                                                                                                                                                                                                                                                      |
| `references`          | Şablon yerel değişkenleriyle $örneğin `#foo`$ ilişkili nesnelerin sözlüğü, yerel değişken adına göre anahtarlanmış.                                                                                                                                                                                                                   |

`DebugElement.query(predicate)` ve `DebugElement.queryAll(predicate)` metotları, kaynak öğenin alt ağacını eşleşen `DebugElement` için filtreleyen bir yüklem alır.

Yüklem, bir `DebugElement` alan ve _doğru_ bir değer döndüren herhangi bir metottur.
Aşağıdaki örnek, "content" adlı bir şablon yerel değişkenine referansı olan tüm `DebugElement`'leri bulur:

```ts
// #content referansına sahip DebugElement'leri filtrele
const contentRefs = el.queryAll((de) => de.references['content']);
```

Angular `By` sınıfı, yaygın yüklemler için üç statik metoda sahiptir:

```ts
// DebugElement CSS seçici veya directive ile bulunabilir
const h2 = fixture.debugElement.query(By.css('h2'));
const directive = fixture.debugElement.query(By.directive(Highlight));
```
# Component harness'lere genel bakış

Bir <strong>component harness</strong>, testlerin bileşenlerle son kullanıcının yaptığı gibi desteklenen bir API aracılığıyla etkileşim kurmasına olanak tanıyan bir sınıftır. Küçük yeniden kullanılabilir widget'lardan tam sayfalara kadar herhangi bir bileşen için test donanımları oluşturabilirsiniz.

Donanımlar birçok avantaj sunar:

- DOM yapısı gibi bir bileşenin uygulama ayrıntılarına karşı kendilerini izole ederek testleri daha az kırılgan hale getirirler
- Testlerin daha okunabilir ve bakımının daha kolay olmasını sağlarlar
- Birden fazla test ortamında kullanılabilirler

```ts
// MyButtonComponent adlı bir bileşen için harness ile test örneği
it('should load button with exact text', async () => {
  const button = await loader.getHarness(MyButtonComponentHarness);
  expect(await button.getText()).toBe('Confirm');
});
```

Bileşen donanımları özellikle paylaşılan UI widget'ları için kullanışlıdır. Geliştiriciler genellikle DOM yapısı ve CSS sınıfları gibi widget'ların özel uygulama ayrıntılarına bağlı testler yazarlar. Bu bağımlılıklar testleri kırılgan ve bakımı zor hale getirir. Donanımlar bir alternatif sunar - widget ile son kullanıcının yaptığı şekilde etkileşim kuran desteklenen bir API. Widget uygulama değişikliklerinin artık kullanıcı testlerini bozma olasılığı daha düşüktür. Örneğin, [Angular Material](https://material.angular.dev/components/categories) kütüphanedeki her bileşen için bir test donanımı sağlar.

Bileşen donanımları birden fazla test ortamını destekler. Aynı donanım uygulamasını hem birim hem de uçtan uca testlerde kullanabilirsiniz. Test yazarlarının yalnızca bir API öğrenmesi yeterlidir ve bileşen yazarlarının ayrı birim ve uçtan uca test uygulamalarını sürdürmesi gerekmez.

Birçok geliştirici aşağıdaki geliştirici tipi kategorilerinden biriyle sınıflandırılabilir: test yazarları, bileşen donanımı yazarları ve donanım ortamı yazarları. Bu kategorilere göre bu kılavuzdaki en ilgili bölümü bulmak için aşağıdaki tabloyu kullanın:

| Geliştirici Tipi           | Açıklama                                                                                                                                                                                                                                                                                                                 | İlgili Bölüm                                                                                    |
| :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------- |
| Test Yazarları             | Uygulamalarını test etmek için başkası tarafından yazılmış bileşen donanımlarını kullanan geliştiriciler. Örneğin, bu bir üçüncü taraf menü bileşeni kullanan ve birim testinde menü ile etkileşim kurması gereken bir uygulama geliştiricisi olabilir.                                                                  | [Testlerde bileşen donanımlarını kullanma](guide/testing/using-component-harnesses)             |
| Bileşen donanımı yazarları | Bazı yeniden kullanılabilir Angular bileşenlerini sürdüren ve kullanıcılarının testlerinde kullanması için bir test donanımı oluşturmak isteyen geliştiriciler. Örneğin, bir üçüncü taraf Angular bileşen kütüphanesinin yazarı veya büyük bir Angular uygulaması için ortak bileşenler setini sürdüren bir geliştirici. | [Bileşenleriniz için bileşen donanımları oluşturma](guide/testing/creating-component-harnesses) |
| Donanım ortamı yazarları   | Ek test ortamlarında bileşen donanımlarının kullanımı için destek eklemek isteyen geliştiriciler. Kullanıma hazır desteklenen test ortamları hakkında bilgi için [test donanımı ortamları ve yükleyicileri](guide/testing/using-component-harnesses#test-harness-ortamları-ve-yükleyicileri) bakın.                      | [Ek test ortamları için destek ekleme](guide/testing/component-harnesses-testing-environments)  |

Tam API referansı için lütfen [Angular CDK'nın bileşen donanımı API referans sayfasına](/api#angular_cdk_testing) bakın.
# Test'lerde component harness'ları kullanma

## Başlamadan önce

TIP: Bu kılavuz, [bileşen donanımları genel bakış kılavuzunu](guide/testing/component-harnesses-overview) zaten okuduğunuzu varsayar. Bileşen donanımlarını kullanmaya yeni başlıyorsanız önce onu okuyun.

### CDK Kurulumu

[Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories), bileşen oluşturmak için bir davranış temelleri setidir. Bileşen donanımlarını kullanmak için önce npm'den `@angular/cdk` yükleyin. Bunu terminalinizden Angular CLI kullanarak yapabilirsiniz:

```shell
ng add @angular/cdk
```

## Test harness ortamları ve yükleyicileri

Bileşen test donanımlarını farklı test ortamlarında kullanabilirsiniz. Angular CDK iki yerleşik ortamı destekler:

- Angular'ın `TestBed`'i ile birim testleri
- [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver) ile uçtan uca testler

Her ortam bir <strong>donanım yükleyicisi</strong> sağlar. Yükleyici, testleriniz boyunca kullandığınız donanım örneklerini oluşturur. Desteklenen test ortamları hakkında daha spesifik rehberlik için aşağıya bakın.

Ek test ortamları özel bağlamalar gerektirir. Daha fazla bilgi için [ek test ortamları için donanım desteği ekleme kılavuzuna](guide/testing/component-harnesses-testing-environments) bakın.

### Birim test'leri için `TestbedHarnessEnvironment`'dan yükleyici kullanma

Birim testleri için [TestbedHarnessEnvironment](/api/cdk/testing/testbed/TestbedHarnessEnvironment)'dan bir donanım yükleyicisi oluşturabilirsiniz. Bu ortam, Angular'ın `TestBed`'i tarafından oluşturulan bir [bileşen fixture'ı](api/core/testing/ComponentFixture) kullanır.

Fixture'ın kök öğesinde köklenen bir donanım yükleyicisi oluşturmak için `loader()` metodunu kullanın:

```ts
const fixture = TestBed.createComponent(MyComponent);

// Fixture'dan bir harness yükleyici oluştur
const loader = TestbedHarnessEnvironment.loader(fixture);
...

// Harness örneklerini almak için yükleyiciyi kullan
const myComponentHarness = await loader.getHarness(MyComponent);
```

Fixture dışına düşen öğeler için donanımlar oluşturmak üzere `documentRootLoader()` metodunu kullanın. Örneğin, kayan bir öğe veya açılır pencere görüntüleyen kod genellikle DOM öğelerini doğrudan belge gövdesine ekler, örneğin Angular CDK'daki `Overlay` servisi.

Ayrıca o fixture'ın kök öğesinde doğrudan bir donanım için `harnessForFixture()` ile doğrudan bir donanım yükleyicisi oluşturabilirsiniz.

### Uçtan uca test'ler için `SeleniumWebDriverHarnessEnvironment`'dan yükleyici kullanma

WebDriver tabanlı uçtan uca testler için `SeleniumWebDriverHarnessEnvironment` ile bir donanım yükleyicisi oluşturabilirsiniz.

Mevcut HTML belgesi için donanım yükleyici örneğini almak üzere `loader()` metodunu kullanın; belgenin kök öğesinde köklenir. Bu ortam bir WebDriver istemcisi kullanır.

```ts
let wd: webdriver.WebDriver = getMyWebDriverClient();
const loader = SeleniumWebDriverHarnessEnvironment.loader(wd);
...
const myComponentHarness = await loader.getHarness(MyComponent);
```

## Harness yükleyici kullanma

Donanım yükleyici örnekleri belirli bir DOM öğesine karşılık gelir ve o belirli öğenin altındaki öğeler için bileşen donanımı örnekleri oluşturmak üzere kullanılır.

Öğenin ilk örneği için `ComponentHarness` almak üzere `getHarness()` metodunu kullanın. Tüm `ComponentHarness` örneklerini almak için `getAllHarnesses()` metodunu kullanın.

```ts
// Öğenin ilk örneği için harness al
const myComponentHarness = await loader.getHarness(MyComponent);

// Öğenin tüm örnekleri için harness'ları al
const myComponentHarnesses = await loader.getAllHarnesses(MyComponent);
```

`getHarness` ve `getAllHarnesses`'a ek olarak, `HarnessLoader` donanımları sorgulamak için birkaç başka kullanışlı metoda sahiptir:

- `getHarnessAtIndex(...)`: Belirli bir dizindeki verilen kriterlere uyan bileşen için donanımı alır.
- `countHarnesses(...)`: Verilen kriterlere uyan bileşen örneklerinin sayısını sayar.
- `hasHarness(...)`: Verilen kriterlere uyan en az bir bileşen örneği olup olmadığını kontrol eder.

Örnek olarak, tıklandığında bir diyalog açan yeniden kullanılabilir bir dialog-button bileşeni düşünün. Aşağıdaki bileşenleri içerir ve her birinin karşılık gelen bir donanımı vardır:

- `MyDialogButton` (kullanışlı bir API ile `MyButton` ve `MyDialog`'u bir araya getirir)
- `MyButton` (standart bir düğme bileşeni)
- `MyDialog` (tıklamada `MyDialogButton` tarafından `document.body`'ye eklenen bir diyalog)

Aşağıdaki test bu bileşenlerin her biri için donanımları yükler:

```ts
let fixture: ComponentFixture<MyDialogButton>;
let loader: HarnessLoader;
let rootLoader: HarnessLoader;

beforeEach(() => {
  fixture = TestBed.createComponent(MyDialogButton);
  loader = TestbedHarnessEnvironment.loader(fixture);
  rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
});

it('loads harnesses', async () => {
  // `harnessForFixture` ile başlatılan bileşen için harness yükle
  dialogButtonHarness = await TestbedHarnessEnvironment.harnessForFixture(
    fixture,
    MyDialogButtonHarness,
  );

// Düğme öğesi fixture'ın kök öğesinin içinde, bu yüzden `loader` kullanırız.
  const buttonHarness = await loader.getHarness(MyButtonHarness);

// Diyalogu açmak için düğmeye tıkla
  await buttonHarness.click();

// Diyalog `document.body`'ye eklenir, fixture'ın kök öğesinin dışında,
  // bu yüzden bu durumda `rootLoader` kullanırız.
  const dialogHarness = await rootLoader.getHarness(MyDialogHarness);

// ... bazı doğrulamalar yap
});
```

### Farklı ortamlarda harness davranışı

Donanımlar tüm ortamlarda tamamen aynı davranmayabilir. Gerçek kullanıcı etkileşimi ile birim testlerinde oluşturulan simüle edilmiş olaylar arasında bazı farklar kaçınılmazdır. Angular CDK, davranışı mümkün olduğunca normalleştirmek için en iyi çabayı gösterir.

### Alt öğelerle etkileşim

Bu donanım yükleyicisinin kök öğesinin altındaki öğelerle etkileşim kurmak için bir alt öğenin `HarnessLoader` örneğini kullanın. Alt öğenin ilk örneği için `getChildLoader()` metodunu kullanın. Alt öğenin tüm örnekleri için `getAllChildLoaders()` metodunu kullanın.

```ts
const myComponentHarness = await loader.getHarness(MyComponent);

// '.child' seçicili alt öğenin ilk örneği için yükleyici al
const childLoader = await myComponentHarness.getLoader('.child');

// '.child' seçicili alt öğelerin tüm örnekleri için yükleyicileri al
const allChildLoaders = await myComponentHarness.getAllChildLoaders('.child');
```

### Harness'ları filtreleme

Bir sayfada belirli bir bileşenin birden fazla örneği olduğunda, bileşenin bazı özelliklerine göre filtreleme yaparak belirli bir bileşen örneği almak isteyebilirsiniz. Bunu yapmak için bir <strong>donanım yüklemi</strong> kullanabilirsiniz; bu, bir `ComponentHarness` sınıfını bileşen örneklerini filtrelemek için kullanılabilecek yüklem fonksiyonlarıyla ilişkilendirmek için kullanılan bir sınıftır.

Bir `HarnessLoader`'dan donanım istediğinizde, aslında bir HarnessQuery sağlıyorsunuz. Bir sorgu iki şeyden biri olabilir:

- Bir donanım yapıcısı. Bu sadece o donanımı alır
- Bir `HarnessPredicate`, bir veya daha fazla koşula göre filtrelenmiş donanımları alır

`HarnessPredicate`, `ComponentHarness`'ı genişleten herhangi bir şey üzerinde çalışan bazı temel filtreleri (selector, ancestor) destekler.

```ts
// Bir harness yüklemi ile MyButtonComponentHarness yükleme örneği
const disabledButtonPredicate = new HarnessPredicate(MyButtonComponentHarness, {
  selector: '[disabled]',
});
const disabledButton = await loader.getHarness(disabledButtonPredicate);
```

Ancak donanımların bileşene özgü filtreleme seçeneklerini kabul eden ve bir `HarnessPredicate` döndüren statik bir `with()` metodu uygulaması yaygındır.

```ts
// Belirli bir seçici ile MyButtonComponentHarness yükleme örneği
const button = await loader.getHarness(MyButtonComponentHarness.with({selector: 'btn'}));
```

Ek filtreleme seçenekleri her donanım uygulamasına özgü olduğundan, daha fazla ayrıntı için spesifik donanım belgelerine başvurun.

## Test harness API'lerini kullanma

Her donanım karşılık gelen bileşenine özgü bir API tanımlasa da, hepsi ortak bir temel sınıfı paylaşır: [ComponentHarness](/api/cdk/testing/ComponentHarness). Bu temel sınıf, donanım sınıfını DOM'daki bileşen örnekleriyle eşleştiren `hostSelector` statik özelliğini tanımlar.

Bunun ötesinde, herhangi bir donanımın API'si karşılık gelen bileşenine özgüdür; belirli bir donanımı nasıl kullanacağınızı öğrenmek için bileşenin belgelerine başvurun.

Örnek olarak, aşağıda [Angular Material slider bileşeni donanımını](https://material.angular.dev/components/slider/api#MatSliderHarness) kullanan bir bileşen için bir test yer almaktadır:

```ts
it('should get value of slider thumb', async () => {
  const slider = await loader.getHarness(MatSliderHarness);
  const thumb = await slider.getEndThumb();
  expect(await thumb.getValue()).toBe(50);
});
```

## Angular değişiklik algılama ile etkileşim

Varsayılan olarak test donanımları, bir DOM öğesinin durumunu okumadan önce ve bir DOM öğesiyle etkileştikten sonra Angular'ın [değişiklik algılamasını](/best-practices/runtime-performance) çalıştırır.

Testlerinizde değişiklik algılama üzerinde daha ince taneli kontrole ihtiyaç duyabileceğiniz zamanlar olabilir, örneğin bir asenkron işlem devam ederken bir bileşenin durumunu kontrol etmek gibi. Bu durumlarda, bir kod bloğu için otomatik değişiklik algılama yönetimini devre dışı bırakmak üzere `manualChangeDetection` fonksiyonunu kullanın.

```ts
it('checks state while async action is in progress', async () => {
  const buttonHarness = loader.getHarness(MyButtonHarness);
  await manualChangeDetection(async () => {
    await buttonHarness.click();
    fixture.detectChanges();
    // Asenkron tıklama işlemi devam ederken beklentileri kontrol et.
    expect(isProgressSpinnerVisible()).toBe(true);
    await fixture.whenStable();
    // Asenkron tıklama işlemi tamamlandıktan sonra beklentileri kontrol et.
    expect(isProgressSpinnerVisible()).toBe(false);
  });
});
```

Neredeyse tüm donanım metotları asenkrondur ve aşağıdakileri desteklemek için bir `Promise` döndürür:

- Birim testleri desteği
- Uçtan uca testler desteği
- Testleri asenkron davranıştaki değişikliklere karşı yalıtma

Angular ekibi, test okunabilirliğini artırmak için [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) kullanmayı önerir. `await` çağrısı, ilişkili `Promise` çözülene kadar testinizin yürütülmesini engeller.

Bazen birden fazla eylemi aynı anda gerçekleştirmek ve her birini sırayla yapmak yerine hepsinin tamamlanmasını beklemek isteyebilirsiniz. Örneğin, tek bir bileşenin birden fazla özelliğini okumak. Bu durumlarda işlemleri paralel hale getirmek için `parallel` fonksiyonunu kullanın. Parallel fonksiyonu `Promise.all`'a benzer şekilde çalışır ve aynı zamanda değişiklik algılama kontrollerini optimize eder.

```ts
it('reads properties in parallel', async () => {
  const checkboxHarness = loader.getHarness(MyCheckboxHarness);
  // checked ve intermediate özelliklerini aynı anda oku.
  const [checked, indeterminate] = await parallel(() => [
    checkboxHarness.isChecked(),
    checkboxHarness.isIndeterminate(),
  ]);
  expect(checked).toBe(false);
  expect(indeterminate).toBe(true);
});
```
# Bileşenleriniz için harness oluşturma

## Başlamadan önce

### Test harness oluşturmak ne zaman mantıklıdır?

Angular ekibi, birçok yerde kullanılan ve bir miktar kullanıcı etkileşimi olan paylaşılan bileşenler için bileşen test donanımları oluşturmayı önerir. Bu en yaygın olarak widget kütüphaneleri ve benzeri yeniden kullanılabilir bileşenler için geçerlidir. Donanımlar bu durumlar için değerlidir çünkü bu paylaşılan bileşenlerin tüketicilerine bir bileşenle etkileşim kurmak için iyi desteklenen bir API sağlarlar. Donanımları kullanan testler, DOM yapısı ve belirli olay dinleyicileri gibi bu paylaşılan bileşenlerin güvenilmez uygulama ayrıntılarına bağımlı olmaktan kaçınabilir.

Yalnızca tek bir yerde görünen bileşenler, örneğin bir uygulamadaki bir sayfa için donanımlar o kadar fazla fayda sağlamaz. Bu durumlarda, testler ve bileşenler aynı anda güncellendiğinden, bir bileşenin testleri bu bileşenin uygulama ayrıntılarına makul olarak bağımlı olabilir. Ancak donanımı hem birim hem de uçtan uca testlerde kullanacaksanız, donanımlar yine de bir miktar değer sağlar.

### CDK Kurulumu

```shell
ng add @angular/cdk
```

## `ComponentHarness`'ı genişletme

Soyut `ComponentHarness` sınıfı, tüm bileşen donanımları için temel sınıftır. Özel bir bileşen donanımı oluşturmak için `ComponentHarness`'ı genişletin ve `hostSelector` statik özelliğini uygulayın.

`hostSelector` özelliği, DOM'daki bu donanım alt sınıfıyla eşleşen öğeleri tanımlar. Çoğu durumda `hostSelector`, karşılık gelen `Component` veya `Directive`'in seçicisi ile aynı olmalıdır. Örneğin, basit bir popup bileşeni düşünün:

```ts
@Component({
  selector: 'my-popup',
  template: `
    <button (click)="toggle()">{{ triggerText() }}</button>
    @if (isOpen()) {
      <div class="my-popup-content"><ng-content></ng-content></div>
    }
  `,
})
class MyPopup {
  triggerText = input('');

isOpen = signal(false);

toggle() {
    this.isOpen.update((value) => !value);
  }
}
```

Bu durumda, bileşen için minimal bir donanım şu şekilde görünür:

```ts
class MyPopupHarness extends ComponentHarness {
  static hostSelector = 'my-popup';
}
```

`ComponentHarness` alt sınıfları yalnızca `hostSelector` özelliğini gerektirse de, çoğu donanım `HarnessPredicate` örnekleri oluşturmak için statik bir `with` metodu da uygulamalıdır. [Donanımları filtreleme bölümü](guide/testing/using-component-harnesses#harnessları-filtreleme) bunu daha ayrıntılı ele alır.

## Bileşenin DOM'unda öğeleri bulma

Bir `ComponentHarness` alt sınıfının her örneği, karşılık gelen bileşenin belirli bir örneğini temsil eder. Bileşenin ana öğesine `ComponentHarness` temel sınıfından `host()` metodu aracılığıyla erişebilirsiniz.

`ComponentHarness` ayrıca bileşenin DOM'unda öğeleri bulmak için birçok metot sunar. Bu metotlar `locatorFor()`, `locatorForOptional()` ve `locatorForAll()`'dur. Bu metotlar öğeleri bulan fonksiyonlar oluşturur, doğrudan öğeleri bulmazlar. Bu yaklaşım, güncel olmayan öğelere referansları önbelleğe almaya karşı koruma sağlar. Örneğin, bir `@if` bloğu bir öğeyi gizleyip sonra gösterdiğinde, sonuç yeni bir DOM öğesidir; fonksiyonlar kullanmak testlerin her zaman DOM'un mevcut durumuna referans vermesini sağlar.

Farklı `locatorFor` metotlarının tam liste ayrıntıları için [ComponentHarness API referans sayfasına](/api/cdk/testing/ComponentHarness) bakın.

Örneğin, yukarıda tartışılan `MyPopupHarness` örneği, tetikleyici ve içerik öğelerini almak için şu şekilde metotlar sağlayabilir:

```ts
class MyPopupHarness extends ComponentHarness {
  static hostSelector = 'my-popup';

// Tetikleyici öğeyi alır
  getTriggerElement = this.locatorFor('button');

// İçerik öğesini alır.
  getContentElement = this.locatorForOptional('.my-popup-content');
}
```

## `TestElement` örnekleri ile çalışma

`TestElement`, farklı test ortamlarında (Birim testleri, WebDriver, vb.) çalışmak üzere tasarlanmış bir soyutlamadır. Donanımları kullanırken, tüm DOM etkileşimini bu arayüz aracılığıyla gerçekleştirmelisiniz. `document.querySelector()` gibi DOM öğelerine erişmenin diğer yolları tüm test ortamlarında çalışmaz.

`TestElement`, altta yatan DOM ile etkileşim kurmak için `blur()`, `click()`, `getAttribute()` ve daha fazlası gibi bir dizi metoda sahiptir. Metotların tam listesi için [TestElement API referans sayfasına](/api/cdk/testing/TestElement) bakın.

Bileşen tüketicisinin doğrudan tanımladığı bir öğe, örneğin bileşenin ana öğesi olmadıkça, `TestElement` örneklerini donanım kullanıcılarına açığa çıkarmayın. İç öğeler için `TestElement` örneklerini açığa çıkarmak, kullanıcıların bir bileşenin iç DOM yapısına bağımlı olmasına yol açar.

Bunun yerine, son kullanıcının yapabileceği belirli eylemler veya gözlemleyebileceği belirli durumlar için daha dar odaklı metotlar sağlayın. Örneğin, önceki bölümlerdeki `MyPopupHarness` `toggle` ve `isOpen` gibi metotlar sağlayabilir:

```ts
class MyPopupHarness extends ComponentHarness {
  static hostSelector = 'my-popup';

protected getTriggerElement = this.locatorFor('button');
  protected getContentElement = this.locatorForOptional('.my-popup-content');

/** Popup'ın açık durumunu değiştirir. */
  async toggle() {
    const trigger = await this.getTriggerElement();
    return trigger.click();
  }

/** Popup'ın açık olup olmadığını kontrol eder. */
  async isOpen() {
    const content = await this.getContentElement();
    return !!content;
  }
}
```

## Alt bileşenler için harness'ları yükleme

Daha büyük bileşenler genellikle alt bileşenlerden oluşur. Bu yapıyı bir bileşenin donanımında da yansıtabilirsiniz. `ComponentHarness` üzerindeki `locatorFor` metotlarının her birinin, öğeler yerine alt donanımları bulmak için kullanılabilen alternatif bir imzası vardır.

Farklı locatorFor metotlarının tam listesi için [ComponentHarness API referans sayfasına](/api/cdk/testing/ComponentHarness) bakın.

Örneğin, yukarıdaki popup kullanılarak oluşturulan bir menü düşünün:

```ts
@Directive({
  selector: 'my-menu-item',
})
class MyMenuItem {}

@Component({
  selector: 'my-menu',
  template: `
    <my-popup>
      <ng-content />
    </my-popup>
  `,
})
class MyMenu {
  triggerText = input('');

items = contentChildren(MyMenuItem);
}
```

`MyMenu` donanımı daha sonra `MyPopup` ve `MyMenuItem` için diğer donanımlardan yararlanabilir:

```ts
class MyMenuHarness extends ComponentHarness {
  static hostSelector = 'my-menu';

protected getPopupHarness = this.locatorFor(MyPopupHarness);

/** Şu anda gösterilen menü öğelerini alır (menü kapalıysa boş liste). */
  getItems = this.locatorForAll(MyMenuItemHarness);

/** Menünün açık durumunu değiştirir. */
  async toggle() {
    const popupHarness = await this.getPopupHarness();
    return popupHarness.toggle();
  }
}

class MyMenuItemHarness extends ComponentHarness {
  static hostSelector = 'my-menu-item';
}
```

## `HarnessPredicate` ile harness örneklerini filtreleme

Bir sayfada belirli bir bileşenin birden fazla örneği olduğunda, belirli bir bileşen örneğini almak için bileşenin bazı özelliklerine göre filtreleme yapmak isteyebilirsiniz. Örneğin, belirli bir metne sahip bir düğme veya belirli bir kimliğe sahip bir menü isteyebilirsiniz. `HarnessPredicate` sınıfı, bir `ComponentHarness` alt sınıfı için bu tür kriterleri yakalayabilir. Test yazarı `HarnessPredicate` örneklerini manuel olarak oluşturabilirken, `ComponentHarness` alt sınıfının yaygın filtreler için yüklemler oluşturmak üzere bir yardımcı metot sağlaması daha kolaydır.

Her `ComponentHarness` alt sınıfında, o sınıf için bir `HarnessPredicate` döndüren statik bir `with()` metodu oluşturmalısınız. Bu, test yazarlarının kolayca anlaşılır kod yazmasına olanak tanır, ör. `loader.getHarness(MyMenuHarness.with({selector: '#menu1'}))`. Standart selector ve ancestor seçeneklerine ek olarak, `with` metodu belirli alt sınıf için anlamlı olan diğer seçenekleri de eklemelidir.

Ek seçenekler eklemesi gereken donanımlar, `BaseHarnessFilters` arayüzünü genişletmeli ve gerektiğinde ilave isteğe bağlı özellikler eklemelidir. `HarnessPredicate`, seçenek eklemek için birçok kolaylık metodu sağlar: `stringMatches()`, `addOption()` ve `add()`. Tam açıklama için [HarnessPredicate API sayfasına](/api/cdk/testing/HarnessPredicate) bakın.

Örneğin, bir menü ile çalışırken tetikleyici metnine göre filtreleme yapmak ve menü öğelerini metinlerine göre filtrelemek faydalıdır:

```ts
interface MyMenuHarnessFilters extends BaseHarnessFilters {
  /** Menünün tetikleyici metnine göre filtreler. */
  triggerText?: string | RegExp;
}

interface MyMenuItemHarnessFilters extends BaseHarnessFilters {
  /** Menü öğesinin metnine göre filtreler. */
  text?: string | RegExp;
}

class MyMenuHarness extends ComponentHarness {
  static hostSelector = 'my-menu';

/** Belirli bir `MyMenuHarness`'ı bulmak için kullanılan `HarnessPredicate` oluşturur. */
  static with(options: MyMenuHarnessFilters): HarnessPredicate<MyMenuHarness> {
    return new HarnessPredicate(MyMenuHarness, options).addOption(
      'trigger text',
      options.triggerText,
      (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text),
    );
  }

protected getPopupHarness = this.locatorFor(MyPopupHarness);

/** Menü tetikleyicisinin metnini alır. */
  async getTriggerText(): Promise<string> {
    const popupHarness = await this.getPopupHarness();
    return popupHarness.getTriggerText();
  }
}

class MyMenuItemHarness extends ComponentHarness {
  static hostSelector = 'my-menu-item';

/** Belirli bir `MyMenuItemHarness`'ı bulmak için kullanılan `HarnessPredicate` oluşturur. */
  static with(options: MyMenuItemHarnessFilters): HarnessPredicate<MyMenuItemHarness> {
    return new HarnessPredicate(MyMenuItemHarness, options).addOption(
      'text',
      options.text,
      (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text),
    );
  }

/** Menü öğesinin metnini alır. */
  async getText(): Promise<string> {
    const host = await this.host();
    return host.text();
  }
}
```

`HarnessLoader`, `LocatorFactory` veya `ComponentHarness` üzerindeki herhangi bir API'ye `ComponentHarness` sınıfı yerine `HarnessPredicate` aktarabilirsiniz. Bu, test yazarlarının bir donanım örneği oluştururken belirli bir bileşen örneğini kolayca hedeflemesine olanak tanır. Ayrıca donanım yazarının, donanım sınıfında daha güçlü API'ler etkinleştirmek için aynı `HarnessPredicate`'den yararlanmasına olanak tanır. Örneğin, yukarıda gösterilen `MyMenuHarness` üzerindeki `getItems` metodunu düşünün. Bir filtreleme API'si eklemek, donanım kullanıcılarının belirli menü öğelerini aramasına olanak tanır:

```ts
class MyMenuHarness extends ComponentHarness {
  static hostSelector = 'my-menu';

/** Menüdeki öğelerin listesini alır, isteğe bağlı olarak verilen kriterlere göre filtrelenmiş. */
  async getItems(filters: MyMenuItemHarnessFilters = {}): Promise<MyMenuItemHarness[]> {
    const getFilteredItems = this.locatorForAll(MyMenuItemHarness.with(filters));
    return getFilteredItems();
  }
  ...
}
```

## İçerik projeksiyon kullanan öğeler için `HarnessLoader` oluşturma

Bazı bileşenler, bileşenin şablonuna ek içerik projekte eder. Daha fazla bilgi için [içerik projeksiyon kılavuzuna](guide/components/content-projection) bakın.

İçerik projeksiyon kullanan bir bileşen için donanım oluştururken, `<ng-content>` içeren öğeye kapsamlı bir `HarnessLoader` örneği ekleyin. Bu, donanım kullanıcısının içerik olarak aktarılan bileşenler için ek donanımlar yüklemesine olanak tanır. `ComponentHarness`, bu gibi durumlar için HarnessLoader örnekleri oluşturmak üzere kullanılabilecek birkaç metoda sahiptir: `harnessLoaderFor()`, `harnessLoaderForOptional()`, `harnessLoaderForAll()`. Daha fazla ayrıntı için [HarnessLoader arayüzü API referans sayfasına](/api/cdk/testing/HarnessLoader) bakın.

Örneğin, yukarıdaki `MyPopupHarness` örneği, bileşenin `<ng-content>`'i içinde donanım yükleme desteği eklemek için `ContentContainerComponentHarness`'ı genişletebilir.

```ts
class MyPopupHarness extends ContentContainerComponentHarness<string> {
  static hostSelector = 'my-popup';
}
```

## Bileşenin host öğesi dışındaki öğelere erişme

Bir bileşen donanımının, karşılık gelen bileşeninin ana öğesi dışındaki öğelere erişmesi gereken zamanlar vardır. Örneğin, kayan bir öğe veya açılır pencere görüntüleyen kod genellikle DOM öğelerini doğrudan belge gövdesine ekler, örneğin Angular CDK'daki `Overlay` servisi.

Bu durumda `ComponentHarness`, belgenin kök öğesi için bir `LocatorFactory` almak üzere kullanılabilecek bir metot sağlar. `LocatorFactory`, `ComponentHarness` temel sınıfıyla aynı API'lerin çoğunu destekler ve daha sonra belgenin kök öğesine göre sorgu yapmak için kullanılabilir.

Yukarıdaki `MyPopup` bileşeninin popup içeriği için kendi şablonundaki bir öğe yerine CDK overlay'i kullandığını düşünün. Bu durumda, `MyPopupHarness`, belge kökünde köklenen bir locator factory alan `documentRootLocatorFactory()` metodu aracılığıyla içerik öğesine erişmek zorunda kalır.

```ts
class MyPopupHarness extends ComponentHarness {
  static hostSelector = 'my-popup';

/** Kök öğesi popup'ın içerik öğesi olan bir `HarnessLoader` alır. */
  async getHarnessLoaderForContent(): Promise<HarnessLoader> {
    const rootLocator = this.documentRootLocatorFactory();
    return rootLocator.harnessLoaderFor('my-popup-content');
  }
}
```

## Asenkron görevleri bekleme

`TestElement` üzerindeki metotlar, Angular'ın değişiklik algılamasını otomatik olarak tetikler ve `NgZone` içindeki görevleri bekler. Çoğu durumda donanım yazarlarının asenkron görevleri beklemek için özel bir çaba göstermesi gerekmez.

Ancak bunun yeterli olmayabileceği bazı uç durumlar vardır.

Bazı koşullar altında Angular animasyonları, animasyon olaylarının tamamen temizlenmesi için ikinci bir değişiklik algılama döngüsü ve ardından `NgZone` stabilizasyonu gerektirebilir. Buna ihtiyaç duyulan durumlarda, `ComponentHarness` ikinci turu yapmak için çağrılabilecek bir `forceStabilize()` metodu sunar.

NgZone dışında görevler planlamak için `NgZone.runOutsideAngular()` kullanabilirsiniz. `NgZone` dışındaki görevleri açıkça beklemeniz gerekiyorsa, otomatik olarak gerçekleşmediğinden karşılık gelen donanımdaki `waitForTasksOutsideAngular()` metodunu çağırın.
# `animate.enter` ve `animate.leave` ile uygulamalarınızı animasyonlama

Iyi tasarlanmis animasyonlar uygulamanizi daha sezgisel ve etkilesimli hale getirebilir, ancak sadece gorsel bir unsur degildir.
Animasyonlar uygulamanizi ve kullanici deneyimini bircok sekilde iyilestirebilir:

- Animasyonlar olmadan, web sayfasi gecisleri ani ve rahatsiz edici gorunebilir
- Hareket, kullanici deneyimini buyuk olcude gelistirir, bu nedenle animasyonlar kullanicilara uygulamanin eylemlerine verdigi yaniti algilama sansi tanir
- Iyi animasyonlar, kullanicinin dikkatini bir is akisi boyunca duzgunce yonlendirebilir

Angular, uygulamanizin elemanlarini animasyonlamak icin `animate.enter` ve `animate.leave` saglar. Bu iki ozellik, uygun zamanlarda giris ve cikis CSS siniflarini uygular veya ucuncu parti kutuphanelerden animasyonlar uygulamak icin fonksiyonlari cagrir. `animate.enter` ve `animate.leave` yonerge degildir. Bunlar dogrudan Angular derleyicisi tarafindan desteklenen ozel API'lerdir. Elemanlarda dogrudan kullanilabilir ve ayrica bir ana baglama olarak da kullanilabilir.

## `animate.enter`

DOM'a _giren_ elemanlari animasyonlamak icin `animate.enter` kullanabilirsiniz. Giris animasyonlarini gecisler veya anahtar kare animasyonlari ile CSS siniflari kullanarak tanimlayabilirsiniz.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts">
    <docs-code header="enter.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts" />
    <docs-code header="enter.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.html" />
    <docs-code header="enter.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.css"/>
</docs-code-multifile>

Animasyon tamamlandiginda, Angular `animate.enter`'da belirttiginiz sinif veya siniflari DOM'dan kaldirir. Animasyon siniflari yalnizca animasyon aktifken mevcuttur.

NOTE: Bir elemanda birden fazla anahtar kare animasyonu veya gecis ozelligi kullanildiginda, Angular tum siniflari yalnizca en uzun animasyon tamamlandiktan _sonra_ kaldirir.

`animate.enter`'i kontrol akisi veya dinamik ifadeler gibi diger Angular ozellikleriyle kullanabilirsiniz. `animate.enter` hem tek bir sinif dizesini (boslukla ayrilmis birden fazla sinif ile) hem de bir sinif dizesi dizisini kabul eder.

CSS gecisleri kullanimi hakkinda kisa bir not: Anahtar kare animasyonlari yerine gecisleri kullanmayi secerseniz, `animate.enter` ile elemana eklenen siniflar gecisin _hedef_ durumunu temsil eder. Temel eleman CSS'iniz, animasyon calismadigi zaman elemanin nasil gorunecegini belirler, bu da muhtemelen CSS gecisinin son durumuna benzer. Bu nedenle, gecisinizin calismasi icin uygun bir _baslangic_ durumuna sahip olmak icin yine de `@starting-style` ile eslestirmeniz gerekir.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts">
    <docs-code header="enter-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts" />
    <docs-code header="enter-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.html" />
    <docs-code header="enter-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css"/>
</docs-code-multifile>

## `animate.leave`

DOM'dan _ayrilan_ elemanlari animasyonlamak icin `animate.leave` kullanabilirsiniz. Cikis animasyonlarini donusumler veya anahtar kare animasyonlari ile CSS siniflari kullanarak tanimlayabilirsiniz.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts">
    <docs-code header="leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts" />
    <docs-code header="leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.html" />
    <docs-code header="leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.css"/>
</docs-code-multifile>

Animasyon tamamlandiginda, Angular animasyonlu elemani DOM'dan otomatik olarak kaldirir.

NOTE: Bir elemanda birden fazla anahtar kare animasyonu veya gecis ozelligi kullanildiginda, Angular elemani yalnizca bu animasyonlarin en uzunu tamamlandiktan _sonra_ kaldirir.

`animate.leave` sinyallerle ve diger baglamalarla da kullanilabilir. `animate.leave`'i tek bir sinif veya birden fazla sinif ile kullanabilirsiniz. Bosluklu basit bir dize veya bir dize dizisi olarak belirtin.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts">
    <docs-code header="leave-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts" />
    <docs-code header="leave-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.html" />
    <docs-code header="leave-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css"/>
</docs-code-multifile>

### Eleman kaldırma sırası

`animate.leave` animasyonlarinin nasil calistirildiginda ve bir animasyonun ne zaman gercekleseceginde bazi incelikler vardir. `animate.leave`, kaldirilan elemanin uzerine yerlestirilmisse calisir ve `animate.leave` kaldirilan elemanin bir _alt ogesi_ olan bir elemana yerlestirilmisse, bu alt eleman animasyonlari ust dugum DOM'dan kaldirilmadan _once_ gerceklesir. Bu, ust dugum erkenden kaybolmadan alt elemanlari guvenle animasyonla kaldirabilmenizi saglar.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.ts">
    <docs-code header="leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.ts" />
    <docs-code header="leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.html" />
    <docs-code header="leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.css"/>
</docs-code-multifile>

## Olay bağlamaları, fonksiyonlar ve üçüncü parti kütüphaneler

Hem `animate.enter` hem de `animate.leave`, fonksiyon cagrilarina izin veren olay baglama sozdizimini destekler. Bu sozdizimini bilesen kodunuzdaki bir fonksiyonu cagirmak veya [GSAP](https://gsap.com/), [anime.js](https://animejs.com/) veya herhangi bir JavaScript animasyon kutuphanesi gibi ucuncu parti animasyon kutuphanelerini kullanmak icin kullanabilirsiniz.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts">
    <docs-code header="leave-event.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts" />
    <docs-code header="leave-event.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.html" />
    <docs-code header="leave-event.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css"/>
</docs-code-multifile>

`$event` nesnesi `AnimationCallbackEvent` tipindedir. Elemani `target` olarak icerir ve animasyon bittiginde cercevye bildirimde bulunmak icin bir `animationComplete()` fonksiyonu saglar.

IMPORTANT: `animate.leave` kullanirken Angular'in elemani kaldirmasi icin `animationComplete()` fonksiyonunu **mutlaka** cagirmaniz gerekir.

`animate.leave` kullanirken `animationComplete()` cagirmazsaniz, Angular dort saniyelik bir gecikmeden sonra fonksiyonu otomatik olarak cagrir. `MAX_ANIMATION_TIMEOUT` tokenini milisaniye cinsinden saglayarak gecikme suresini yapilandirabilirsiniz.

```typescript
{ provide: MAX_ANIMATION_TIMEOUT, useValue: 6000 }
```

## Eski Angular animasyonlarıyla uyumluluk

Eski animasyonlari `animate.enter` ve `animate.leave` ile ayni bilesen icinde kullanamazsiniz. Bunu yapmak, giris siniflarinin eleman uzerinde kalmasina veya ayrilan dugumlerin kaldirilmamasina yol acar. Ayni _uygulama_ icinde hem eski animasyonlari hem de yeni `animate.enter` ve `animate.leave` animasyonlarini kullanmak ise sorun degildir. Tek istisna icerik projeksiyonudur. Eski animasyonlari olan bir bilesenden `animate.enter` veya `animate.leave` olan baska bir bilesene icerik projeksiyonu yapiyorsaniz veya tam tersi, bu ayni bilesende birlikte kullaniliyormus gibi ayni davranisa yol acar. Bu desteklenmemektedir.

## Test etme

TestBed, test ortaminizda animasyonlari etkinlestirmek veya devre disi birakmak icin yerlesik destek saglar. CSS animasyonlari calismak icin bir tarayici gerektirir ve API'lerin cogu test ortaminda mevcut degildir. Varsayilan olarak TestBed, test ortamlarinizdaki animasyonlari sizin icin devre disi birakir.

Animasyonlarin bir tarayici testinde, ornegin uctan uca bir testte animasyonlandigini test etmek istiyorsaniz, test yapilandirmanizda `animationsEnabled: true` belirterek TestBed'i animasyonlari etkinlestirecek sekilde yapilandirabilirsiniz.

```typescript
TestBed.configureTestingModule({animationsEnabled: true});
```

Bu, test ortaminizda animasyonlari normal sekilde davranacak sekilde yapilandirir.

NOTE: Bazi test ortamlari `animationstart`, `animationend` ve bunlarin gecis olay karsiliklari gibi animasyon olaylarini yayinlamaz.

## Angular animasyonları hakkında daha fazla bilgi

Asagidakilerle de ilgilenebilirsiniz:
# CSS ile uygulamanızı animasyonlama

CSS, uygulamanizda guzel ve ilgi cekici animasyonlar olusturmaniz icin guclu bir arac seti sunar.

## Yerel CSS'de animasyonlar nasıl yazılır

Daha once yerel CSS animasyonlari yazmadiysaniz, baslangic icin bir dizi mukemmel rehber vardir. Bunlardan biraci:
[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)

ve birkaç video:
[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)

Bu cesitli rehber ve egitimlerin bazilarina goz atin, ardindan bu rehbere geri donun.

## Yeniden kullanılabilir animasyonlar oluşturma

`@keyframes` kullanarak uygulamaniz genelinde paylasabileceginiz yeniden kullanilabilir animasyonlar olusturabilirsiniz. Paylasilmis bir CSS dosyasinda anahtar kare animasyonlari tanimlayin ve uygulamanizda istediginiz her yerde bu anahtar kare animasyonlarini yeniden kullanabileceksiniz.

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-shared"/>

`animated-class` sinifini bir elemana eklemek, o eleman uzerinde animasyonu tetikler.

## Bir geçişi animasyonlama

### Durum ve stilleri animasyonlama

Iki farkli durum arasinda animasyon yapmak isteyebilirsiniz, ornegin bir eleman acildiginda veya kapatildiginda. Bunu anahtar kare animasyonu veya gecis stili kullanarak CSS siniflariyla gerceklestirebilirsiniz.

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-states"/>

`open` veya `closed` durumunu tetiklemek, bileseninizdeki eleman uzerinde siniflari degistirerek yapilir. Bunu nasil yapacaginiza dair ornekleri [sablon rehberimizde](guide/templates/binding#css-sınıfı-ve-stil-özelliği-bağlamaları) bulabilirsiniz.

[Stilleri dogrudan animasyonlama](guide/templates/binding#css-stil-özellikleri) icin sablon rehberinde benzer ornekler gorebilirsiniz.

### Geçişler, zamanlama ve yumuşatma

Animasyon genellikle zamanlama, gecikme ve yumusaklik davranislarini ayarlamayi gerektirir. Bu, bircok CSS ozelligi veya kisayol ozellikleri kullanilarak yapilabilir.

CSS'de bir anahtar kare animasyonu icin `animation-duration`, `animation-delay` ve `animation-timing-function` belirtin veya alternatif olarak `animation` kisayol ozelligini kullanin.

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-timing"/>

Benzer sekilde, `@keyframes` kullanmayan animasyonlar icin `transition-duration`, `transition-delay`, `transition-timing-function` ve `transition` kisayolunu kullanabilirsiniz.

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="transition-timing"/>

### Bir animasyonu tetikleme

Animasyonlar CSS stilleri veya siniflari degistirerek tetiklenebilir. Bir sinif bir elemanda mevcut oldigunda, animasyon gerceklesir. Sinifi kaldirmak, elemani o eleman icin tanimlanmis CSS'e geri dondurecektir. Iste bir ornek:

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.ts">
    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.ts" />
    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.html" />
    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.css"/>
</docs-code-multifile>

## Geçiş ve tetikleyiciler

### Otomatik yüksekliği animasyonlama

Otomatik yukseklige animasyon yapmak icin CSS Grid kullanabilirsiniz.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.html" />
    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.css"  />
</docs-code-multifile>

Tum tarayicilari destekleme konusunda endiselenmeniz gerekmiyorsa, otomatik yukseklige animasyon yapmanin gercek cozumu olan `calc-size()`'i da inceleyebilirsiniz. Daha fazla bilgi icin [MDN belgelerine](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) ve [bu egitime](https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/) bakin.

### Görünüme giriş ve çıkış animasyonu

Bir oge gorünume girdiginde veya gorünumden ayrildiginda animasyonlar olusturabilirsiniz. Bir elemanin gorünume girisini animasyonlamaya bakalim. Bunu, eleman gorünume girdiginde animasyon siniflari uygulayacak olan `animate.enter` ile yapacagiz.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.ts">
    <docs-code header="insert.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.ts" />
    <docs-code header="insert.html" path="adev/src/content/examples/animations/src/app/native-css/insert.html" />
    <docs-code header="insert.css" path="adev/src/content/examples/animations/src/app/native-css/insert.css"  />
</docs-code-multifile>

Bir elemanin gorünumden ayrilirken animasyonlanmasi, gorünume girerken animasyonlamaya benzer. Eleman gorünumden ayrilirken hangi CSS siniflarinin uygulanacagini belirtmek icin `animate.leave` kullanin.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.ts">
    <docs-code header="remove.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.ts" />
    <docs-code header="remove.html" path="adev/src/content/examples/animations/src/app/native-css/remove.html" />
    <docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css"  />
</docs-code-multifile>

`animate.enter` ve `animate.leave` hakkinda daha fazla bilgi icin [Giris ve Cikis animasyonlari rehberine](guide/animations) bakin.

### Artırma ve azaltma animasyonu

Artirma ve azaltmada animasyon uygulamalarda yaygin bir kaliptir. Bu davranisi nasil gerceklestirebileceginize dair bir ornek.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts">
    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts" />
    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.html" />
    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.css" />
</docs-code-multifile>

### Bir animasyonu veya tüm animasyonları devre dışı bırakma

Belirttiginiz animasyonlari devre disi birakmak istiyorsaniz, birden fazla seceeneginiz vardir.

1. Animasyon ve gecisi `none` olarak zorlayan ozel bir sinif olusturun.

```css
.no-animation {
  animation: none !important;
  transition: none !important;
}
```

Bu sinifi bir elemana uygulamak, o eleman uzerindeki herhangi bir animasyonun calismesini engeller. Alternatif olarak, bu davranisi uygulamak icin bunu tum DOM'unuza veya DOM'unuzun bir bolumune kapsayabilirsiniz. Ancak bu, animasyon olaylarinin calismesini engeller. Eleman kaldirma icin animasyon olaylarini bekliyorsaniz, bu cozum ise yaramaz. Gecici bir cozum, sureleri 1 milisaniyeye ayarlamaktir.

2. Daha az animasyon tercih eden kullanicilar icin hicbir animasyonun calmamasini saglamak icin [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) medya sorgusunu kullanin.

3. Programatik olarak animasyon siniflari eklemeyi engelleyin

### Animasyon geri çağırmaları

Animasyonlar sirasinda belirli noktalarda yurutmek istediginiz eylemleriniz varsa, dinleyebileceginiz bir dizi mevcut olay vardir. Birkazci:

[`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event)
[`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)
[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event)
[`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event)

[`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event)
[`OnTransitionRun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event)
[`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)
[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)

Web Animations API bircok ek islev sunar. Mevcut tum animasyon API'lerini gormek icin [belgelere goz atin](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).

NOTE: Bu geri cagirmalarla kabarciklanma sorunlarina dikkat edin. Alt ve ust elemanlari animasyonluyorsaniz, olaylar alt elemanlardan ust elemanlara dogru kabarciklanir. Bir alt dugumden kabarciklanan bir olaya degil, istediginiz olay hedefine yanit verdiginizden emin olmak icin yayilimi durdurun veya olay icindeki daha fazla ayrinti inceleyin. Dogru dugumlere sahip oldugunuzu dogrulamak icin `animationname` ozelligini veya gecisi yapilan ozellikleri inceleyebilirsiniz.

## Karmaşık diziler

Animasyonlar genellikle basit bir fade in veya fade out'tan daha karmasiktir. Calistirmak isteyeceginiz bircok karmasik animasyon dizisi olabilir. Bu olasi senaryolarin bazilarina goz atalim.

### Listede kademeli animasyonlar

Yaygin efektlerden biri, kademeli bir etki olusturmak icin listedeki her ogenin animasyonlarini kademelilestirmektir. Bu, `animation-delay` veya `transition-delay` kullanilarak gerceklestirilebilir. Bu CSS'nin nasil gorunebilecegine dair bir ornek.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.ts">
    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.ts" />
    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.html" />
    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.css" />
</docs-code-multifile>

### Paralel animasyonlar

`animation` kisayol ozelligini kullanarak bir elemana ayni anda birden fazla animasyon uygulayabilirsiniz. Her birinin kendi suresi ve gecikmesi olabilir. Bu, animasyonlari bir araya getirmenize ve karmasik efektler olusturmaniza olanak tanir.

```css
.target-element {
  animation:
    rotate 3s,
    fade-in 2s;
}
```

Bu ornekte, `rotate` ve `fade-in` animasyonlari ayni anda baslar, ancak farkli surelere sahiptir.

### Yeniden sıralanan listenin öğelerini animasyonlama

Bir `@for` dongusundeki ogeler kaldirilip yeniden eklenecek, bu da giris animasyonlari icin `@starting-styles` kullanilarak animasyonlari tetikleyecektir. Alternatif olarak, ayni davranis icin `animate.enter` kullanabilirsiniz. Asagidaki ornekte gorulduğu gibi elemanlar kaldirilirken animasyonlamak icin `animate.leave` kullanin.

<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.ts">
    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.ts" />
    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.html" />
    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.css" />
</docs-code-multifile>

## Animasyonların programatik kontrolü

[`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations) kullanarak bir elemandaki animasyonlari dogrudan alabilirsiniz. Bu, o elemandaki her [`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation)'in bir dizisini dondurur. Animasyon paketinin `AnimationPlayer`'inin sundugu seylerden cok daha fazlasini yapmak icin `Animation` API'sini kullanabilirsiniz. Buradan `cancel()`, `play()`, `pause()`, `reverse()` ve cok daha fazlasini yapabilirsiniz. Bu yerel API, animasyonlarinizi kontrol etmeniz icin ihtiyaciniz olan her seyi saglamalidir.

## Angular animasyonları hakkında daha fazla bilgi

Asagidakilerle de ilgilenebilirsiniz:
# Route Geçiş Animasyonları

Rota geçiş animasyonları, Angular uygulamanızda farklı görünümler arasında navigasyon yaparken yumuşak görsel geçişler sağlayarak kullanıcı deneyimini geliştirir. [Angular Router](/guide/routing), desteklenen tarayıcılarda rota değişiklikleri arasında sorunsuz animasyonlar sağlayan tarayıcının View Transitions API'si için yerleşik destek içerir.

HELPFUL: Yönlendiricinin yerel View Transitions entegrasyonu şu anda [geliştirici önizlemesindedir](/reference/releases#geliştirici-önizlemesi). Yerel View Transitions, tüm tarayıcılarda sınırlı desteğe sahip nispeten yeni bir tarayıcı özelliğidir.

## View Transitions nasıl çalışır

View transitions, uygulamanızın farklı durumları arasında yumuşak animasyonlar oluşturmak için tarayıcının yerel [`document.startViewTransition` API'sini](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) kullanır. API şu şekilde çalışır:

1. **Geçerli durumu yakalama** - Tarayıcı mevcut sayfanın bir ekran görüntüsünü alır
2. **DOM güncellemesini yürütme** - Callback fonksiyonunuz DOM'u güncellemek için çalışır
3. **Yeni durumu yakalama** - Tarayıcı güncellenmiş sayfa durumunu yakalar
4. **Geçişi oynatma** - Tarayıcı eski ve yeni durumlar arasında animasyon yapar

İşte `startViewTransition` API'sinin temel yapısı:

```ts
document.startViewTransition(async () => {
  await updateTheDOMSomehow();
});
```

Tarayıcı API'si hakkında daha fazla bilgi için [Chrome Açıklayıcısına](https://developer.chrome.com/docs/web-platform/view-transitions) bakın.

## Router view transitions'ı nasıl kullanır

Angular Router, sorunsuz rota değişiklikleri oluşturmak için view transitions'ı navigasyon yaşam döngüsüne entegre eder. Navigasyon sırasında Yönlendirici:

1. **Navigasyon hazırlığını tamamlar** - Rota eşleştirme, [tembel yükleme](guide/routing/loading-strategies#tembel-yüklenen-bileşenler-ve-routelar), [koruyucular](/guide/routing/route-guards) ve [çözücüler](/guide/routing/data-resolvers) çalışır
2. **View transition'ı başlatır** - Rotalar etkinleştirmeye hazır olduğunda Yönlendirici `startViewTransition` çağırır
3. **DOM'u günceller** - Yönlendirici, geçiş callback'i içinde yeni rotaları etkinleştirir ve eskileri devre dışı bırakır
4. **Geçişi sonlandırır** - Angular render'ı tamamladığında geçiş Promise'i çözümlenir

Yönlendiricinin view transition entegrasyonu, [aşamalı geliştirme](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) olarak işlev görür. Tarayıcılar View Transitions API'sini desteklemediğinde, Yönlendirici animasyon olmadan normal DOM güncellemelerini gerçekleştirir ve uygulamanızın tüm tarayıcılarda çalışmasını sağlar.

## Router'da View Transitions'ı etkinleştirme

[Yönlendirici yapılandırmanıza](/guide/routing/define-routes#uygulamanıza-router-ekleme) `withViewTransitions` özelliğini ekleyerek view transitions'ı etkinleştirin. Angular hem standalone hem de NgModule başlatma yaklaşımlarını destekler:

### Standalone başlatma

```ts
import {bootstrapApplication} from '@angular/platform-browser';
import {provideRouter, withViewTransitions} from '@angular/router';
import {routes} from './app.routes';

bootstrapApplication(MyApp, {
  providers: [provideRouter(routes, withViewTransitions())],
});
```

### NgModule başlatma

```ts
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})],
})
export class AppRouting {}
```

[StackBlitz'de "count" örneğini deneyin](https://stackblitz.com/edit/stackblitz-starters-2dnvtm?file=src%2Fmain.ts)

Bu örnek, yönlendirici navigasyonunun sayaç güncellemeleri için doğrudan `startViewTransition` çağrılarını nasıl değiştirebileceğini gösterir.

## CSS ile geçişleri özelleştirme

Benzersiz animasyon efektleri oluşturmak için CSS kullanarak view transitions'ı özelleştirebilirsiniz. Tarayıcı, CSS seçicilerle hedefleyebileceğiniz ayrı geçiş öğeleri oluşturur.

Özel geçişler oluşturmak için:

1. **view-transition-name ekleyin** - Animasyon yapmak istediğiniz öğelere benzersiz adlar atayın
2. **Global animasyonlar tanımlayın** - Global stillerinizde CSS animasyonları oluşturun
3. **Geçiş sözde öğelerini hedefleyin** - `::view-transition-old()` ve `::view-transition-new()` seçicilerini kullanın

İşte bir sayaç öğesine döndürme efekti ekleyen bir örnek:

```css
/* Keyframe animasyonlarını tanımla */
@keyframes rotate-out {
  to {
    transform: rotate(90deg);
  }
}

@keyframes rotate-in {
  from {
    transform: rotate(-90deg);
  }
}

/* View transition sözde öğelerini hedefle */
::view-transition-old(count),
::view-transition-new(count) {
  animation-duration: 200ms;
  animation-name: -ua-view-transition-fade-in, rotate-in;
}

::view-transition-old(count) {
  animation-name: -ua-view-transition-fade-out, rotate-out;
}
```

IMPORTANT: View transition animasyonlarını bileşen stillerinde değil, global stil dosyanızda tanımlayın. Angular'ın [görünüm kapsülleme](/guide/components/styling#stil-kapsamı) özelliği bileşen stillerini kapsamlar ve bu da geçiş sözde öğelerini doğru şekilde hedeflemelerini engeller.

[StackBlitz'de güncellenmiş "count" örneğini deneyin](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)

## onViewTransitionCreated ile gelişmiş geçiş kontrolü

`withViewTransitions` özelliği, view transitions üzerinde gelişmiş kontrol için `onViewTransitionCreated` callback'i olan bir seçenekler nesnesi kabul eder. Bu callback:

- Bir [enjeksiyon bağlamında](/guide/di/dependency-injection-context#bir-enjeksiyon-bağlamında-çalıştırma) çalışır
- Aşağıdakileri içeren bir [`ViewTransitionInfo`](/api/router/ViewTransitionInfo) nesnesi alır:
  - `startViewTransition`'dan gelen `ViewTransition` örneği
  - Navigasyon yapılan kaynak rota için [`ActivatedRouteSnapshot`](/api/router/ActivatedRouteSnapshot)
  - Navigasyon yapılan hedef rota için [`ActivatedRouteSnapshot`](/api/router/ActivatedRouteSnapshot)

Bu callback'i, navigasyon bağlamına göre geçiş davranışını özelleştirmek için kullanın. Örneğin, belirli navigasyon türleri için geçişleri atlayabilirsiniz:

```ts
import {inject} from '@angular/core';
import {Router, withViewTransitions, isActive} from '@angular/router';

withViewTransitions({
  onViewTransitionCreated: ({transition}) => {
    const router = inject(Router);
    const targetUrl = router.currentNavigation()!.finalUrl!;

// Yalnızca fragment veya sorgu parametreleri değişiyorsa geçişi atla
    const config = {
      paths: 'exact',
      matrixParams: 'exact',
      fragment: 'ignored',
      queryParams: 'ignored',
    };

const isTargetRouteCurrent = isActive(targetUrl, router, config);

if (isTargetRouteCurrent()) {
      transition.skipTransition();
    }
  },
});
```

Bu örnek, navigasyon yalnızca [URL fragment veya sorgu parametrelerini](/guide/routing/read-route-state#sorgu-parametreleri) değiştirdiğinde (aynı sayfa içindeki bağlantı bağlantıları gibi) view transition'ı atlar. `skipTransition()` yöntemi, navigasyonun tamamlanmasına izin verirken animasyonu engeller.

## Chrome açıklayıcısından Angular'a uyarlanan örnekler

Aşağıdaki örnekler, Chrome ekibinin dokümantasyonundan Angular Router ile kullanım için uyarlanmış çeşitli view transition tekniklerini gösterir:

### Geçiş yapan öğelerin aynı DOM öğesi olması gerekmez

Öğeler, aynı `view-transition-name`'i paylaştıkları sürece farklı DOM öğeleri arasında sorunsuz geçiş yapabilir.

- [Chrome Açıklayıcı](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning_elements_dont_need_to_be_the_same_dom_element)
- [StackBlitz'de Angular Örneği](https://stackblitz.com/edit/stackblitz-starters-dh8npr?file=src%2Fmain.ts)

### Özel giriş ve çıkış animasyonları

Rota geçişleri sırasında görünüm alanına giren ve çıkan öğeler için benzersiz animasyonlar oluşturun.

- [Chrome Açıklayıcı](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#custom_entry_and_exit_transitions)
- [StackBlitz'de Angular Örneği](https://stackblitz.com/edit/stackblitz-starters-8kly3o)

### Asenkron DOM güncellemeleri ve içerik bekleme

Angular Router, ek içerik yüklenmesini beklemek yerine anında geçişlere öncelik verir.

- [Chrome Açıklayıcı](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#async_dom_updates_and_waiting_for_content)

NOTE: Angular Router, view transitions'ı geciktirmenin bir yolunu sağlamaz. Bu tasarım seçimi, ek içerik beklenirken sayfaların etkileşimsiz kalmasını önler. Chrome dokümantasyonunun belirttiği gibi: "Bu süre boyunca sayfa dondurulur, bu nedenle buradaki gecikmeler minimumda tutulmalıdır...bazı durumlarda gecikmeyi tamamen önlemek ve zaten sahip olduğunuz içeriği kullanmak daha iyidir."

### View transition türleri ile birden fazla view transition stilini yönetme

Navigasyon bağlamına göre farklı animasyon stilleri uygulamak için view transition türlerini kullanın.

- [Chrome Açıklayıcı](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types)
- [StackBlitz'de Angular Örneği](https://stackblitz.com/edit/stackblitz-starters-vxzcam)

### View transition kökünde sınıf adı ile birden fazla view transition stilini yönetme (kullanımdan kaldırıldı)

Bu yaklaşım, animasyon stillerini kontrol etmek için geçiş kök öğesinde CSS sınıfları kullanır.

- [Chrome Açıklayıcı](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#changing-on-navigation-type)
- [StackBlitz'de Angular Örneği](https://stackblitz.com/edit/stackblitz-starters-nmnzzg?file=src%2Fmain.ts)

### Diğer animasyonları dondurmadan geçiş yapma

Daha dinamik kullanıcı deneyimleri oluşturmak için view transitions sırasında diğer sayfa animasyonlarını sürdürün.

- [Chrome Açıklayıcı](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning-without-freezing)
- [StackBlitz'de Angular Örneği](https://stackblitz.com/edit/stackblitz-starters-76kgww)

### JavaScript ile animasyon yapma

Karmaşık animasyon senaryoları için JavaScript API'lerini kullanarak view transitions'ı programatik olarak kontrol edin.

- [Chrome Açıklayıcı](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#animating-with-javascript)
- [StackBlitz'de Angular Örneği](https://stackblitz.com/edit/stackblitz-starters-cklnkm)
# Angular'ın Animasyon paketinden geçiş

`@angular/animations` paketi v20.2 itibariyla kullanim disi birakilmistir (deprecated). Ayni surumde uygulamaniza animasyonlar eklemek icin yeni `animate.enter` ve `animate.leave` ozelligi de tanitilmistir. Bu yeni ozellikleri kullanarak, `@angular/animations` tabanli tum animasyonlari duz CSS veya JS animasyon kutuphaneleri ile degistirebilirsiniz. `@angular/animations`'i uygulamanizdan kaldirmak JavaScript paketinizin boyutunu onemli olcude azaltabilir. Yerel CSS animasyonlari genellikle donanim hizlandirmasindan yararlanabildiikleri icin ustun performans sunar. Bu rehber, kodunuzu `@angular/animations`'dan yerel CSS animasyonlarina yeniden duzenleme surecini anlatir.

## Yerel CSS'de animasyonlar nasıl yazılır

Daha once yerel CSS animasyonlari yazmadiysaniz, baslangic icin bir dizi mukemmel rehber vardir. Bunlardan birkaci:
[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)

Bu cesitli rehber ve egitimlerin bazilarina goz atin, ardindan bu rehbere geri donun.

## Yeniden kullanılabilir animasyonlar oluşturma

Animasyon paketinde oldugu gibi, uygulamaniz genelinde paylasabileceginiz yeniden kullanilabilir animasyonlar olusturabilirsiniz. Animasyon paketinin surumu, paylasilmis bir TypeScript dosyasinda `animation()` fonksiyonunu kullanmanizi gerektiriyordu. Yerel CSS surumu benzerdir, ancak paylasilmis bir CSS dosyasinda yer alir.

#### Animasyon paketiyle

<docs-code header="animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" region="animation-example"/>

#### Yerel CSS ile

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-shared"/>

`animated-class` sinifini bir elemana eklemek, o eleman uzerinde animasyonu tetikler.

## Bir geçişi animasyonlama

### Durum ve stilleri animasyonlama

Animasyon paketi, bir bilesen icinde [`state()`](api/animations/state) fonksiyonunu kullanarak cesitli durumlar tanimlmaniza izin veriyordu. Ornekler, her ilgili durumun taniminda yer alan stillerle birlikte `open` veya `closed` durumu olabilir. Ornegin:

#### Animasyon paketiyle

<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>

Ayni davranis, anahtar kare animasyonu veya gecis stili kullanan CSS siniflari ile yerel olarak gerceklestirilebilir.

#### Yerel CSS ile

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-states"/>

[Stilleri dogrudan animasyonlama](guide/templates/binding#css-stil-özellikleri) icin sablon rehberinde benzer ornekler gorebilirsiniz.

### Geçişler, zamanlama ve yumuşatma

Animasyon paketinin `animate()` fonksiyonu, sure, gecikme ve yumusaklik gibi zamanlama saglamaniza olanak tanir. Bu, CSS'de bircak CSS ozelligi veya kisayol ozellikleri kullanilarak yerel olarak yapilabilir.

CSS'de bir anahtar kare animasyonu icin `animation-duration`, `animation-delay` ve `animation-timing-function` belirtin veya alternatif olarak `animation` kisayol ozelligini kullanin.

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="animation-timing"/>

Benzer sekilde, `@keyframes` kullanmayan animasyonlar icin `transition-duration`, `transition-delay`, `transition-timing-function` ve `transition` kisayolunu kullanabilirsiniz.

<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" region="transition-timing"/>

### Bir animasyonu tetikleme

Animasyon paketi, `trigger()` fonksiyonunu kullanarak tetikleyiciler belirtmeyi ve tum durumlarinizi onun icinde ic ice yerlestirmeyi gerektiriyordu. Yerel CSS ile buna gerek yoktur. Animasyonlar CSS stilleri veya siniflari degistirerek tetiklenebilir. Bir sinif bir elemanda mevcut oldigunda, animasyon gerceklesir. Sinifi kaldirmak, elemani o eleman icin tanimlanmis CSS'e geri dondurecektir. Bu, ayni animasyonu yapmak icin onemli olcude daha az kodla sonuclanir. Iste bir ornek:

#### Animasyon paketiyle
#### Yerel CSS ile

## Geçiş ve tetikleyiciler

### Önceden tanımlanmış durum ve joker karakter eşleştirme

Animasyon paketi, tanimladiginiz durumlari dizeler araciligiyla bir gecisle eslestirme yetenegini sunuyordu. Ornegin, aciktan kapaliya animasyonlamak `open => closed` seklinde olurdu. Herhangi bir durumu hedef durumla eslestirmek icin `* => closed` gibi joker karakterler kullanabilirsiniz ve giris ve cikis durumlari icin `void` anahtar sozcugu kullanilabilir. Ornegin: bir eleman gorünumden ayrilirken `* => void` veya eleman gorünume girerken `void => *`.

Bu durum esleme kaliplari, dogrudan CSS ile animasyon yaparken hic gerekli degildir. Elemanlara ayarladiginiz siniflara ve/veya stillere gore hangi gecislerin ve `@keyframes` animasyonlarinin uygulanacagini yonetebilirsiniz. Ayrica elemanin DOM'a girdigi andaki gorunumunu kontrol etmek icin `@starting-style` ekleyebilirsiniz.

### Joker karakterlerle otomatik özellik hesaplama

Animasyon paketi, `height: auto`'ya animasyon yapmak gibi tarihsel olarak animasyonlanmasi zor olan seyleri animasyonlama yetenegini sunuyordu. Artik bunu saf CSS ile de yapabilirsiniz.

#### Animasyon paketiyle
Otomatik yukseklige animasyon yapmak icin CSS Grid kullanabilirsiniz.

#### Yerel CSS ile

Tum tarayicilari destekleme konusunda endiselenmeniz gerekmiyorsa, otomatik yukseklige animasyon yapmanin gercek cozumu olan `calc-size()`'i da inceleyebilirsiniz. Daha fazla bilgi icin [MDN belgelerine](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) ve (bu egitime)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] bakin.

### Görünüme giriş ve çıkış animasyonu

Animasyon paketi, giris ve cikis icin daha once bahsedilen kalip eslemeyi sunuyordu ve ayrica `:enter` ve `:leave` kisayol takma adlarini da iceriyordu.

#### Animasyon paketiyle
#### Yerel CSS ile

#### Yerel CSS ile

`animate.enter` ve `animate.leave` hakkinda daha fazla bilgi icin [Giris ve Cikis animasyonlari rehberine](guide/animations) bakin.

### Artırma ve azaltma animasyonu

Daha once bahsedilen `:enter` ve `:leave`'e ek olarak, `:increment` ve `:decrement` de vardir. Bunlari da siniflar ekleyip kaldirarak animasyonlayabilirsiniz. Animasyon paketinin yerlesik takma adlarinin aksine, degerler yukarı veya asagi gittiginde siniflarin otomatik olarak uygulanmasi yoktur. Uygun siniflari programatik olarak uygulayabilirsiniz. Iste bir ornek:

#### Animasyon paketiyle
#### Yerel CSS ile

### Üst / Alt animasyonlar

Animasyon paketinden farkli olarak, belirli bir bilesen icinde birden fazla animasyon belirlendiginde, hicbir animasyonun digerine onceligi yoktur ve hicbir sey herhangi bir animasyonun calismesini engellemez. Animasyonlarin siralanmasi, CSS animasyonunuzun tanimi, animasyon/gecis gecikmesi ve/veya sonraki animasyonlanacak CSS'i eklemeyi islemek icin `animationend` veya `transitionend` kullanilarak yonetilmelidir.

### Bir animasyonu veya tüm animasyonları devre dışı bırakma

Yerel CSS animasyonlariyla, belirttiginiz animasyonlari devre disi birakmak istiyorsaniz, birden fazla seceeneginiz vardir.

1. Animasyon ve gecisi `none` olarak zorlayan ozel bir sinif olusturun.

```css
.no-animation {
  animation: none !important;
  transition: none !important;
}
```

3. Programatik olarak animasyon siniflari eklemeyi engelleyin

### Animasyon geri çağırmaları

Animasyon paketi, animasyon bittiginde bir seyler yapmak istemeniz durumunda kullanmaniz icin geri cagirmalar sunuyordu. Yerel CSS animasyonlarinin da bu geri cagirmalari vardir.

Web Animations API bircok ek islev sunar. Mevcut tum animasyon API'lerini gormek icin [belgelere goz atin](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).

## Karmaşık diziler

Animasyon paketi karmasik diziler olusturmak icin yerlesik islevsellige sahiptir. Bu dizilerin tumu animasyon paketi olmadan tamamen mumkundur.

### Belirli elemanları hedefleme

Animasyon paketinde, [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)'a benzer bir CSS sinif adi ile belirli elemanlari bulmak icin `query()` fonksiyonunu kullanarak belirli elemanlari hedefleyebilirdiniz. Yerel CSS animasyon dunyasinda buna gerek yoktur. Bunun yerine, alt siniflari hedeflemek ve istediginiz `transform` veya `animation`'i uygulamak icin CSS secicilerinizi kullanabilirsiniz.

Bir sablon icindeki alt dugumlerin siniflari icin degistirmek icin, animasyonlari dogru noktalarda eklemek icin sinif ve stil baglamalarini kullanabilirsiniz.

### Stagger()

`stagger()` fonksiyonu, kademeli bir etki olusturmak icin bir listedeki her ogenin animasyonunu belirtilen bir sure geciktirmenize olanak taniyordu. Bu davranisi `animation-delay` veya `transition-delay` kullanarak yerel CSS'de kopyalayabilirsiniz. Bu CSS'nin nasil gorunebilecegine dair bir ornek.

#### Animasyon paketiyle
#### Yerel CSS ile

### Paralel animasyonlar

Animasyon paketinde ayni anda birden fazla animasyon oynatmak icin `group()` fonksiyonu vardir. CSS'de animasyon zamanlamasi uzerinde tam kontrol sahibisiniz. Tanimlanmis birden fazla animasyonunuz varsa, hepsini ayni anda uygulayabilirsiniz.

```css
.target-element {
  animation:
    rotate 3s,
    fade-in 2s;
}
```

Bu ornekte, `rotate` ve `fade-in` animasyonlari ayni anda baslar.

### Yeniden sıralanan listenin öğelerini animasyonlama

Listede yeniden siralanan ogeler, daha once aciklanan teknikleri kullanarak kutudan cikar cikmaz calisir. Ek ozel bir calisma gerekmez. Bir `@for` dongusundeki ogeler duzgun sekilde kaldirilip yeniden eklenecek, bu da giris animasyonlari icin `@starting-styles` kullanilarak animasyonlari tetikleyecektir. Alternatif olarak, ayni davranis icin `animate.enter` kullanabilirsiniz. Yukaridaki ornekte gorulduğu gibi elemanlar kaldirilirken animasyonlamak icin `animate.leave` kullanin.

#### Animasyon paketiyle
#### Yerel CSS ile

## AnimationPlayer kullanımlarını taşıma

`AnimationPlayer` sinifi, duraklatma, oynatma, yeniden baslatma ve bir animasyonu kod araciligiyla bitirme gibi daha gelismis seyler yapabilmek icin bir animasyona erisim saglar. Tum bunlar yerel olarak da ele alinabilir.

## Rota geçişleri

Rotalar arasinda animasyon yapmak icin gorünum gecislerini kullanabilirsiniz. Baslamak icin [Rota Gecis Animasyonlari Rehberine](guide/routing/route-transition-animations) bakin.
# Angular without ZoneJS (Zoneless)

## Neden Zoneless Kullanılmalı?

ZoneJS'i bağımlılık olarak kaldırmanın başlıca avantajları şunlardır:

- **Geliştirilmiş performans**: ZoneJS, uygulama durumunun _güncellenmiş olabileceğinin_ göstergeleri olarak DOM olaylarını ve asenkron görevleri kullanır ve ardından uygulamanın görünümlerinde değişiklik algılama çalıştırmak için uygulama senkronizasyonunu tetikler. ZoneJS'in uygulama durumunun gerçekten değişip değişmediğine dair herhangi bir içgörüsü yoktur, bu nedenle bu senkronizasyon gerekenden daha sık tetiklenir.
- **Geliştirilmiş Core Web Vitals**: ZoneJS, hem yük boyutu hem de başlatma süresi maliyeti açısından önemli miktarda ek yük getirir.
- **Geliştirilmiş hata ayıklama deneyimi**: ZoneJS, kod hata ayıklamayı zorlaştırır. Yığın izlerini ZoneJS ile anlamak daha zordur. Ayrıca kodun Angular Zone'un dışında olması nedeniyle ne zaman bozulduğunu anlamak da güçtür.
- **Daha iyi ekosistem uyumluluğu**: ZoneJS, tarayıcı API'lerini yamalayarak çalışır ancak her yeni tarayıcı API'si için otomatik olarak yamalara sahip değildir. `async`/`await` gibi bazı API'ler etkili bir şekilde yamalanamamakta ve ZoneJS ile çalışmak için alt seviyeye dönüştürülmeleri gerekmektedir. Bazen ekosistemdeki kütüphaneler de ZoneJS'in yerel API'leri yamalama biçimiyle uyumsuz olabilir. ZoneJS'i bağımlılık olarak kaldırmak, karmaşıklık, monkey patching ve süregelen bakım kaynağını ortadan kaldırarak daha iyi uzun vadeli uyumluluk sağlar.

## Bir Uygulamada Zoneless'ı Etkinleştirme

Zoneless, Angular v21+'de varsayılan olduğundan etkinleştirmek için herhangi bir şey yapmanız gerekmez. Varsayılan yapılandırmayı geçersiz kılmak için `provideZoneChangeDetection`'ın hiçbir yerde kullanılmadığını doğrulamalısınız.

Angular v20 kullanıyorsanız, başlatmada `provideZonelessChangeDetection()` ekleyerek zoneless değişiklik algılamayı etkinleştirin:

```ts
{header: 'bağımsız başlatma'}
bootstrapApplication(MyApp, {providers: [provideZonelessChangeDetection()]});
```

```ts
{header: 'NgModule başlatma'}
platformBrowser().bootstrapModule(AppModule);

@NgModule({
  providers: [provideZonelessChangeDetection()],
})
export class AppModule {}
```

## ZoneJS'i Kaldırma

Zoneless uygulamalar, paket boyutunu azaltmak için ZoneJS'i derlemeden tamamen kaldırmalıdır. ZoneJS genellikle `angular.json`'daki `polyfills` seçeneği aracılığıyla hem `build` hem de `test` hedeflerinde yüklenir. Her ikisinden de `zone.js` ve `zone.js/testing`'i kaldırarak derlemeden kaldırın. Açık bir `polyfills.ts` dosyası kullanan projeler, dosyadan `import 'zone.js';` ve `import 'zone.js/testing';` ifadelerini kaldırmalıdır.

ZoneJS'i derlemeden kaldırdıktan sonra, artık bir `zone.js` bağımlılığına da ihtiyaç yoktur ve paket tamamen kaldırılabilir:

```shell
npm uninstall zone.js
```

## Zoneless Uyumluluğu İçin Gereksinimler

Angular, değişiklik algılamayı ne zaman çalıştıracağını ve hangi görünümlerde çalıştıracağını belirlemek için çekirdek API'lerden gelen bildirimlere dayanır.
Bu bildirimler şunları içerir:

- `ChangeDetectorRef.markForCheck` (`AsyncPipe` tarafından otomatik olarak çağrılır)
- `ComponentRef.setInput`
- Bir şablonda okunan bir sinyalin güncellenmesi
- Bağlı host veya şablon dinleyici geri çağırmaları
- Yukarıdakilerden biri tarafından kirli olarak işaretlenmiş bir görünümün eklenmesi

### `OnPush` Uyumlu Bileşenler

Bir bileşenin yukarıdaki doğru bildirim mekanizmalarını kullandığından emin olmanın bir yolu [ChangeDetectionStrategy.OnPush](/best-practices/skipping-subtrees#onpush-kullanımı) kullanmaktır.

`OnPush` değişiklik algılama stratejisi zorunlu değildir, ancak uygulama bileşenleri için zoneless uyumluluğuna doğru önerilen bir adımdır. Kütüphane bileşenlerinin `ChangeDetectionStrategy.OnPush` kullanması her zaman mümkün değildir.
Bir kütüphane bileşeni, `ChangeDetectionStrategy.Eager`/`Default` kullanabilen kullanıcı bileşenleri için bir host olduğunda, `OnPush` kullanılamaz çünkü bu, alt bileşenin `OnPush` uyumlu olmaması ve değişiklik algılamayı tetiklemek için ZoneJS'e bağlı olması durumunda yenilenmesini engelleyecektir. Bileşenler, Angular'a değişiklik algılamanın ne zaman çalıştırılması gerektiğini bildirdikleri sürece (`markForCheck` çağırma, sinyal kullanma, `AsyncPipe` vb.) `Default` stratejisini kullanabilirler.
Bir kullanıcı bileşeni için host olmak, `ViewContainerRef.createComponent` gibi bir API kullanmak anlamına gelir ve bir kullanıcı bileşeninin şablonunun bir bölümünü barındırmak (yani içerik projeksiyonu veya bir şablon ref girişi kullanma) anlamına gelmez.

### `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable`, `NgZone.isStable` veya `NgZone.onStable` Kullanımını Kaldırma

Uygulamalar ve kütüphaneler `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable` ve `NgZone.onStable` kullanımlarını kaldırmalıdır.
Bu observable'lar, bir Uygulama zoneless değişiklik algılamayı etkinleştirdiğinde asla yayın yapmayacaktır.
Benzer şekilde, `NgZone.isStable` her zaman `true` olacaktır ve kod yürütme için koşul olarak kullanılmamalıdır.

`NgZone.onMicrotaskEmpty` ve `NgZone.onStable` observable'ları çoğunlukla Angular'ın değişiklik algılamayı tamamlamasını beklemek için kullanılır. Bunun yerine, tek bir değişiklik algılama beklemeleri gerekiyorsa `afterNextRender` ile veya birkaç değişiklik algılama turuna yayılabilecek bir koşul varsa `afterEveryRender` ile değiştirilebilirler. Diğer durumlarda, bu observable'lar tanıdık oldukları ve ihtiyaç duyulana benzer zamanlamaya sahip oldukları için kullanılıyordu. Bunun yerine daha açık veya doğrudan DOM API'leri kullanılabilir, örneğin kodun belirli bir DOM durumunu beklemesi gerektiğinde (Angular'ın render kancaları aracılığıyla dolaylı olarak beklemek yerine) `MutationObserver` gibi.
`NgZone.run` ve `NgZone.runOutsideAngular`'ın Zoneless uygulamalarla uyumlu olması için kaldırılmasına gerek yoktur. Aslında, bu çağrıların kaldırılması, hâlâ ZoneJS'e dayanan uygulamalarda kullanılan kütüphaneler için performans gerilemelerine yol açabilir.
### Sunucu Taraflı Render (SSR) İçin `PendingTasks`

Angular ile SSR kullanıyorsanız, uygulamanın ne zaman "kararlı" olduğunu ve serileştirilebileceğini belirlemeye yardımcı olmak için ZoneJS'e dayandığını biliyor olabilirsiniz. Serileştirmeyi engellemesi gereken asenkron görevler varsa, ZoneJS kullanmayan bir uygulama Angular'ı [PendingTasks](/api/core/PendingTasks) servisi ile bunlardan haberdar etmelidir. Serileştirme, tüm bekleyen görevlerin kaldırıldığı ilk anı bekleyecektir.

Bekleyen görevlerin en basit iki kullanımı `run` yöntemidir:

```typescript
const taskService = inject(PendingTasks);
taskService.run(async () => {
  const someResult = await doSomeWorkThatNeedsToBeRendered();
  this.someState.set(someResult);
});
```

Daha karmaşık kullanım durumları için, bir bekleyen görevi manuel olarak ekleyip kaldırabilirsiniz:

```typescript
const taskService = inject(PendingTasks);
const taskCleanup = taskService.add();
try {
  await doSomeWorkThatNeedsToBeRendered();
} catch {
  // hatayı işle
} finally {
  taskCleanup();
}
```

Ek olarak, `rxjs-interop`'taki [pendingUntilEvent](/api/core/rxjs-interop/pendingUntilEvent#) yardımcısı, observable yayın yapana, tamamlanana, hata verene veya abonelikten çıkana kadar uygulamanın kararsız kalmasını sağlar.

```typescript
readonly myObservableState = someObservable.pipe(pendingUntilEvent());
```

Framework, asenkron görevler tamamlanana kadar serileştirmeyi önlemek için bu servisi dahili olarak da kullanır. Bunlar, devam eden bir Router navigasyonu ve tamamlanmamış bir `HttpClient` isteği dahil ancak bunlarla sınırlı değildir.

### Zoneless uygulamalarda reactive forms

Reactive forms model güncellemeleri (`setValue`, `patchValue`, `FormArray.push` ve benzeri API'ler) form durumunu günceller ve forms observable'larını yayımlar, ancak bileşen değişiklik algılamasını otomatik olarak zamanlamaz.

Bir şablon reactive forms durumuna bağlıysa, forms observable'larını bir değişiklik algılama bildirimine (örneğin `ChangeDetectorRef.markForCheck()`) bağlayın veya veriyi şablon tarafından tüketilen signal'lar aracılığıyla yansıtın.

## Test Etme ve Hata Ayıklama

### `TestBed`'de Zoneless Kullanımı

`TestBed`, `zone.js` `polyfills` aracılığıyla yüklendiğinde varsayılan olarak Zone tabanlı değişiklik algılama kullanır.

`zone.js` mevcut değilse, `TestBed` varsayılan olarak zoneless çalışır. `zone.js` yüklendiğinde zoneless modunu zorlamak için `provideZonelessChangeDetection()` ekleyin:

```typescript
TestBed.configureTestingModule({
  // İsteğe bağlı: test ortamının zoneless bir uygulama ile
  // aynı zoneless davranışını kullanmasını zorlamak için sağlayıcıyı ekleyin.
  providers: [provideZonelessChangeDetection()],
});

const fixture = TestBed.createComponent(MyComponent);
await fixture.whenStable();
```

Testlerin üretim koduna en benzer davranışa sahip olmasını sağlamak için, mümkün olduğunda `fixture.detectChanges()` kullanmaktan kaçının. Bu, Angular'ın aksi takdirde değişiklik algılama zamanlamayabileceği durumlarda değişiklik algılamayı çalıştırmaya zorlar. Testler, bu bildirimlerin gerçekleştiğinden emin olmalı ve durumu testte manuel olarak zorlamak yerine Angular'ın ne zaman senkronize edeceğini yönetmesine izin vermelidir.

Mevcut test setleri için `fixture.detectChanges()` kullanmak yaygın bir kalıptır ve bunları `await fixture.whenStable()`'a dönüştürmek muhtemelen çabaya değmez. `TestBed` yine de fixture'ın bileşeninin `OnPush` uyumlu olduğunu zorlayacak ve bir değişiklik bildirimi olmadan şablon değerlerinin güncellendiğini tespit ederse (yani `fixture.componentInstance.someValue = 'newValue';`) `ExpressionChangedAfterItHasBeenCheckedError` fırlatacaktır.
Bileşen üretimde kullanılıyorsa, bu sorun bileşenin durum için sinyaller kullanacak şekilde güncellenmesi veya `ChangeDetectorRef.markForCheck()` çağrılması ile giderilmelidir.
Bileşen yalnızca test sarmalayıcı olarak kullanılıyorsa ve bir uygulamada hiç kullanılmıyorsa, `fixture.changeDetectorRef.markForCheck()` kullanmak kabul edilebilir.

### Güncellemelerin Algılandığından Emin Olmak İçin Hata Ayıklama Modu Kontrolü

Angular ayrıca bir uygulamanın durumu zoneless uyumlu bir şekilde güncellediğini doğrulamaya yardımcı olmak için ek bir araç sağlar. `provideCheckNoChangesConfig({exhaustive: true, interval: <milliseconds>}})` periyodik olarak hiçbir bağlamanın bir bildirim olmadan güncellenmediğinden emin olmak için kontrol etmek üzere kullanılabilir. Angular, zoneless değişiklik algılama tarafından yenilenmeyecek güncellenmiş bir bağlama varsa `ExpressionChangedAfterItHasBeenCheckedError` fırlatır.
Açık kaynak bir proje olarak Angular'ın günlük commit'leri, PR'ları ve ivmesi GitHub'da izlenebilir. Bu günlük çalışmanın framework'ün geleceğiyle nasıl bağlantılı olduğuna ilişkin şeffaflığı artırmak için yol haritamız, ekibin mevcut ve gelecekte planlanmış vizyonunu bir araya getirir.

Aşağıdaki projeler belirli bir Angular sürümüyle ilişkili değildir. Tamamlandığında yayınlayacağız ve semantik versiyonlamayı izleyerek yayın takvimimize göre belirli bir sürümün parçası olacaklardır. Örneğin, özellikleri tamamlandıktan sonra bir sonraki alt sürümde veya kırıcı değişiklikler içeriyorsa bir sonraki ana sürümde yayınlarız.

Şu anda Angular'ın framework için üç hedefi vardır:

1. [Geliştiriciler için yapay zeka deneyimini](/ai) iyileştirmek
1. [Angular geliştirici deneyimini](#angular-geliştirici-deneyimini-iyileştirme) iyileştirmek
1. Framework'ün performansını iyileştirmek

Bu hedefleri belirli proje çalışmalarıyla nasıl sunmayı planladığımızı öğrenmek için okumaya devam edin.

## Modern Angular'ı Keşfedin

Yol haritamızdan en son Angular özelliklerini kullanarak geliştirmeye başlayın. Bu liste, yol haritamızdaki yeni özelliklerin mevcut durumunu temsil eder:

### Deneylenebilir

- [Signal Forms](/guide/forms/signals/overview)
- [Resource API](/guide/signals/resource)
- [httpResource](/api/common/http/httpResource)

### Üretime hazır

- [Zoneless değişiklik algılama](/guide/zoneless)
- [Linked Signal API](/guide/signals/linked-signal)
- [Artımlı hidrasyon](/guide/incremental-hydration)
- [Effect API](/api/core/effect)
- [SSR ile olay tekrarı](/api/platform-browser/withEventReplay)
- [Rota düzeyinde render modu](/guide/ssr)

## Angular Geliştiricileri için Yapay Zeka Deneyimini İyileştirme

### Yapay Zekanın En İyisini Angular'a Getirme
## Angular Geliştirici Deneyimini İyileştirme

### Geliştirici hızı
### Araçları iyileştirme
## Tamamlanan projeler
# Angular projelerinizi güncel tutma

Web ve tüm web ekosistemi gibi, Angular da sürekli olarak geliştirilmektedir.
Angular, sürekli iyileştirmeyi güçlü bir kararlılık odağı ve güncellemeleri basit hale getirme ile dengeler.
Angular uygulamanızı güncel tutmak, öncül yeni özelliklerden, optimizasyonlardan ve hata düzeltmelerinden yararlanmanızı sağlar.

Bu belge, Angular uygulamalarınızı ve kütüphanelerinizi güncel tutmanıza yardımcı olacak bilgi ve kaynaklar içermektedir.

Sürüm politikamız ve uygulamalarımız hakkında bilgi için — destek ve kullanım dışı bırakma uygulamaları ile yayın takvimi dahil — [Angular versiyonlama ve yayınlar](reference/releases 'Angular versioning and releases') sayfasına bakın.

HELPFUL: Şu anda AngularJS kullanıyorsanız, [AngularJS'den Yükseltme](https://angular.io/guide/upgrade 'Upgrading from AngularJS') sayfasına bakın.
_AngularJS_, Angular'ın tüm v1.x sürümlerinin adıdır.

## Yeni sürümlerden bildirim alma

Yeni sürümler mevcut olduğunda bildirim almak için X'te (eski adıyla Twitter) [@angular](https://x.com/angular '@angular on X') hesabını takip edin veya [Angular blogu](https://blog.angular.dev 'Angular blog')'na abone olun.

## Yeni özellikler hakkında bilgi edinme

Yenilikler neler? Neler değişti? En önemli bilmeniz gereken şeyleri [sürüm duyurularında](https://blog.angular.dev/ 'Angular blog - release announcements') Angular blogunda paylaşıyoruz.

Sürüme göre düzenlenmiş değişikliklerin tam listesini incelemek için [Angular değişiklik günlüğü](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular change log')'ne bakın.

## Angular sürümünüzü kontrol etme

Uygulamanızın Angular sürümünü kontrol etmek için proje dizininizden `ng version` komutunu kullanın.

## Angular'ın güncel sürümünü bulma

Angular'ın en son kararlı yayınlanmış sürümü [npm'de](https://www.npmjs.com/package/@angular/core 'Angular on npm') "Version" altında görülür. Örneğin, `16.2.4`.

Ayrıca CLI komutu [`ng update`](cli/update) kullanarak Angular'ın en güncel sürümünü bulabilirsiniz.
Varsayılan olarak, [`ng update`](cli/update) (ek argüman olmadan) mevcut güncellemeleri listeler.

## Ortamınızı ve uygulamalarınızı güncelleme

Güncellemeyi karmaşık olmaktan çıkarmak için, etkileşimli [Angular Güncelleme Kılavuzu](update-guide)'nda eksiksiz talimatlar sağlıyoruz.

Angular Güncelleme Kılavuzu, belirttiğiniz mevcut ve hedef sürümlere dayalı olarak özelleştirilmiş güncelleme talimatları sağlar.
Uygulamalarınızın karmaşıklığına uygun temel ve gelişmiş güncelleme yollarını içerir.
Ayrıca sorun giderme bilgileri ve yeni sürümden en iyi şekilde yararlanmanıza yardımcı olacak önerilen manuel değişiklikleri içerir.

Basit güncellemeler için CLI komutu [`ng update`](cli/update) ihtiyacınız olan tek şeydir.
Ek argüman olmadan, [`ng update`](cli/update) mevcut güncellemeleri listeler ve uygulamanızı en güncel sürüme güncellemek için önerilen adımları sağlar.

[Angular Versiyonlama ve Yayınlar](reference/releases#angular-versiyonlama 'Angular Release Practices, Versioning'), bir sürümün sürüm numarasına göre bekleyebileceğiniz değişiklik düzeyini tanımlar.
Ayrıca desteklenen güncelleme yollarını da tanımlar.

## Kaynak özeti

- Sürüm duyuruları:
  [Angular blogu - sürüm duyuruları](https://blog.angular.dev/ 'Angular blog announcements about recent releases')

- Sürüm ayrıntıları:
  [Angular değişiklik günlüğü](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular change log')

- Güncelleme talimatları:
  [Angular Güncelleme Kılavuzu](update-guide)

- Güncelleme komutu referansları:
  [Angular CLI `ng update` komut referansları](cli/update)

- Versiyonlama, yayın, destek ve kullanım dışı bırakma uygulamaları:
  [Angular versiyonlama ve yayınlar](reference/releases 'Angular versioning and releases')
# `HttpClient` Güvenliği

`HttpClient`, iki yaygın HTTP güvenlik mekanizması için yerleşik destek içerir: XSSI koruması ve XSRF/CSRF koruması.

TIP: API'leriniz için bir [İçerik Güvenliği Politikası](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy) benimsemeyi de düşünün.

## XSSI Koruması

Siteler Arası Betik Dahil Etme (XSSI), bir saldırganın API uç noktalarınızdan JSON verilerini kontrol ettikleri bir sayfada `<script>` olarak yüklediği bir [Siteler Arası Betik Çalıştırma](https://en.wikipedia.org/wiki/Cross-site_scripting) saldırısı biçimidir. Bu verilere erişmek için farklı JavaScript teknikleri kullanılabilir.

XSSI'yi önlemek için yaygın bir teknik, JSON yanıtlarını yaygın olarak `)]}',\n` şeklinde olan "çalıştırılamaz bir önek" ile sunmaktır. Bu önek, JSON yanıtının geçerli çalıştırılabilir JavaScript olarak yorumlanmasını engeller. API veri olarak yüklendiğinde, JSON ayrıştırma öncesinde önek kaldırılabilir.

`HttpClient`, bir yanıttan JSON ayrıştırırken bu XSSI önekini (varsa) otomatik olarak kaldırır.

## XSRF/CSRF Koruması

[Siteler Arası İstek Sahteciliği (XSRF veya CSRF)](https://en.wikipedia.org/wiki/Cross-site_request_forgery), bir saldırganın kimliği doğrulanmış bir kullanıcıyı bilmeden web sitenizde eylemler gerçekleştirmeye kandırabildiği bir saldırı tekniğidir.

`HttpClient`, XSRF saldırılarını önlemek için kullanılan [yaygın bir mekanizmayı](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Cookie-to-header_token) destekler. HTTP istekleri gerçekleştirirken, bir yakalayıcı varsayılan olarak `XSRF-TOKEN` adlı bir çerezden bir belirteç okur ve bunu `X-XSRF-TOKEN` HTTP başlığı olarak ayarlar. Yalnızca alan adınızda çalışan kod çerezi okuyabildiğinden, arka uç HTTP isteğinin saldırgandan değil istemci uygulamanızdan geldiğinden emin olabilir.

Varsayılan olarak, bir yakalayıcı bu başlığı tüm değiştirici isteklerde (örneğin `POST`) göreli ve aynı kökenli URL'lere gönderir, ancak `GET` veya `HEAD` isteklerinde göndermez.
CSRF koruması yalnızca arka uçtaki durumu değiştirebilecek istekler için gereklidir. CSRF saldırıları doğası gereği alan adı sınırlarını aşar ve web'in [aynı köken politikası](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy), saldıran bir sayfanın kimliği doğrulanmış `GET` isteklerinin sonuçlarını almasını engelleyecektir.
Bu özellikten yararlanmak için sunucunuzun sayfa yüklendiğinde veya ilk GET isteğinde `XSRF-TOKEN` adlı JavaScript tarafından okunabilir bir oturum çerezine bir belirteç ayarlaması gerekir. Sonraki isteklerde sunucu, çerezin `X-XSRF-TOKEN` HTTP başlığıyla eşleştiğini doğrulayabilir ve böylece yalnızca alan adınızda çalışan kodun isteği göndermiş olabileceğinden emin olabilir. Belirteç her kullanıcı için benzersiz olmalı ve sunucu tarafından doğrulanabilir olmalıdır; bu, istemcinin kendi belirteçlerini oluşturmasını engeller. Ek güvenlik için belirteci sitenizin kimlik doğrulama çerezinin bir özetiyle birlikte bir tuz ile ayarlayın.

Birden fazla Angular uygulamasının aynı alan adını veya alt alan adını paylaştığı ortamlarda çakışmaları önlemek için her uygulamaya benzersiz bir çerez adı verin.
  Arka uç hizmetiniz sayfanız için çerezi ayarlayacak ve tüm uygun isteklerde başlığın mevcut olduğunu doğrulayacak şekilde yapılandırılmalıdır. Bunu yapmamak Angular'ın varsayılan korumasını etkisiz kılar.
### Özel Cookie/Header Adlarını Yapılandırma

Arka uç hizmetiniz XSRF belirteç çerezi veya başlığı için farklı adlar kullanıyorsa, varsayılanları geçersiz kılmak için `withXsrfConfiguration` kullanın.

Bunu `provideHttpClient` çağrısına aşağıdaki gibi ekleyin:

```ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withXsrfConfiguration({
        cookieName: 'CUSTOM_XSRF_TOKEN',
        headerName: 'X-Custom-Xsrf-Header',
      }),
    ),
  ],
};
```

### XSRF Korumasını Devre Dışı Bırakma

Yerleşik XSRF koruma mekanizması uygulamanız için çalışmıyorsa, `withNoXsrfProtection` özelliğini kullanarak devre dışı bırakabilirsiniz:

```ts
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(withNoXsrfProtection())],
};
```
# Angular Uluslararasılaştırma (i18n)

_Uluslararasılaştırma_, bazen i18n olarak da adlandırılır, projenizi dünya genelinde farklı yerel ayarlarda kullanım için tasarlama ve hazırlama sürecidir.
_Yerelleştirme_, projenizin farklı yerel ayarlar için sürümlerini oluşturma sürecidir.
Yerelleştirme süreci aşağıdaki eylemleri içerir.

- Farklı dillere çevrilmek üzere metin çıkarma
- Belirli bir yerel ayar için verileri biçimlendirme

Bir _yerel ayar_, belirli bir dil veya dil varyantının konuşulduğu bir bölgeyi tanımlar.
Olası bölgeler arasında ülkeler ve coğrafi bölgeler bulunur.
Bir yerel ayar, aşağıdaki detayların biçimlendirmesini ve ayrıştırmasını belirler.

- Tarih ve saat, sayılar ve para birimleri dahil ölçü birimleri
- Saat dilimleri, diller ve ülkeler dahil çevrilmiş adlar

Yerelleştirme ve uluslararasılaştırmaya hızlı bir giriş için bu videoyu izleyin:

<docs-video src="https://www.youtube.com/embed/KNTN-nsbV7M"/>

## Angular uluslararasılaştırma hakkında bilgi edinin