File

src/lib/kiewit-confirmation/kiewit-confirmation.component.ts

Metadata

selector kiewit-confirmation
styleUrls kiewit-confirmation.component.css
templateUrl ./kiewit-confirmation.component.html

Index

Methods
Inputs
Outputs

Inputs

config

Type: any

Outputs

kcsClose $event type: EventEmitter
kcsNo $event type: EventEmitter
kcsYes $event type: EventEmitter

Methods

Private closeClicked
closeClicked()
Returns : void
Private noClicked
noClicked()
Returns : void
Private yesClicked
yesClicked()
Returns : void
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">&nbsp;</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">&nbsp;</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
Component
Html element with directive

results matching ""

    No results matching ""