Angular stepper

Question

I have one stepper-component. Inside stepper-component.html, I have four components as the mat-steps like this -

<div class="container-fluid">
  <mat-horizontal-stepper linear #stepper>
    <mat-step label="Step1">
      <component-1></component-1>
    </mat-step>
    <mat-step label="Step2">
      <component-2></component-2>
    </mat-step>
    <mat-step label="Step3">
      <component-3></component-3>
    </mat-step>
    <mat-step label="Step4">
      <component-4></component-4>
    </mat-step>
  </mat-horizontal-stepper>
</div>

I want to access component2 from the click of a button in different component say componentX and execute some function in component2. How can I do that?

Answer 1

You can play with @Input() / @Output() or you can just import in your componentX the component2 and call the method. For example inside your componentX:

constructor(private component2: Component2) {}

clickMethod() {
    this.component2.method();
}