Emit event from dynamically created child component to parent component
The problem is that the FormSliderDirective
does not have an onRemove
event. For your code to work you need to add the event to the directive and subscribe it to the event of the internal component. So whenever the internal event fires it will be propagated to the outside.
Here is a sample how you can add this to your directive:
@Directive({
selector: '[appSliderForm]'
})
export class FormSliderDirective implements OnInit {
@Input() questionTest: QuestionInSlider;
@Output() public onRemove = new EventEmitter<QuestionInSlider>();
constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}
ngOnInit(): void {
const factory = this.resolver.resolveComponentFactory<TestQuestionInSliderComponent>(TestQuestionInSliderComponent);
const component = this.container.createComponent(factory);
component.instance.questionTest = this.questionTest;
component.instance.onRemove.subscribe(this.onRemove); // this connects the component event to the directive event
component.instance.ref = component;
}
}