Dinamik Bileşenler

Bu derste esnek uygulamalar oluşturmak için Angular'da bileşenleri dinamik olarak nasıl yükleyeceğinizi öğreneceksiniz.

Dinamik Bileşenler Nedir?

Dinamik bileşenler, doğrudan bir şablonda tanımlanmak yerine çalışma zamanında görünüme yüklenir.

Dinamik Bileşenler Neden Kullanılır?

• Esnek kullanıcı arayüzü oluşturma
• Bileşenleri koşula bağlı olarak görüntüleme
• Dinamik panolar veya iletişim pencereleri oluşturma

Yer Tutucu Oluşturma

Dinamik bileşenleri yüklemek için <ng-container> öğesini yer tutucu olarak kullanın:

<ng-container #dynamicContainer></ng-container>

ViewChild Kullanımı

Bileşen sınıfınızda @ViewChild kullanarak kapsayıcıya erişin:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

Bileşenleri Dinamik Olarak Yükleme

Bileşenleri oluşturmak ve eklemek için bileşen fabrika çözümleyicisini kullanın:

const componentRef = this.container.createComponent(MyDynamicComponent);

Dinamik Bileşenlere Veri Aktarma

Dinamik olarak oluşturduğunuz bileşene girdileri kullanarak veri aktarın:

componentRef.instance.data = 'Hello Dynamic';

Dinamik Bileşenleri Kaldırma

Dinamik bileşenleri DOM'dan kolayca kaldırabilirsiniz:

this.container.clear();

Özet

Artık Angular'da bileşenleri dinamik olarak nasıl oluşturacağınızı, yöneteceğinizi ve kaldıracağınızı biliyorsunuz. Harika iş çıkardınız!