Within my Angular 2 ngrx application, I am working with a structure that involves nested elements:
parentContainer.ts
@Component({
template: `<parent-component
(onEvent)="onEvent($event)"
></parent-component>`,
})
class ParentContainer {
constructor(private store: Store<IState>) { }
private onEvent = (payload: IEventPayload) {
this.store.dispatch(new EventAction(payload));
}
}
parentComponent.ts
@Component({
selector: 'parent-component',
templateUrl: 'patent.html',
})
class ParentComponent {
@Output() private onEvent = new EventEmitter<IEventPayload>();
}
patent.html
<div>
...some content
<child-component></child-component>
</div>
In the current setup, I am able to trigger an event from the parent component, but now I need to initiate it from the child component.
I am looking for a way to pass an event through the parent component to the child component and then utilize something like:
this.onEvent.emit({... some payload})