I tried creating a kendogrid wrapped with angular2 and on click event of a row in the grid I need to load a child component by passing the rowID/parameter and populate the contents in the child component below. But I am facing some issues in this while loading the child component.
My requirement is, only when the user clicks on any row in the grid the below child component should be loaded. But now as per the code it is getting loaded along with the grid, instead only on rowclick it should get loaded. When the user clicks on a row in the grid, the application loads a child component (and this is second instance) because there is already a instance of the child component being loaded along with parent component load. How to avoid this 2 instances Please refer the snapshot of the rendered HTML tags[image: enter image description here] <http://i.stack.imgur.com/ZSQ69.png> my parent component - code where I am loading the child component this._cr.resolveComponent(ExtractorQueueDetails).then(cmpFactory => { if (this.cmpRef) { this.cmpRef.destroy(); this.cmpRef = null; } console.log("Creating ExtractorQueueDetails component"); this.cmpRef = this.childContainer.createComponent(cmpFactory); this.cmpRef.instance.ExtractorQueueID = this.extractorQueueID; this.cmpRef.instance.LoadExtractorQueueDetails();//public method in child component }); my parent component html <div> <k-grid [options]="options" (click)="onChange($event)"></k-grid> </div> <div> <h3>Extractor Queue Details</h3> <extractorqueue-details id="extractorqueuedetails"></extractorqueue-details> </div> Note: If I delete the following line in my html in the parent component, then the child component is not getting loaded <extractorqueue-details id="extractorqueuedetails"></extractorqueue-details> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
