Angular 4 Kendo ui Dialog box

How To CREATE Dialog Box in Angular 4 Project?

Step 1 -Download and install the package

npm install --save @progress/kendo-angular-dialog @progress/kendo-angular-l10n @angular/animations

Step 2 - Once installed, import the DialogModule in your application root module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap:    [AppComponent],
   declarations: [AppComponent],
   imports:      [BrowserModule, BrowserAnimationsModule, DialogModule]
})
export class AppModule {
}

Example -

@Component({
    selector: 'my-app',
    template: `
      <kendo-dialog>
        <kendo-dialog-titlebar>
          <div style="font-size: 18px; line-height: 1.3em;">
            <span class="k-icon k-i-warning"></span> Are you sure you want to delete?
          </div>
        </kendo-dialog-titlebar>
        <p style="margin: 30px; text-align: center;">After deleted, you can't recover.</p>

        <kendo-dialog-actions>
          <button kendoButton (click)="onDialogClose()">Cancel</button>
          <button kendoButton (click)="onDeleteData()" primary="true">Delete</button>
        </kendo-dialog-actions>
      </kendo-dialog>
    `
})
class AppComponent {
    public onDialogClose() {
        alert("No records deleted.");
    }

    public onDeleteData() {
        alert("Records deleted.");
    }
}

Result -

I hope you are enjoying with this post! Please share with you friends. Thank you so much!