/ Dialog / How To / Open a Dialog on condition
Search results

Open a Dialog on condition in Angular Dialog component

21 Dec 2022 / 3 minutes to read

You can prevent opening of the dialog by setting the beforeOpen event argument cancel value to true. In the following sample, the success dialog is opened when you enter the username value with minimum 4 characters. Otherwise, it will not be opened.

Copied to clipboard
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    template: `
    <div class="login-form">
          <div class="wrap">
            <div id="heading">Sign in</div>
              <div class="e-float-input e-input-group">
                <input id="textvalue" type="text" required (focus)="focusIn($event.target)" (blur)="focusOut($event.target)"/>
                <span class="e-float-line"></span>
                <label class="e-float-text">Username</label>
              </div>
              <div class="e-float-input e-input-group">
                <input id="textvalue2" type="password" required (focus)="focusIn($event.target)" (blur)="focusOut($event.target)"/>
                <span class="e-float-line"></span>
                <label class="e-float-text">Password</label>
              </div>
              <div class="button-contain">
                <button class="e-control e-btn e-info" id="targetButton" (click)="onOpenDialog($event)">Log in</button>
              </div>
          </div>
        </div>
    <div #container class='root-container'>
      <ejs-dialog id='dialog' #ejDialog isModal='true' content='Congratulations! Login Success' [visible]='visible' header='Success' (beforeOpen)="validation($event)"[buttons]='buttons' [target]='targetElement' width='280px'>
      </ejs-dialog>
    </div> `
})

export class AppComponent {
    @ViewChild('ejDialog') ejDialog: DialogComponent;
   // The Dialog shows within the target element.
    @ViewChild('container', { read: ElementRef }) container: ElementRef;
    // The Dialog shows within the target element.
    public targetElement: HTMLElement;

    //To get all element of the dialog component after component get initialized.
    ngOnInit() {
      this.initilaizeTarget();
    }

    public focusIn(target: HTMLElement): void {
        let parent: HTMLElement = target.parentElement;
        if (parent.classList.contains('e-input-in-wrap') {
            parent.parentElement.classList.add('e-input-focus');
        } else {
            parent.classList.add('e-input-focus');
        }
    }

    public focusOut(target: HTMLElement): void {
        let parent: HTMLElement = target.parentElement;
        if (parent.classList.contains('e-input-in-wrap') {
            parent.parentElement.classList.remove('e-input-focus');
        } else {
            parent.classList.remove('e-input-focus');
        }
    }
    public visible: Boolean = false;
    // Hide the Dialog when click the footer button.
    public hideDialog: EmitType<object> = () => {
        this.ejDialog.hide();
    }
    // Enables the footer buttons
    public buttons: Object = [
        {
            'click': this.hideDialog.bind(this),
            // Accessing button component properties by buttonModel property
              buttonModel:{
              content:'Dismiss',
              //Enables the primary button
              isPrimary: true
            }
        }
    ];

    // Initialize the Dialog component target element.
    public initilaizeTarget: EmitType<object> = () => {
      this.targetElement = this.container.nativeElement.parentElement;
    }
    public validation (event: any): void {
        let text = document.getElementById('textvalue');
        let text1 = document.getElementById('textvalue2');
        if (text.value === "" && text1.value === "") {
            event.cancel= true;
            alert("Enter the username and password")
        } else if (text.value === "") {
            event.cancel= true;
            alert("Enter the username")
        } else if (text1.value === "") {
            event.cancel= true;
            alert("Enter the password")
        } else if (text.value.length < 4) {
            event.cancel= true;
            alert("Username must be minimum 4 characters")
        } else {
            event.cancel= false;
            document.getElementById("textvalue").value = "";
            document.getElementById("textvalue2").value = "";
        }
    }
    // Sample level code to handle the button click action
    public onOpenDialog = function(event: any): void {
        // Call the show method to open the Dialog
        this.ejDialog.show();
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
		DialogModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
    <title>EJ2 Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <app-root id="dialog-container">
        <div id='loader'>LOADING....</div>
    </app-root>
</body>

</html>
Copied to clipboard
html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 30px;
  width: 340px;
  background: #f7f7f7;
}
.wrap .e-float-input { /* csslint allow: adjoining-classes */
  margin: 17px 0;
}
.wrap #input-container .e-control e-btn { /* csslint allow: adjoining-classes */
    margin: 3% 26%;
}

.text-center {
    text-align: center;
}

#content {
    margin-top: 12px;
}

.button-contain {
    padding: 20px 0 0;
    width: 100%;
}

.button-contain .e-btn { /* csslint allow: adjoining-classes */
    width: 100%;
    height: 36px;
}

#heading {
    color: #333;
    font-weight: bold;
    margin: 0 0 15px;
    text-align: center;
    font-size: 20px;
}

.login-form {
    width: 340px;
    margin: 50px auto;
}

#dialog.e-dialog .e-footer-content {
    text-align: center;
}