src/app/modules/shared/components/confirm-popup/confirm-popup.component.ts
| selector | app-confirm-popup |
| styleUrls | ./confirm-popup.component.scss |
| templateUrl | ./confirm-popup.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(resourceService: ResourceService)
|
||||||
|
Parameters :
|
| input | |
Type : InputType
|
|
| confirmation | |
Type : EventEmitter
|
|
| Private closeModal |
closeModal()
|
|
Returns :
void
|
| Public confirm | ||||||
confirm(confirm: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| modal |
Decorators :
@ViewChild('modal')
|
| Public resourceService |
Type : ResourceService
|
import { Component, Input, EventEmitter, Output, ViewChild } from '@angular/core';
import { ResourceService } from '../../services';
interface InputType {
title: string;
body: string;
event: string;
}
@Component({
selector: 'app-confirm-popup',
templateUrl: './confirm-popup.component.html',
styleUrls: ['./confirm-popup.component.scss']
})
export class ConfirmPopupComponent {
@Input() input: InputType;
@Output() confirmation = new EventEmitter<boolean>();
@ViewChild('modal') modal;
constructor(public resourceService: ResourceService) {
}
public confirm(confirm: boolean): void {
this.confirmation.emit(confirm);
this.closeModal();
}
private closeModal() {
if (this.modal) {
this.modal.deny();
}
}
}
<app-modal-wrapper [config]="{disableClose: true, size: 'small'}" (dismiss)="modal.deny()" #modal>
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible small">
<div class="sb-modal-header">
{{input?.title}}
</div>
<div class="sb-modal-content">
{{input?.body}}
</div>
<div class="sb-modal-actions">
<button (click)="confirm(true)" tabindex="0" class="sb-btn sb-btn-normal sb-btn-primary">
{{resourceService.frmelmnts?.btn?.yes}}
</button>
<button (click)="confirm(false)" tabindex="0" class="sb-btn sb-btn-normal sb-btn-outline-primary">
{{resourceService?.frmelmnts?.btn?.no}}
</button>
</div>
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
./confirm-popup.component.scss