LazyLoading component in angular 15 - specify input & output properties

Question

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();
  }

1. Everything works fine, but I am not sure how to pass the data as Input() & how to capture Output() event.

2. Previously it was simple as below

   <app-material-advancesearch [searchkeywords]="searchkeywords" (notifyMaterialList)="refreshLists($event)"></app-material-advancesearch>
   

3. Now after converting into Lazy Load component - where shall I mention my Input() & Output() properties ?

Thanks in advance

Answer 1

In order to set the input properties of a dynamically added / lazy loaded component, you have to store the reference to it in a variable and then access it's instance property like this:

const ref = this.formComponent.createComponent(MaterialAdvanceSearchComponent);
ref.instance.someInputProperty = 'someValue';

However, this approach has some drawbacks (see this post).

In Angular v14 a new method was introduced to overcome this issues. You can now set the input properties like this:

ref.setInput('someInputProperty', 'someValue');