Dinamik Şablonları Oluşturma

Dinamik Veri Oluşturma #

Angular şablonunuzda dinamik içerik göstermeniz gerektiğinde, Angular, statik ve dinamik içerik arasındaki farkı belirlemek için çift süslü ayraç sözdizimini kullanır.

İşte bir TodoListItem bileşeninden basitleştirilmiş bir örnek.

@Component({
  selector: 'todo-list-item',
  template: `
    <p>Title: {{ taskTitle }}</p>
  `,
})
export class TodoListItem {
  taskTitle = 'Read cup of coffee';
}

Angular bileşeni render ettiğinde çıktıyı göreceksiniz:

Bu sözdizimi, HTML içindeki dinamik veri özelliği arasında bir ekleme ilan eder. Sonuç olarak, veri değiştiğinde Angular, otomatik olarak DOM’u güncelleyecek ve özelliğin yeni değerini yansıtacaktır.

Dinamik Özellikler #

HTML öğesinde standart DOM özelliklerinin değerini dinamik olarak ayarlamanız gerektiğinde, belirtilen değerin Angular’a basit bir dize yerine bir JavaScript benzeri ifade olarak yorumlanması gerektiğini bildirmek için özellik köşeli parantez içine alınır.

Örneğin, HTML’de özellikleri dinamik olarak güncellemenin yaygın bir örneği, formun geçerli olup olmadığına bağlı olarak form gönderme düğmesinin devre dışı bırakılması gerekip gerekmediğini belirlemektir.

Kod bloğunda istenilen özelliği kare parantez içine alın, böylece atanmış değerin dinamik olduğunu (yani sabit bir dize olmadığını) Angular’a belirtmiş olursunuz.

@Component({
  selector: 'sign-up-form',
  template: `
    <button type="submit" [disabled]="formIsInvalid">Submit</button>
  `,
})
export class SignUpForm {
  formIsInvalid = true;
}

Bu örnekte, formIsInvalid doğru olduğu için oluşturulan HTML şu şekilde olacaktır:

<button type="submit" disabled>Submit</button>

Dinamik Özellikler #

Eğer özel HTML özniteliklerini (örneğin aria-, data– vb.) dinamik olarak bağlamak isterseniz, özel öznitelikleri aynı köşeli parantezlerle sarmanız gerekebilir.

@Component({
  standalone: true,
  template: `
    <button [data-test-id]="testId">Primary CTA</button>
  `,
})
export class AppBanner {
  testId = 'main-cta';
}

Maalesef, bu çalışmayacak çünkü özel HTML öznitelikleri standart DOM özellikleri değildir. Bu istenildiği gibi çalışsın, özel HTML özniteliğinin önüne attr. ön eki eklememiz gerekiyor.

@Component({
  standalone: true,
  template: `
    <button [attr.data-test-id]="testId">Primary CTA</button>
  `,
})
export class AppBanner {
  testId = 'main-cta';
}