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!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2