Angular 21.1 Yayınlandı: Signal Forms, Auto Cleanup ve Template Yenilikleri

Angular ekosistemi, 2026'ya hızlı bir giriş yaparak Angular 21.1 sürümünü duyurdu. v21'in getirdiği devasa yeniliklerin ardından, 21.1 sürümü bu özellikleri daha rafine hale getiren, geliştirici deneyimini (DX) iyileştiren ve performans optimizasyonlarına odaklanan bir ara sürüm olarak karşımıza çıkıyor. Bu sürümde özellikle Signal Forms üzerindeki yapısal değişiklikler, bellek yönetimini kolaylaştıran router geliştirmeleri ve şablon (template) tarafındaki esneklikler dikkat çekiyor.

Bu yazıda, Angular 21.1 ile gelen en önemli özellikleri, kod örnekleri ve mimari değişimlerle birlikte detaylıca ele alacağız.

Signal Forms: Daha Kararlı ve Tutarlı Bir Yapı

Angular'ın en çok beklenen özelliklerinden biri olan Signal Forms, hala deneysel (experimental) aşamada olsa da 21.1 ile birlikte önemli bir kabuk değişimine uğradı. Deneysel aşamada olmanın verdiği özgürlükle ekip, bazı yıkıcı değişiklikleri (breaking changes) bu ara sürümde hayata geçirdi.

'Field' Artık 'FormField'

Signal Forms tarafındaki en çarpıcı değişiklik, Field direktifinin adının FormField olarak değiştirilmesi oldu. Artık şablonlarınızda [field] yerine [formField] kullanmanız gerekiyor. Bu değişiklik, hem Angular'ın kendi iç tutarlılığını sağlamak hem de ekosistemdeki diğer kütüphanelerle (örneğin Angular Material) oluşabilecek isim çakışmalarını önlemek amacıyla yapıldı.

@Component({
  selector: 'app-user-profile',
  template: 
    <div>
      <mat-form-field>
        <mat-label>Kullanıcı Adı</mat-label>
        <input
          type="text"
          matInput
          [formField]="userForm.username"
        />
      </mat-form-field>
    </div>
  ,
  imports: [
    FormField,
    MatFormFieldModule,
    MatInputModule
  ],
})
export class UserProfileComponent {
  readonly userForm = form(signal({ username: '' }), (path) => {
    required(path.username, { message: 'Kullanıcı adı zorunludur' });
  });
}

Ayrıca, validasyon hata arayüzlerindeki field özelliği de fieldTree olarak isimlendirildi. Bu, özellikle karmaşık form yapılarında hata ağacını takip etmeyi çok daha şeffaf hale getiriyor.

Otomatik CSS Sınıf Yönetimi

Angular 21.1 ile gelen bir diğer yenilik ise Signal Forms'un alan durumuna göre (dirty, touched, valid, invalid vb.) otomatik olarak CSS sınıfları ekleyebilmesi. Bu özellik provideSignalFormsConfig() üzerinden yapılandırılabiliyor. Bu sayede form alanlarınızın görsel durumlarını yönetmek için manuel sınıf atamalarıyla uğraşmanıza gerek kalmıyor.

Router Seviyesinde Bellek Yönetimi: Auto Cleanup

Angular uygulamalarında servislerin lifecycle yönetimi her zaman kritik bir konu olmuştur. Genellikle servisleri root seviyesinde (singleton) sağlarız veya bileşen bazlı (local) tanımlarız. Ancak, router seviyesinde sağlanan servisler uzun süredir bir "araf" durumundaydı.

Problem: Temizlenmeyen Injector'lar

Eskiden bir servisi rota seviyesinde (providers: [MyService]) sağladığınızda, kullanıcı o rotaya girdiğinde servis ayağa kalkıyordu ancak kullanıcı rotadan ayrıldığında servis yok edilmiyordu. Bu durum, özellikle ağır işlemler yapan veya çok sayıda aboneliği (subscription) olan servislerde zamanla bellek sızıntılarına (memory leak) yol açabiliyordu.

Çözüm: withExperimentalAutoCleanupInjectors()

Angular 21.1, bu sorunu çözmek için deneysel bir router seçeneği sunuyor. Bu özellik aktif edildiğinde, rota bazlı sağlanan servisler, kullanıcı rotadan ayrıldığında bileşenlerde olduğu gibi otomatik olarak yok ediliyor (ngOnDestroy tetikleniyor).

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      [
        {
          path: 'dashboard',
          component: DashboardPage,
          providers: [DashboardService],
        },
      ],
      withExperimentalAutoCleanupInjectors(),
    ),
  ],
};

Bu özellik, özellikle büyük ölçekli ve çok rotalı uygulamalarda bellek yönetimini otomatize ederek uygulamanın uzun süreler boyunca stabil çalışmasını sağlıyor.

Şablon Sözdizimi (Template Syntax) Genişlemeleri

Angular şablonları, JavaScript'e benzeyen ancak kendine has kuralları olan bir yapıya sahiptir. JavaScript'te olup da şablonda olmayan özellikler genellikle Angular ekibi tarafından zamanla eklenir. 21.1 bu konuda iki büyük adım attı.

Çoklu Switch Case Eşleşmesi

Modern JavaScript ve diğer birçok dilde bulunan bir özellik olan "fall-through" benzeri bir yapı artık @switch kontrol akışında mevcut. Artık birden fazla @case ifadesini birbirine bağlayarak aynı içeriği render edebilirsiniz.

@switch (userRole()) {
  @case ('admin')
  @case ('editor') {
    <button (click="editContent()">Düzenle</button>
  }
  @case ('viewer') {
    <p>Sadece okuma yetkiniz var.</p>
  }
}

Bu değişiklik, şablonlardaki kod tekrarını önemli ölçüde azaltıyor ve mantıksal gruplamayı kolaylaştırıyor.

Spread (...) Operatörü Desteği

Yıllardır beklenen bir diğer özellik ise Spread (yayılma) operatörünün şablonlarda doğrudan kullanılabilmesi. Artık nesneleri veya dizileri birleştirirken veya bir fonksiyona parametre olarak geçerken ... operatörünü kullanabilirsiniz.

<app-custom-card
  [config="{ ...defaultConfig, ...userSettings() }"
  [items="[ ...baseItems, 'New Item' ]"
/>

Bu, özellikle dinamik konfigürasyonlar oluştururken şablon içindeki veri manipülasyonunu çok daha güçlü ve deklaratif hale getiriyor.

Reaktif isActive() ve Router Geliştirmeleri

Angular 21.1 ile Router.isActive() metodu artık deprecated (kullanım dışı) olarak işaretlendi. Bunun yerine gelen yeni ve bağımsız isActive() fonksiyonu, reaktif bir yapı sunuyor. Bu fonksiyon bir computed signal döndürerek, aktif URL değişimlerini otomatik olarak takip etmenize olanak tanıyor.

Bu sayede navigasyon durumlarını takip etmek için router event'lerine abone olmak ve manuel kontrol yapmak yerine, doğrudan sinyallerin gücünden faydalanabiliyoruz.

Geliştirici Araçları (DevTools) ve MCP Sunucuları

Angular 21.1 sadece framework çekirdeğinde değil, çevre araçlarında da iyileştirmeler getiriyor:

1. Sinyal Formatlayıcı: Tarayıcı DevTools'u üzerinden sinyallerin (özellikle iç içe geçmiş olanların) çok daha okunabilir ve anlaşılır bir şekilde incelenmesini sağlayan yeni bir formatlayıcı eklendi. 2. MCP (Model Context Protocol) Desteği: Özellikle AI destekli geliştirme süreçlerini iyileştirmek adına yeni MCP sunucu araçları rapor ediliyor. Bu, dev-server ve kod düzenleyici arasındaki iletişimi daha akıllı hale getiriyor.

Gelecek Planları ve Yol Haritası

Angular ekibi, yayınladığı takvimle v21 serisinin sonuna yaklaştığımızı ipucu veriyor. Mevcut planlara göre:

• Şubat 2026'nın son haftası: Angular 21.2 sürümü bekleniyor.
• Mayıs 2026: Angular 22 ana sürümü (major) hedefleniyor.

Bu durum, Angular 21.1'deki deneysel özelliklerin 21.2 ile daha kararlı hale geleceğini ve v22 ile birçoğunun stabil olarak hayatımıza gireceğini gösteriyor.

Angular 21.1, "ara sürüm" etiketine rağmen geliştirici hayatını kolaylaştıran kritik dokunuşlar içeriyor. Signal Forms'un yapısal olarak oturmaya başlaması, router üzerindeki bellek iyileştirmeleri ve şablonların artık daha fazla JavaScript yeteneğine kavuşması, framework'ün modern web standartlarına ne kadar hızlı adapte olduğunun bir kanıtı.

Eğer uygulamanızda yoğun olarak rota bazlı servisler kullanıyorsanız veya Signal Forms denemeleri yapıyorsanız, 21.1 sürümüne geçiş yapmak ve bu yenilikleri tecrübe etmek için harika bir zaman.