Angular [mat-dialog-close]="false" does not work-CodePudding

Is there a certain reason, why [mat-dialog-close]="createFurtherCheckbox.checked ? 'false' : 'true'" does not work, if the value for [mat-dialog-close] is false? Within a dialog I create an object by clicking a submit button and if a certain checkbox is checked, which is questioning if I want to create another object, the dialogbox shall not close, so I can create another object (in this case a course). I want the dialog to reset and stay open, if the checkbox ist checked.

Even if I try [mat-dialog-close]="false" the dialog closes.

However [type]="createAnotherCheckbox.checked ? 'reset' : 'button'" does the 'reset'-type change correctly. (Used to reset the formControls within a form)

create-course-dialog.component.html

<mat-dialog-actions>
    <mat-checkbox #createFurtherCheckbox>Create another course?</mat-checkbox>
    <button mat-raised-button [mat-dialog-close]="createFurtherCheckbox.checked ? 'false' : 'true'" [type]="createFurtherCheckbox.checked ? 'reset' : 'button'"
            (click)="Submit()" [disabled]="courseForm.invalid">Create course</button>
    <button mat-raised-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

CodePudding user response：

I think you misunderstand the input of the mat-dialog-close directive.

@Input('mat-dialog-close')
dialogResult: any

You are setting the return value for the result you get when you subscribe to afterClosed like here

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

fast workaround with ngif and two buttons

<ng-container *ngIf="createAnotherCheckbox.checked">
   <button mat-raised-button type="reset" (click)="Submit()" [disabled]="courseForm.invalid">
    Create course</button>
</ng-container>
<ng-container *ngIf="!createAnotherCheckbox.checked">
   <button mat-raised-button type="button" (click)="Submit()" [disabled]="courseForm.invalid" 
    mat-dialog-close>Create course</button>
</ng-container>

CodePudding user response：

Okay thanks, you are right. I fixed my issue by using two ng-container:

<ng-container *ngIf="createAnotherCheckbox.checked">
   <button mat-raised-button type="reset" (click)="Submit()" [disabled]="courseForm.invalid">
    Create course</button>
</ng-container>
<ng-container *ngIf="!createAnotherCheckbox.checked">
   <button mat-raised-button type="button" (click)="Submit()" [disabled]="courseForm.invalid" 
    mat-dialog-close>Create course</button>
</ng-container>