Set inputs of component in directive

I have a toolbar component which orchestrates which menu items should be displayed. The actions are defined in the template.

<teamx-action-template>
<app-new-action />
<app-open-action />
<app-save-group>
<app-save-action />
<app-save-as-action />
</app-save-group>
<teamx-export-action />
</teamx-action-template>


Some of these actions are designed by another team and I do not want to pollute the scope of my component. Thats why I thought of a directive which handles filling inputs and reacting to outputs of the action (menu item) of Team X.

<teamx-export-action appExportActionAdapter />


Handling outputs is no problem with @HostBinding but how can I fill the @Input of ExportActionComponent of Team X? This component is listening to the changes via ngOnChanges and in my opinion setting the input directly and calling ngOnChanges is bad practice.

@Directive(...)
export class ExportActionAdapter implements OnInit {
comp = inject(ExportActionComponent);
businessExportService = inject(ExportService);

ngOnInit() {
const value = this.mapToViewModel(this.businessExportService.getExportMethods());
this.comp.exports = value;
this.comp.ngOnInit({
...
});
}

mapToViewModel(...) {
...
}
}


Which good solutions to fill the input and trigger ngOnChanges do you know?

Continue reading...