Trigger step next function from parent to child

Question

I've got stuck at a problem for hours.. and I can't find a solution :( (I know it's a long post, sorry and thanks for your patience!)

Structure:

Basically I have a flyover component (drawer-campaign-info) with a dynamic footer which is created like this:

<div class="drawer-campaign-footer">
  <div class="drawer-campaign-footer-text">{{ text }}</div>

  <div class="drawer-campaign-footer-buttons">
    <ng-container *ngFor="let footereAction of footerActions">
        <div class="right-side">
            <button mat-flat-button class="button" [ngClass]="footereAction.btnClass"
                (click)="footereAction.actions()" [matTooltip]="footereAction.text">
                <mat-icon *ngIf="footereAction.btnIcon"> {{ footereAction.btnIcon }} </mat-icon>
                <span> {{ footereAction.text }} </span>
            </button>
        </div>
    </ng-container>
  </div>
</div>

footerActions are passed from app.ts as an array:

setAddCampaignActions() {
    return [
        {
            name: 'addProducts',
            text: this.Translator.trans('+ Add products'),
            btnClass: 'primary default',
            actions: () => { 
                this.stepper.next(); // here is the problem
                
            }
        },
        {
            name: 'saveDraft',
            text: this.Translator.trans('Save draft'),
            btnClass: 'ternary default',
            actions: () => { }
        },
        {
            name: 'cancel',
            text: this.Translator.trans('Cancel'),
            btnClass: 'secondary danger',
            btnIcon: IconType.CLOSE,
            actions: () => { }
        }
    ]
}

In app.html the flyover is used like this:

 <drawer-campaign-info (toggleDrawer)="sidenav.toggle()" 
                       [addCampaignForm]="addCampaignForm"
                       [footerActions]="addcampaignFooterActions"
                       [headerTitle]="addCampaignHeaderTitle"
                       (stepperChange) = "stepper">
 </drawer-campaign-info>

The flyover drawer-campaign-info html contains this:

<div class='drawer-campaign-info'>

  <mktp-drawer-header [title]="headerTitle" (toggleDrawer)="toggleDrawer.emit($event)"/>

  <mat-horizontal-stepper linear #stepper class="add-campaign">
    <mat-step>
        <p>step 1 - here will be the form passed from app </p>
    </mat-step>
    <mat-step>
        <p>step 2</p>
    </mat-step>
  </mat-horizontal-stepper>

  <drawer-campaign-footer [text]="info" [footerActions]="footerActions"></drawer-campaign-footer>

</div>

Overall the component looks like this with the buttons generated correctly:

Problem:

I need to display the second step when I press the +Add products button.. I tried to pass the stepper to app component and call next from there.. but it's not working :( I feel like all the ideas are floating and can't find the logic for displaying the second step content.. I also tried to use a service who emits something, similar with the solution from here: How to execute a function from another component that is NOT a sibling of the first component? but I could't make it to work

PS: The buttons are created like that because the flyover is used in multiple components and each of it requires a different set of buttons..

If you need more data, I can provide/explain more.. Thanks in advance and have a good day!

you have not really pasted the code properly and its hard to tell which code reside in which file — vaira, Nov 24 '21 at 15:44
this.stepper.next(); // here is the problem is this code even hit? have you tried with console.log you are also not telling what exactly is the issue and where it fails — vaira, Nov 24 '21 at 15:45
It fails with stepper undefined.. with the output emitter I tried to pass the stepper from flyover to parent in order to call the next() function — Mara Black, Nov 24 '21 at 16:13
why is stepperChange being outputed from drawer-campaign-info? — vaira, Nov 24 '21 at 16:23

Trigger step next function from parent to child

0 Answers0