src/app/shared/components/confirmation-modal/confirmation-modal.component.ts
| selector | cd-confirmation-modal |
| styleUrls | ./confirmation-modal.component.scss |
| templateUrl | ./confirmation-modal.component.html |
Properties |
Methods |
constructor(modalRef: BsModalRef)
|
||||||
|
Parameters :
|
| cancel |
cancel()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| stopLoadingSpinner |
stopLoadingSpinner()
|
|
Returns :
void
|
| bodyContext |
Type : object
|
| bodyData |
Type : object
|
| bodyTpl |
Type : TemplateRef<any>
|
| boundCancel |
Default value : this.cancel.bind(this)
|
| buttonText |
Type : string
|
| confirmationForm |
Type : FormGroup
|
| Public modalRef |
Type : BsModalRef
|
| onCancel |
Type : Function
|
| onSubmit |
Type : Function
|
| titleText |
Type : string
|
import { Component, OnInit, TemplateRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'cd-confirmation-modal',
templateUrl: './confirmation-modal.component.html',
styleUrls: ['./confirmation-modal.component.scss']
})
export class ConfirmationModalComponent implements OnInit {
bodyData: object;
bodyTpl: TemplateRef<any>;
buttonText: string;
onSubmit: Function;
onCancel: Function;
titleText: string;
bodyContext: object;
confirmationForm: FormGroup;
boundCancel = this.cancel.bind(this);
constructor(public modalRef: BsModalRef) {
this.confirmationForm = new FormGroup({});
}
ngOnInit() {
this.bodyContext = this.bodyContext || {};
this.bodyContext['$implicit'] = this.bodyData;
}
cancel() {
this.modalRef.hide();
if (this.onCancel) {
this.onCancel();
}
}
stopLoadingSpinner() {
this.confirmationForm.setErrors({ cdSubmitButton: true });
}
}
<cd-modal (hide)="cancel()">
<ng-container class="modal-title">{{ titleText }}</ng-container>
<ng-container class="modal-content">
<form name="confirmationForm"
class="form-horizontal"
#formDir="ngForm"
[formGroup]="confirmationForm"
novalidate>
<div class="modal-body">
<ng-container *ngTemplateOutlet="bodyTpl; context: bodyContext"></ng-container>
</div>
<div class="modal-footer">
<div class="button-group text-right">
<cd-submit-button [form]="confirmationForm"
(submitAction)="onSubmit(confirmationForm.value)">
{{ buttonText }}
</cd-submit-button>
<cd-back-button [back]="boundCancel"
name="Cancel"
i18n-name>
</cd-back-button>
</div>
</div>
</form>
</ng-container>
</cd-modal>
./confirmation-modal.component.scss