CODEWITHSUNDEEP
angularangular-material
Maty
Maty

Reputation: 65

Angular Material Stepper - Calling next() not working until I click on the view

I'm building an electron app with angular 7 and angular material

I have a Stepper which 2nd step makes a call to electron main to make the user select a folder where application stuff will be saved. When it's selected it makes a call to 'selectedWorkingFolder', which sets the step as completed and should directly go to step 3 with (this.stepper.next()), this doesnt work unless I click anywhere on the window.

Here's a gif showing it

https://i.gyazo.com/7e17510822bc7b3946bc6e917e965466.mp4

Here's the controller code 

import { Component, OnInit, Input, ChangeDetectorRef, ViewChild } from '@angular/core';
import { ElectronService } from 'src/app/services/electron/electron.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.css']
})

export class MainComponent implements OnInit {

    @ViewChild('stepper') stepper;

    firstFormGroup: FormGroup;
    secondFormGroup: FormGroup;

    isLinear = true;

    constructor(
        private readonly ipcServ: ElectronService,
        private cdRef: ChangeDetectorRef,
        private _formBuilder: FormBuilder,
    ) {
        this.firstFormGroup = this._formBuilder.group({
            firstCtrl: ['', Validators.required]
        });

        this.secondFormGroup = this._formBuilder.group({
            secondCtrl: ['', Validators.required]
        });

        this.ipcServ.on('databaseCheckResult', (event, docs) => {
            console.log(docs);
            this.changeState(docs);
        });

        this.ipcServ.on('selectedWorkingFolder', (event, docs) => {
            this.stepper.selected.completed = true;
            this.stepper.selected.editable = false;
            this.stepper.next();
        });

    }

    ngOnInit() {
        this.ipcServ.send('checkdb');
    }

    changeState(action) {
        if (action === 'unconfigured') {
            this.cdRef.detectChanges();
        } else {

        }
    }

    stepperEvents(event) {
        if (event.selectedIndex === 1) {
            this.ipcServ.send('selectFolder');
        }

    }
}

Here's the html code

<mat-vertical-stepper labelPosition="bottom" #stepper (selectionChange)="stepperEvents($event)">
    <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
            <ng-template matStepLabel>Enter your profile name</ng-template>
            <mat-form-field>
                <input matInput placeholder="Profile Name" formControlName="firstCtrl" required>
            </mat-form-field>

            <br>
        </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup">
        <ng-template matStepLabel>Select the working folder</ng-template>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        You are now done.
    </mat-step>
</mat-vertical-stepper>

Also i'm pretty new to angular so any tips on how to improve my code would help a lot.

Thanks

Upvotes: 2

Views: 9825

Answers (2)

millenion
millenion

Reputation: 1907

Just in case someone falls into same problem, i had the exact same behavior but for a completely different reason.

In my case, i was using

[completed]="myConditionReturningBoolean"

I had to switch it to stepControl in order to make it work as expected.

[stepControl]="getProjectControl('purpose')"

"getProjectControl" definition =>

getProjectControl(control: string): FormControl {
  return this.projectFormGroup.controls[control] as FormControl
}

Upvotes: 0

Pedro Romero
Pedro Romero

Reputation: 696

I suppose you fixed it, but i think the problem is that you call a global callback that is outside of Angular so the change detection is not running. To tell Angular that you are ready, wrap your code into ngZone.run()

constructor(private ngZone: NgZone) {...}

this.ipcServ.on('selectedWorkingFolder', (event, docs) => {
  this.ngZone.run(() => {
    this.stepper.selected.completed = true;
    this.stepper.selected.editable = false;
    this.stepper.next();
  });           
});

Upvotes: 8

Related Questions