Exploring possibility of Angular Material Stepper taking component as input

Question

I'm new to angular and I've been playing around Stepper function.

Problem Statement:

I'm trying to create a Stepper Higher Order Component that would accept components as input (For each step) and renders.

The goal is i will be able to pass in various components and render them.

https://material.angular.io/components/stepper/overview

Is this possible with angular? I'd really appreciate some light. I tried looking into the docs but lost.

Thanks

Answer 1

What you're talking about is dynamically loading components into your Stepper.

All you need is to know the ComponentType of components you want to dynamically render and a way to pass them to your component. I'd suggest using @Input with ComponentType<any>[].

// your.component.ts
@Input() components: ComponentType<any>[];

<!-- your.component.html -->
<mat-stepper>
  <mat-step *ngFor="let component of components">
    <ng-container *ngComponentOutlet="component"></ng-container>
  </mat-step>
</mat-stepper>

and voila, you have dynamically rendered your components.

To read more on that: https://angular.io/api/common/NgComponentOutlet

Also, here's a great library in case you'll want support for Inputs and Outputs: https://www.npmjs.com/package/ng-dynamic-component