Ngx-bootstrap: Closing a modal in the type script - Angular 4

Created on 11 Aug 2017 · 15Comments · Source: valor-software/ngx-bootstrap

Is there a way that a currently opened modal can be closed inside the type script in Angular 4?

I have a submit button, the submit button has a (click) function, the function inside the type script has an if and else statement inside.
I want to perform the closing of a modal inside the else statement. Is it possible?

I am just newbie in Angular, I tried using .hide and .close method, but it doesn't work. Thanks!

Below is my code:

HTML: encaslogin.component.html

         <!-- Modal content -->
  <div class="modal-content wrapper">

        <img src="../assets/images/logo_login.png" style="margin-top: 30px;">

        <div class="input-group" style="margin-top: 10px; margin-left: 50px; margin-right: 50px;">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input type="text" id="username" class="form-control" #username name="username" placeholder="User" maxlength="50" required>
        </div>

        <div class="input-group" style="margin-top: 10px; margin-left: 50px; margin-right: 50px; margin-bottom: 20px;">
            <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span>
            <input type="password" id="password"  class="form-control" #password name="password" placeholder="Password" maxlength="50" required>
        </div>

        <div #encasReturn1 class="text-danger"><strong>{{encasReturn}}</strong></div><br>

        <div #encasUsernameReturnDiv>{{encasUsernameReturn}}</div>

        <button type="button" (click)="loadEncasResponse(username.value, password.value);
        username.value=''; password.value=''" class="btn btn-primary btn-md"
            style="margin-bottom: 30px; width: 90px; margin-right: 20px;">OK
        </button>

        <button data-dismiss="modal" type="button" class="btn btn-default btn-md"  
            (click)="clearFields(); username.value='';password.value=''"
            style="margin-bottom: 30px; width: 90px;">Cancel
        </button>

    </div>

 </div>

Type Script: encaslogin.components.ts

import { encasAuthUrl, Constants } from './../../core/constants';

import { Component, OnInit, Injectable, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Location } from '@angular/common';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { HomeComponent } from '../../home/home.component';

@Component({
selector: 'app-encaslogin',
templateUrl: './encaslogin.component.html'
// styleUrls: ['./home.component.css']
})

export class EncasLoginComponent {
encasAuthUrl = encasAuthUrl;
profile = {response: '', message: ''};
encasUsernameReturn = '';
encasReturn = '';

constructor(
private location: Location,
private homeComponent: HomeComponent,
private http: Http
) {}

loadEncasResponse(username, password, encasUnPwModal) {
if (username === '' || password === '') {
this.encasReturn = 'Username and Password are required fields.';
this.encasUsernameReturn = '';
} else if (username.trim() === '' || password.trim() === '') {
this.encasReturn = 'Whitespace(s) are not allowed as input.';
this.encasUsernameReturn = '';
} else {
this.http.get(encasAuthUrl + username + / + password)
.map((response: Response) => response.json())
.subscribe(data => {this.profile = data;
if (this.profile.response === 'success') {
this.encasUsernameReturn = this.profile.message;
this.encasReturn = '';
// I WANT TO PUT THE CLOSING OF THE MODAL HERE.
} else {
this.encasUsernameReturn = '';
this.encasReturn = this.profile.message
}
});
}
}

clearFields() {
this.encasReturn = '';
this.encasUsernameReturn = '';
}

}

Source

klacaba

Most helpful comment

-> component.html file
Open model /* Open model link */

-> component.ts File
document.getElementById('linkid').click(); // wher u want to close your model
Best of luck..

dhaval-phemesoft on 28 Mar 2018

👍4 🎉2

All 15 comments

First of all, get access to a modal.
@ViewChild('encasUnPwModal') public modal: ModalDirective;
then, put this.modal.hide() instead of // I WANT TO PUT THE CLOSING OF THE MODAL HERE.
This should work.

IlyaSurmay on 11 Aug 2017

Upon adding this to my code:
@ViewChild('encasUnPwModal') public modal: ModalDirective;

public modal: ModalDirective; is having red lines.

Do I need to include more imports above?

Here is the error logs:

ERROR in D:/APSKED/APSKED_WEBAPP_08032017/src/app/home/encaslogin/encaslogin.component.ts (18,36): Declaration expected.

ERROR in D:/APSKED/APSKED_WEBAPP_08032017/src/app/home/encaslogin/encaslogin.component.ts (18,37): Unused label.

ERROR in D:/APSKED/APSKED_WEBAPP_08032017/src/app/home/encaslogin/encaslogin.component.ts (18,44): Cannot find name 'ModalDirect
ive'.

klacaba on 11 Aug 2017

import { ModalDirective } from 'ngx-bootstrap/modal';
or import { ModalDirective } from 'ngx-bootstrap'; if you're using SystemJS

IlyaSurmay on 11 Aug 2017

I tried putting the import.

The error "Cannot find name ModalDirect" is already resolved, but the remaining 2 error still occurs.

ERROR in D:/APSKED/APSKED_WEBAPP_08032017/src/app/home/encaslogin/encaslogin.component.ts (18,36): Declaration expected.

ERROR in D:/APSKED/APSKED_WEBAPP_08032017/src/app/home/encaslogin/encaslogin.component.ts (18,37): Unused label.

klacaba on 12 Aug 2017

I already resolved the 2 issues above, but upon testing it, the modal doesn't close.

klacaba on 12 Aug 2017

There is no error when compiling and running, but when I view the Console log in Inspect Element on the browser. Here is the error:

ERROR TypeError: _this.modal.hide is not a function
Stack trace:
../../../../../src/app/home/encaslogin/encaslogin.component.ts/EncasLoginComponent.prototype.loadEncasResponse/<@http://192.168.88.102:4200/main.bundle.js:1131:21

klacaba on 12 Aug 2017

I already find a way to close the modal inside the type script, but through jQuery:

jQuery('#encasUnPwModal').modal('hide');

klacaba on 12 Aug 2017

👍1

Thank you so much @IlyaSurmay this is worked for me.

iamaniruddha on 13 Dec 2017

Cant make it work. i get:
ERROR TypeError: Cannot read property 'hide' of undefined when i tryr to close my modal

simbajr on 23 Jan 2018

-> component.html file
Open model /* Open model link */

-> component.ts File
document.getElementById('linkid').click(); // wher u want to close your model
Best of luck..

dhaval-phemesoft on 28 Mar 2018

👍4 🎉2

I found an even easier way to do this for ng bootstrap modals in cases where you call a function from inside the modal
<ng-template #content let-c="close" let-d="dismiss"> <button (click)="myFunction(c)"> </button> </ng-template>

TypeScript code for the component
myFunction(callback) { callback(); }
This solution worked for me and is very simple

WissCoast on 30 Jul 2018

step1 import angular-custom-modal
import{ModalComponent}from 'angular-custom-modal'

step 2 create Public method
export class DemoComponent implements OnInit {
@ViewChild('ModelId') public modal: ModalComponent;
}

Step 3 Use Like This
this.modal.close();

HardikDeveloper on 7 Aug 2018

🎉1 👍1

I already find a way to close the modal inside the type script, but through jQuery:

jQuery('#encasUnPwModal').modal('hide');

I'm getting jQuery is undefined

ojewaletope on 4 Oct 2018

I already find a way to close the modal inside the type script, but through jQuery:
jQuery('#encasUnPwModal').modal('hide');

I'm getting jQuery is undefined

put this after import & before @Component :
declare var jQuery:any;