How to use ngx-component-outlet in ng-template

[st-clair-clarke]

Hi, I like ngx-component-outlet. However, I would like to use in ng-template, similar to the example below with another dynamic component creation library:

     <ng-template matExpansionPanelContent>
          <ndc-dynamic
              [ndcDynamicComponent] = 'component'
              [ndcDynamicInputs] = 'componentInputs'
              [ndcDynamicOutputs] = 'componentOutputs'></ndc-dynamic>
        </ng-template>

Can I do something similar with ngx-component-outlet? Cheers

[thekiba]

Hello! Of course, you can use any dynamic component as regular and everything will work.

[st-clair-clarke]

Thanks for the quick reply.

Using the example above, how would I use your outlet with the ng-template with the component, componentInputs and componentOutputs above.

I have been trying it for sometime without any success.

Cheers

[thekiba]

You would like use componentInputs and componentOutputs instead of regular binding?

[thekiba]

An example how to use ngx-component-outlet in ng-template: https://stackblitz.com/edit/angular-ngx-component-outlet-with-ng-template

The host component on which the rendering and binding are hanging

@Component({
  selector: 'app-dynamic-host',
  template: ''
})
export class DynamicHostComponent {
  @Input() regularInput;
  @Output() regularOutput = new EventEmitter<any>();
}

Dynamic component you would like use as regular

@Component({
  selector: 'app-dynamic',
  template: `
  <button (click)="regularOutput.emit($event)">
    Hello, {{ regularInput }}
  </button>`
})
export class DynamicComponent {
  @Input() regularInput;
  @Output() regularOutput = new EventEmitter<any>();
}

AppComponent

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  component = DynamicComponent;
  onClick($event) {
    alert($event);
  }
}

And your template

<ng-template #template>
  <app-dynamic-host
    [ngxComponentOutlet]="component"
    [regularInput]="name"
    (regularOutput)="onClick($event)"
  ></app-dynamic-host>
</ng-template>

<ng-container *ngTemplateOutlet="template"></ng-container>