I need to emit/bubble the event from the dynamically loaded child component
to its parent component. I have parent component which has angular tabs in
it. Inside the tab I load the child components dynamically. Since these are
dynamically loaded I am not able bubble up the events raised from the child
component to its parent component.
The event gets triggered in the child component but it is not being
listened by the parent?
My Parent component which contains the tabs are as follows:
<div fxLayout="column" fxLayout.gt-sm="row">
<md-tab-group class="tab-group" dynamicHeight
(selectedIndexChange)="onTabChange($event)" style="width:100%; height:100%">
<md-tab *ngFor="let tab of homepageTabs; let i = index">
<ng-template mdTabLabel>{{tab.label}}</ng-template>
</md-tab>
</md-tab-group>
</div>
<div>
<div #tabContent></div>
</div>
Component code
export class HomePageComponent implements OnInit {
private tabContentComponents = [
];
@ViewChild('tabContent', { read: ViewContainerRef })
tabContent: ViewContainerRef;
// Model for tabs
homepageTabs = [
{
label: 'HomeLabel',
tabTitle: 'HomeTitle'
},
{
label: 'App Details',
tabTitle: 'App Details'
}
];
constructor(private router: Router, private cfr:
ComponentFactoryResolver) {
}
//this is the place where I am loading the child component dynamically based on
some logic...
onTabChange(tabIndex) {
console.log("tabIndex : " + tabIndex);
if (tabIndex == 0) {
const factory =
this.cfr.resolveComponentFactory(ApplicationListComponent);
this.tabContent.clear();
this.tabContent.createComponent(factory);
}
if (tabIndex == 1) {
const factory =
this.cfr.resolveComponentFactory(ApplicationDetailsComponent);
this.tabContent.clear();
this.tabContent.createComponent(factory);
}
}
//This is the event which needs to be bubbled up from the child component
OpenReportListEvent(event: any) {
//do something here
}
}
My child component looks like below,
export class ApplicationListComponent implements OnInit {
@Output() openReportListEvent = new EventEmitter();
constructor(){
}
//This is the event which needs to emit to the parent component
OpenReportList(application: any)
{
this.openReportListEvent.emit();
}
}
How to raise the events to the parent component in this scenario?
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" 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.
