CODEWITHSUNDEEP
javascriptangularangular-material
weinde
weinde

Reputation: 1156

Angular material go to next step from mat-dialog component

Hello I need some help on my first angular project (Angular 7 + Angular Material) where I have a pop-up that I made using mat-dialog element and I'm using a cdk-stepper element.

My current situation is that on page load I show a modal pop-up to the user on step 1 where he is prompted to fill out two inputs. Then the user can press the "Begin configuration" button that is inside this pop-up and goes to the step number two...

How can I make the button in this modal work (have the same functionality) as the NEXT / PREVIOUS buttons from the cdk-stepper? So that it will move me on the step number 2 on click.

I hope my question if undestandable and well formatted. If not, please ask for more information and I will provide it.

The code for my stepper is like this

custom-stepper.component.html:

<section class="configurator-wrap">
  <header>
    <mat-toolbar>
      <img class="cursor-pointer" src="assets/images/logo.svg" height="50" (click)="onClick(0)">
      <span class="fill-space"></span>
      <ul class="steps" fxFlex fxHide.xs fxHide.sm>
        <li *ngFor="let step of _steps; let i = index;" [ngClass]="{'active': selectedIndex === i,'done': selectedIndex> i}" (click)="onClick(i)">{{step.label}}</li>
      </ul>
      <span class="fill-space"></span>
    </mat-toolbar>
  </header>

  <div class="content">
    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
  </div>

  <footer>
    <mat-toolbar>
      <h2>Step {{selectedIndex + 1}}/{{_steps.length}}</h2>
      <span class="fill-space"></span>
      <button [ngClass]="selectedIndex > 0 ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)>_steps.length" cdkStepperNext>Begin configuration</button>
      <button [ngClass]="selectedIndex == 0 ? 'noBtn': ''" mat-raised-button color="secondary" class="naslednji-korak" [disabled]="selectedIndex == 0" cdkStepperPrevious>Previous step</button>
      <button [ngClass]="selectedIndex == 0 ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)==_steps.length" cdkStepperNext>Next step</button>
      <button [ngClass]="(selectedIndex + 1)<_steps.length ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)<_steps.length" (click)="reset()">Submit order</button>
    </mat-toolbar>
  </footer>
</section>

custom-stepper.component.ts:

import { Directionality } from '@angular/cdk/bidi';
import { ChangeDetectorRef, Component, Input, QueryList } from '@angular/core';
import { CdkStep, CdkStepper } from '@angular/cdk/stepper';

@Component({
  selector: 'app-custom-stepper',
  templateUrl: './custom-stepper.component.html',
  styleUrls: ['./custom-stepper.component.scss'],
    providers: [{provide: CdkStepper, useExisting: CustomStepperComponent}],
})
export class CustomStepperComponent extends CdkStepper {
    onClick(index: number): void {
      this.selectedIndex = index;
    }
}

This is the modal pop-up code:

my-modal.component.html

<div mat-dialog-content fxLayout="row" fxLayoutAlign="center center">
<!--  <p>Please choose country</p>-->
  <mat-form-field fxFlex.xs="100%" fxFlex="250px">
    <select matNativeControl required>
      <option value="" disabled selected>Choose county</option>
      <option value="england">England</option>
      <option value="germany">Germany</option>
    </select>
  </mat-form-field>
<!--  <p>Please select your language</p>-->
  <mat-form-field fxFlex.xs="100%" fxFlex="250px">
    <select matNativeControl required>
      <option value="" disabled selected>Choose language</option>
      <option value="enUK">English UK</option>
      <option value="enUS">English US</option>
      <option value="de">German</option>
    </select>
  </mat-form-field>
</div>
<div mat-dialog-actions fxLayoutAlign="end">
  <button mat-button mat-raised-button color="primary" (click)="onLanguageSet()">Begin configuration</button>
</div>

my-modal.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { StartService } from '../../_services/start.service';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.component.html',
  styleUrls: ['./my-modal.component.scss']
})
export class MyModalComponent implements OnInit {

  constructor(
      private startService: StartService,
      public dialogRef: MatDialogRef<MyModalComponent>,
      @Inject(MAT_DIALOG_DATA) public data: any
  ) { }

  onLanguageSet() {
    this.dialogRef.close({

    });
    this.startService.onClick();
  }

  ngOnInit() {

  }

}

Upvotes: 1

Views: 1161

Answers (1)

JuanSirOne
JuanSirOne

Reputation: 11

A bit late but where you open the dialog, you can suscribe and wait for a response, then you can execute the code that you want:

this.matDialog.open(MyComponent, {
   data: mydata // if you need it
   width:...,
   etc....
}).afterClosed()
  .suscribe((resp) => { 
   //Execute your code after the dialog is closed
   // Here you can call onClick()
   //resp will be empty if you does not return nothing in your 
   //matdialogref close code
})

Upvotes: 0

Related Questions