如何关闭组件文件中的 mdl 对话框

Question

Hi i am new to Angular 2. I am using angular2 mdl dialog and i want to close dialog when login is success. But i dont know how to close dialog.Can any one help me please

<mdl-dialog #loginDialog [mdl-dialog-config]="{
          clickOutsideToClose: true,
          isModal:true,
          openFrom: loginButton,
          enterTransitionDuration: 400,
          leaveTransitionDuration: 400}">
    <h3 class="mdl-dialog__title">Login</h3>
    <div class="mdl-dialog__content">
    <form name='loginForm' #loginForm="ngForm">
        <md-input-container>
            <md-icon class="inputIcon">perm_identity</md-icon>
            <input type="text" mdInput name="Email" [(ngModel)]="userEmail" placeholder="Email" #Email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
        </md-input-container>
        <div [hidden]="Email.valid || Email.pristine" class="error">
                    Email is invalid!
                </div>
        <md-input-container>
            <md-icon class="inputIcon">lock</md-icon>
            <input type="password" mdInput name="Password" [(ngModel)]="password" placeholder="Password" required>
        </md-input-container>
        <button class="btn loginBlue" [disabled]="!loginForm.form.valid" (click)="loginEmail(); false">Login</button>
        <p style="text-align: center;font-size: 14px;font-family: 'Open Sans';color: #909090;margin-top: 20px;margin-bottom: 15px;">or</p>
        <button class="loginRed" (click)="loginGoogle(); false"><img src="/images/google_icon.png" class="google">Login using google</button>
    </form>
    </div>
</mdl-dialog>

Answer 1

It seems you are using the declarative dialog form http://mseemann.io/angular2-mdl/dialogs-declarative . The sources for this demo can be found here: https://github.com/mseemann/angular2-mdl/blob/master/src/demo-app/app/dialog-declarative/dialog-declarative.component.ts

In your code you have to grab the reference ( #loginDialog ) for your loginDialog from the view template in your ts file (component file):

@ViewChild('loginDialog') loginDialog: MdlDialogComponent;

in you loginGoogle methode you can now do:

public loginDialog() {
   // do the login and if you are done:
   this.loginDialog.close();
}

Answer 2

In your parent component add the below line to constructor

constructor(public dialog: MdDialog) {}

On click of Login in modal dialog call the parent component's close method as below

<button (click)="loginDialog.close()"> Login </button>

Update :

The code to open the dialog

 openDialog() {
    let dialogRef = this.dialog.open(ParentDialog);
    dialogRef.afterClosed().subscribe(result => {
      //your action
    });
  }

The code to close the dialog

<button class="btn loginBlue" 
   (click)="dialogRef.close()">Login</button>

LIVE DEMO