0

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

TechnoCorner
  • 4,879
  • 10
  • 43
  • 81
  • your requirement is not clear, i feel that you might be asking is that you will provide diffetnt component in steps depending on different condition? If that is the case then you will add all the conditional components beforehand and control with ng-if or ngswitch which components will render on the screen. – vaira Jan 28 '23 at 18:22

1 Answers1

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

Islombek Hasanov
  • 161
  • 7