File
Metadata
selector |
kiewit-confirmation |
styleUrls |
kiewit-confirmation.component.css |
templateUrl |
./kiewit-confirmation.component.html |
Methods
Private closeClicked
|
closeClicked()
|
|
|
Private noClicked
|
noClicked()
|
|
|
Private yesClicked
|
yesClicked()
|
|
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'kiewit-confirmation',
templateUrl: './kiewit-confirmation.component.html',
styleUrls: ['./kiewit-confirmation.component.css']
})
export class KiewitConfirmationComponent {
@Input() config: any = {
isOpened: true,
title: "Are you sure want to delete?",
yesCaption: "Yes",
noCaption: "No"
};
@Output() kcsClose = new EventEmitter();
@Output() kcsYes = new EventEmitter();
@Output() kcsNo = new EventEmitter();
private closeClicked() {
this.config.isOpened = false;
this.kcsClose.emit();
}
private yesClicked() {
this.config.isOpened = false;
this.kcsYes.emit();
}
private noClicked() {
this.config.isOpened = false;
this.kcsNo.emit();
}
}
<div class="example-wrapper">
<kendo-dialog *ngIf="config.isOpened" (close)="close('cancel')">
<div class="popup-main dialog-size">
<div class="divclose" (click)="closeClicked()">
<span class="icon icon-close"></span>
</div>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">
<i class="icon-warning dialog-icon pull-left"></i>
<span class="dialog-info pull-left" [innerHtml]="config.title"></span>
</div>
</div>
<div class="div-table-row-seperator"> </div>
<div class="div-table-row">
<div class="div-table-col">
<div class="bottom-right-30">
<div class="kcs-button primary pull-right"(click)="noClicked()" [innerHtml]="config.noCaption">No</div>
<div style="width:20px;" class="pull-right"> </div>
<div class="kcs-button secondary pull-right"(click)="yesClicked()" [innerHtml]="config.yesCaption">Yes</div>
</div>
</div>
</div>
</div>
</div>
</kendo-dialog>
</div>
Implementation
In Type Script File
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'kiewit-confirmation',
templateUrl: './kiewit-confirmation.component.html',
styleUrls: ['./kiewit-confirmation.component.css']
})
export class KiewitConfirmationComponent {
confirmationConfig = {
//isOpened: false,
title: 'Titile goes here?',
yesCaption: 'Yes-Caption',
noCaption: 'No-Caption'
};
confirmationCloseClicked() {
alert('confirmationCloseClicked');
}
confirmationYesClicked() {
alert('confirmationYesClicked');
}
confirmationNoClicked() {
alert('confirmationNoClicked');
}
}
In HTML File
<kiewit-confirmation [config]="confirmationConfig"
(kcsClose)="confirmationCloseClicked()"
(kcsYes)="confirmationYesClicked()"
(kcsNo)="confirmationNoClicked()">
</kiewit-confirmation>
Legend
Html element with directive