CODEWITHSUNDEEP
angularkendo-ui-angular2
Hrish
Hrish

Reputation: 53

how do i open/close the kendo dialog?

I am trying the kendo ui for angular 2 and the close, click events seem to work on the kendo dialog. But are there methods to open and close the dialog box or do I have to use javascript for that?

Upvotes: 2

Views: 2566

Answers (1)

emp
emp

Reputation: 5065

Simple example here: http://plnkr.co/edit/Sm1T3rXkHNb04waFkkzG?p=preview

Just use a simple ngIf directive to control the open / closed state of the window.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <button (click)="dialogOpen = true">Open Dialog</button>
        <p>Status: {{ status }}</p>

        <kendo-dialog title="Action required" (close)="onDecline()" *ngIf="dialogOpen">
            <p>Do you accept?</p>

            <kendo-dialog-actions>
                <button kendoButton (click)="onAccept()">Yes</button>
                <button kendoButton (click)="onDecline()">No</button>
            </kendo-dialog-actions>
        </kendo-dialog>
    `
})
export class AppComponent {
    public status = "not open";
    dialogOpen : boolean = false;

    public onAccept() { this.status = "accepted"; this.closeDialog(); }
    public onDecline() { this.status = "declined"; this.closeDialog(); }

    private closeDialog() {
      this.dialogOpen = false;
    }
}

Upvotes: 5

Related Questions