Merhaba, uzun bir aradan sonra..

Gözlerim kanla dolu 39 yıldır, rapim sonsuz. Ruhum ve sulhum, yarım onsuz. Çatısı uçar evin, cebin boştur.. #OmzunaAl ( Bunu yazarken, şarkının tam bu kısmı geldi. :D)

Bugün şirkette geliştirdiğimiz bir projenin, bir kısmında kullanmamız gereken dynamic component’lerden ve nasıl Angular projemize entegre edeceğimizden bahsedeceğim.

Henüz iş projemize entegre etmedim, muhtemelen ilerleyen günlerde ekleyeceğim ancak ilk siz değerli takipçilerimle paylaşmak istedim. Hem de bu yazıyla bir kez daha dönüş yapmış olayım 🙂

Öncelikle ben bu işlemi yaparken Angular’ın 8. versiyonunu kullanıyor olacağım.

Kodlardan önce sizde benim gibi direkt demo görmek istiyorsanız sizi şuraya yönlendirelim.. == > Stackblitz

Direkt olarak app.component üzerinden anlatacağım, siz ihtiyacınıza göre, istediğiniz yerde kullanabilirsiniz.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { DynamicComponent } from './dynamic/dynamic.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, DynamicComponent ],
  bootstrap:    [ AppComponent ],
  entryComponents: [DynamicComponent]
})
export class AppModule { }

app.component.html

<button (click)="add()">Dynamically Add Component</button>

<div #container></div>

app.component.ts

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic/dynamic.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

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

// static:false, Angular 8'de belirtilmesi gerekir.

  private _counter = 1;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  add(): void {
    // create the component factory
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // add the component to the view
    const componentRef = this.container.createComponent(componentFactory);

    // pass some data to the component
    componentRef.instance.index = this._counter++;
  }
}

Daha sonrasında Angular projemizin içerisinde komut satırı açıp;

ng g c dynamic

yazıp, dynamic isimli yeni bir component oluşturabiliriz.

dynamic.component.html

<p>Dynamic Component {{ index }}</p>

dynamic.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  templateUrl: './dynamic.component.html',
  styleUrls: ['./dynamic.component.css']
})
export class DynamicComponent {

  @Input() index: number;

  ngOnInit(){
    alert(this.index)
  }

}

İşte bu kadar 🙂 Artık dinamik bir şekilde component’i dilediğiniz yerde çağırabilirsiniz. Eğer ki her butona tıklandığında yeni bir component üretmek istemiyorsanız,

app.component.ts dosyasında, add function’a şu kodu ekleyebilirsiniz.

this.container.clear();