I am converting my advance search component used inside my landing page into Lazy Loading.
My landing page html:
<button (click)="onAdvanceSearch()"></button>
<ng-template #formComponent></ng-template>
My landing page .ts file
@ViewChild('formComponent', { read: ViewContainerRef })
formComponent!: ViewContainerRef;
async loadAdvanceSearchForm() {
const { MaterialAdvanceSearchComponent } = await import(
'../../material-advancesearch/material-advancesearch.component'
);
this.formComponent.clear();
this.formComponent.createComponent(MaterialAdvanceSearchComponent);
}
onAdvanceSearch(): void {
this.loadAdvanceSearchForm();
}
Everything works fine, but I am not sure how to pass the data as Input() & how to capture Output() event.
Previously it was simple as below
<app-material-advancesearch [searchkeywords]="searchkeywords" (notifyMaterialList)="refreshLists($event)"></app-material-advancesearch>
Now after converting into Lazy Load component - where shall I mention my Input() & Output() properties ?
Thanks in advance