I am trying to load a child component from the parent component. From the
parent component I need to pass some parameter to the child which would be
used in the child component to make a service call and retrieve some data
from WebAPI Service. the returned data should be bound to some input
controls in the child component.
I validated that the parameter is passed to the child component and it
makes the service calls and returns back with the data properly. but the
returned data is not bound with the input controls in the child component.
Note: Making the WebAPI service call and retrieving the data is written in
a public method of the child component, this method is invoked from the
parent component after assigning/passing the input parameter.
my parameter component invocation method
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
});
Parent component html content
<div>
<k-grid [options]="options" (click)="onChange($event)"></k-grid>
</div>
<div>
<extractorqueue-details [(ngModel)]="resultData"></extractorqueue-details>
</div>
my child component
import { Component, Input, AfterViewInit } from '@angular/core';
import { CacheDataService } from '../Service/CacheDataService';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import { FORM_DIRECTIVES } from '@angular/common';
@Component({
selector: 'extractorqueue-details',
templateUrl: './HTML/Admin/ExtractorQueueDetails.html',
directives: [FORM_DIRECTIVES],
providers: [CacheDataService, HTTP_PROVIDERS]
})
export class ExtractorQueueDetails {
@Input() ExtractorQueueID : any;
resultData: any;
constructor(private _CacheDataService: CacheDataService) {
console.log("ExtractorQueueDetails component is loaded");
console.log("ExtractorQueueID received : " + this.ExtractorQueueID);
if (this.ExtractorQueueID != undefined) {
this.LoadExtractorQueueDetails();
}
}
GetExtractorQueuesByID(_extractorQueueID) {
console.log("Inside GetExtractorQueuesByID method in
ExtractorQueueDetails");
this._CacheDataService.GetExtractorQueuesByID(_extractorQueueID)
.subscribe(
(res) => {
this.resultData = res;
console.log(this.resultData);
//this.DrawBubbleChart();
},
(error) => console.log(error),
() => console.log('Error in GetExtractorQueuesByID in
ExtractorQueueDetails')
);
}
public LoadExtractorQueueDetails()
{
console.log("in sample of ExtractorQueueDetails");
console.log("ExtractorQueueID received in sample : " +
this.ExtractorQueueID);
this.GetExtractorQueuesByID(this.ExtractorQueueID);
}
}
my child component html contents
<div class="col-md-6">
<div class="form-group col-lg-4">
<label>Queue ID</label>
<input type="text" name="txtQueueID" class="form-control"
id="txtQueueID" [(ngModel)]="resultData.queueId">
</div>
<div class="form-group col-lg-4">
<label>Current Status</label>
<input type="text" name="" class="form-control" id=""
value="">
</div>
<div class="form-group col-lg-4">
<label>Application</label>
<input type="text" name="" class="form-control"
[(ngModel)]="resultData.Description" id="" value="">
</div>
--
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.
