Angular, Get Index Of Dynamically Created Component Inside ViewContainerRef

Question

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

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

Code Below

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

componentFactory

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

ngAfterViewInit() {
  this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}

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

Trying to use

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

but I first need the index of the dynamically created component

this.dynamicInsert.indexOf(viewRef: viewRef)

Max Koretskyi · Accepted Answer · 2017-08-28 19:00:47Z

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 component:

  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 component you don't need to pass index.

To remove all components you can use clear method.

edited Aug 28, 2017 at 19:00

answered Aug 28, 2017 at 18:55

Max Koretskyi

106k69 gold badges357 silver badges525 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

diopside Over a year ago

Yep! You can also just store a ref to the component, and a separate ref for the instance. --> ref = this.container.createComponent(component) --> instance = ref.instance --> Then you can just use ref.destroy()

locnguyen Over a year ago

This method does not work for const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(this.componentFactory).instance but works for const dynamicComponent = this.dynamicInsert.createComponent(this.componentFactory). Gives an error of Property 'hostView' does not exist on type 'AssetOptionComponent'

diopside Over a year ago

Yeah hostView is a property of the underlying ComponentRef<T> object, not of an instance.

locnguyen Over a year ago

Any suggestion on how to get the index of the instance

Max Koretskyi Over a year ago

@locnguyen, view container stores component refs, not instances, that is why it returns component ref. A component instance is just part of component ref. The way I showed is the only correct way

Vega · Accepted Answer · 2017-09-06 15:04:31Z

1

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

addAssetOption() {
   const dynamicComponent: ComponentRef<any> = this.dynamicInsert.createComponent(this.componentFactory);
     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

edited Sep 6, 2017 at 15:04

answered Aug 28, 2017 at 22:02

Vega

28.8k28 gold badges121 silver badges151 bronze badges

1 Comment

Vega Over a year ago

Please see the StackBlitz demo in the updated answer

Collectives™ on Stack Overflow

Angular, Get Index Of Dynamically Created Component Inside ViewContainerRef

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related