CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular-material2
CloudSeph
CloudSeph

Reputation: 883

how can i determine which button was clicked in angular material dialog

import {Component, Inject} from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MdDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MdDialogRef<DialogOverviewExampleDialog>,
    @Inject(MD_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

Let's say i have the code as above. And the result shown below:

enter image description here

Based on this picture, how can i determine if the user clicked OK or No thanks. I want to create a function for each event. tried dialogRefAfterClose but it runs no matter what button i click.

Upvotes: 5

Views: 11935

Answers (4)

morteza.marivani
morteza.marivani

Reputation: 51

<button  mat-button  (click)="onNoClick()"  [mat-dialog-close]="data.SelectedBtn">No Thanks</button>
  <button  mat-button  (click)="onOkClick()"  [mat-dialog-close]="data.SelectedBtn" cdkFocusInitial>Ok</button>


@Component({
  selector: 'dialog-overview-example-dialog',
 templateUrl: './dialog.html',
})
export class DialogComponent {

 constructor(
public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) { }

 onNoClick(): void {
this.data.SelectedBtn = false;
this.dialogRef.close(this.data.SelectedBtn);
}

onOkClick(): void {
  this.data.SelectedBtn = true;
  this.dialogRef.close(this.data.SelectedBtn);
}


}

Upvotes: 0

Vivek Doshi
Vivek Doshi

Reputation: 58553

You can do that with single function, no need to add functions for more buttons

Like this :

<div mat-dialog-actions>
  <button mat-button (click)="clickBtn(true)" tabindex="2">Ok</button>
  <button mat-button (click)="clickBtn(false)" tabindex="-1">No Thanks</button>
</div>

clickBtn(status) {
    if(status)
        console.log('Ok button clicked');
    else 
        console.log('No button clicked');    
    this.dialogRef.close();
}

Upvotes: 0

Jins Peter
Jins Peter

Reputation: 2469

Hi I noticed that you are using the exact same example from angular.material. The option you asked for need to be handled by Yourself according to your purpose. As seen in the example there. my example

In here the onNoClick() and the onOkClick() does the Job Add the functions in compontent ts and bind it in the component html

Dialog Component TS

export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    alert("You clicked no.")
    this.dialogRef.close();

  }
  onOkClick():void{

    alert("You clicked Ok");
  }
}

Dialog Component HTML

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput tabindex="1" [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onOkClick()" [mat-dialog-close]="data.animal" tabindex="2">Ok</button>
  <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

Upvotes: 2

Fetrarij
Fetrarij

Reputation: 7326

In your dialog html, dialog-overview-example-dialog.html, You can just add (click) event in your both button.

<div mat-dialog-actions>
  <button mat-button (click)="clickOK()" tabindex="2">Ok</button>
  <button mat-button (click)="clickNo()" tabindex="-1">No Thanks</button>
</div>

and you can close the dialog programmaticly:

clickNo() {
    console.log('No button clicked');
    this.dialogRef.close();
}
clickOk() {
    console.log('Ok button clicked');
    this.dialogRef.close();
}

Upvotes: 7

Related Questions