javascript - Angular, Get Index Of Dynamically Created Component Inside ViewContainerRef - Stack Overflow

I am trying to get the index of a dynamically created ponent inside ViewContainerRef

I need to get the index so I can destroy the ponent if I wanted too.

Code Below

@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef

ponentFactory

constructor(
  private ponentFactoryResolver: ComponentFactoryResolver,
  private viewContainerRef: ViewContainerRef,
) { }

ngAfterViewInit() {
  thisponentFactory = thisponentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}

addAssetOption() {
  const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(thisponentFactory).instance
  // how to get index of this dynamically generated ponent ^^^^
}

Trying to use

this.dynamicInsert.remove(index: number) to destroy ponent

but I first need the index of the dynamically created ponent

this.dynamicInsert.indexOf(viewRef: viewRef)

I am trying to get the index of a dynamically created ponent inside ViewContainerRef

I need to get the index so I can destroy the ponent if I wanted too.

Code Below

@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef

ponentFactory

constructor(
  private ponentFactoryResolver: ComponentFactoryResolver,
  private viewContainerRef: ViewContainerRef,
) { }

ngAfterViewInit() {
  this.ponentFactory = this.ponentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}

addAssetOption() {
  const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(this.ponentFactory).instance
  // how to get index of this dynamically generated ponent ^^^^
}

Trying to use

this.dynamicInsert.remove(index: number) to destroy ponent

but I first need the index of the dynamically created ponent

this.dynamicInsert.indexOf(viewRef: viewRef)

• javascript
• angular

Share Improve this question Follow asked Aug 28, 2017 at 18:50 locnguyenlocnguyen 84111 gold badge1212 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

To get the index you can use indexOf method and hostView property:

const index = this.dynamicInsert.indexOf(dynamicComponent.hostView)

Also note that if you don't specify the index view container will destroy the last ponent:

  remove(index?: number): void {
    const viewData = detachEmbeddedView(this._data, index);
    if (viewData) {
      Services.destroyView(viewData);
    }
  }

   export function detachEmbeddedView(elementData: ElementData, viewIndex?: number): ViewData|null {
  const embeddedViews = elementData.viewContainer !._embeddedViews;
     if (viewIndex == null || viewIndex >= embeddedViews.length) {
        viewIndex = embeddedViews.length - 1;
     }

So if you have only one ponent you don't need to pass index.

To remove all ponents you can use clear method.

If you are looking to destroy the created ponent you may consider a shortcut by just subscribing to it's observable destroy:

addAssetOption() {
   const dynamicComponent: ComponentRef<any> = this.dynamicInsert.createComponent(this.ponentFactory);
     dynamicComponent.instance.destroy.subscribe(() => dynamicComponent.destroy())
}

and then upon removing event, in AssetOptionComponent, call it:

 export class AssetOptionComponent  {
  destroy = new Destroyable();
  delete(){
    this.destroy.delete();
  }
}

export class Destroyable extends Subject<any>{
 delete() {
    this.next();
  } 
}

Working demo