src/app/shared/confirm-modal/confirm-modal.component.ts
| selector | app-confirm-modal |
| templateUrl | ./confirm-modal.component.html |
No results matching.
Methods |
Inputs |
Outputs |
| cancelText | |
Type : string
|
|
Default value : 'No'
|
|
| confirmText | |
Type : string
|
|
Default value : 'Yes'
|
|
| message | |
Type : string
|
|
Default value : ''
|
|
| open | |
Type : boolean
|
|
Default value : false
|
|
| title | |
Type : string
|
|
Default value : 'Confirm'
|
|
| result | |
Type : EventEmitter
|
|
| onCancel |
onCancel()
|
|
Returns :
void
|
| onClrModalOpenChange | ||||||
onClrModalOpenChange(value: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| onConfirm |
onConfirm()
|
|
Returns :
void
|
import { Component, EventEmitter, Input, Output } from '@angular/core'
@Component({
selector: 'app-confirm-modal',
templateUrl: './confirm-modal.component.html',
standalone: false
})
export class ConfirmModalComponent {
@Input() open = false
@Input() title = 'Confirm'
@Input() message = ''
@Input() confirmText = 'Yes'
@Input() cancelText = 'No'
@Output() result = new EventEmitter<boolean>()
onConfirm() {
this.result.emit(true)
}
onCancel() {
this.result.emit(false)
}
onClrModalOpenChange(value: boolean) {
// Close triggered by X / outside / Esc — treat as cancel. Only emit
// when modal was actually open (avoid double-emit when parent closes
// us via [open]=false in response to the Yes/No button).
if (!value && this.open) this.result.emit(false)
}
}
<clr-modal
[clrModalOpen]="open"
(clrModalOpenChange)="onClrModalOpenChange($event)"
[clrModalSize]="'md'"
>
<h3 class="modal-title">{{ title }}</h3>
<div class="modal-body">
<div>{{ message }}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="onCancel()">
{{ cancelText }}
</button>
<button type="button" class="btn btn-primary" (click)="onConfirm()">
{{ confirmText }}
</button>
</div>
</clr-modal>