How to avoid creating multiple instance of the same component

Question

Please refer the plunker, in that you can notice the child component "Loader" is loaded multiple times whenever the button is clicked i.e. on every click a new instance is being created.

How do I avoid creating multiple instance of the same component? My requirement whenever the button is clicked the new instance should replace the existing? how to do this?

Parent component

import { Component, ViewChild, ViewContainerRef, ComponentResolver, Injector, AfterViewInit } from '@angular/core';
import {Loader} from './Loader';
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <input type="button" (click)="onclick($event)" value="Click"/>
      <h3>Loading component</h3>
      <load></load>
    </div>
  `,
  directives: [Loader]
})
export class App {
  constructor(private _injector: Injector, private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {
    this.name = 'Angular2 (Release Candidate!)';
    console.log("in constructor of App");
  }
   @ViewChild(Loader, { read: ViewContainerRef }) childContainer;

  onclick(event)
  {
     this._cr.resolveComponent(Loader).then(cmpFactory => {
          console.log("Creating component");

          this.childContainer.createComponent(cmpFactory,null, this._injector);
          let cmpRef = this.childContainer.createComponent(cmpFactory);
          cmpRef.instance.ParentID = "55";  

      });

  }


}

Günter Zöchbauer · Accepted Answer · 2016-07-18 17:56:18Z

2

Store cmpRef and call cmpRef.destroy() before you create a new instance

  onclick(event)
  {
     this._cr.resolveComponent(Loader).then(cmpFactory => {
          if(this.cmpRef) {
            this.cmpRef.destroy();
            this.cmpRef = null;
          }
          console.log("Creating component");

          //this.childContainer.createComponent(cmpFactory,null, this._injector);
          this.cmpRef = this.childContainer.createComponent(cmpFactory);
          this.cmpRef.instance.ParentID = "55";  

      });

  }

edited Jul 18, 2016 at 17:56

answered Jul 18, 2016 at 17:22

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

Krishnan Over a year ago

Can you please correct it in the plunker plnkr.co/edit/8H7oz8Yeia9F3NQ3sgyi?p=preview The suggested changes is not working in it?

Günter Zöchbauer Over a year ago

There are two variants of createComponent in the Plunker, one with passing the injector and one without. destroy() is only called for the one where cmpRef is stored. Therefore for each click two components were created but only one destroyed. I commented out one createComponent plnkr.co/edit/VyFdZOT8CoElkSQ129jc?p=preview

Krishnan Over a year ago

understood the mistake, but even now if you notice there are 2 instances of the Loader component is rendered i.e. first instance during the time of page load and the second during the click event. How to avoid during the page load i.e. my need is to load only during the click event?

Günter Zöchbauer Over a year ago

One is added statically by <load></load> in the AppComponent template. Just delete this line ;-)

Krishnan Over a year ago

I tried deleting that line already before posting, in that case it doesn't load any instance. even tried adding a div tag with id as "load". <div id="load"></div>. In both cases it doesn't even load any single instance. ?

Collectives™ on Stack Overflow

How to avoid creating multiple instance of the same component

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related