How to make customize stepper component reusable using angular 6 material

Question

I am using Angular material stepper my requirement is after customizing steps to reuse stepper component . I am loading step dynamically so depends upon the requirement I want to load stepper in different component. so my Senerio are -

1. I have OfferComponent and i want to display 2 steps dynamically in this component.

2. I have another component DataSource And I want to display 4 staeps dynamically.

please find below example stackblitz link.

https://stackblitz.com/edit/angular-material-stepper212?file=main.ts

Answer 1

To be able to reuse component you first need to define stepper.module.ts which will export that component.

Create a module which will look like this:

@NgModule({
  declarations: [StepperComponent],
  imports: [
    CommonModule,
  ],
  exports: [StepperComponent]
})
export class StepperModule { }

Then you can use Stepper component in every component declared in module where is the StepperModule imported.

Example:

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    StepperModule
  ]
})
export class LoginModule { }

You can use StepperComponent in LoginComponent since LoginComponent is declared in module where is StepperModule imported.