src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts
| selector | app-confirmation-dialog |
| styleUrls | ./confirmation-dialog.component.scss |
| templateUrl | ./confirmation-dialog.component.html |
Methods |
constructor()
|
| confirm |
confirm()
|
|
Returns :
void
|
| returnBack |
returnBack()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.scss'],
})
export class ConfirmationDialogComponent {
constructor() {}
confirm() {}
returnBack() {}
}
<div class="containeer">
<h1 mat-dialog-title>Confirm Action</h1>
<div mat-dialog-content class="content">
<span>Are you sure, that you want to continue?</span>
</div>
<div mat-dialog-actions class="form-group footer-buttons">
<div class="inner">
<button
id="cancelButton"
class="btn btn-primary btn-block"
(click)="returnBack()"
[mat-dialog-close]="false"
>
Cancel
</button>
</div>
<div class="inner">
<button
id="okButton"
class="btn btn-danger btn-block"
(click)="confirm()"
[mat-dialog-close]="true"
>
Yes
</button>
</div>
</div>
</div>
./confirmation-dialog.component.scss
.footer-buttons {
width: 100%;
text-align: center;
}
.spacer {
flex-grow: 1;
width: 5%;
}
.inner {
display: inline-block;
width: 50%;
}
.content {
height: 80%;
}