Closing a modal in the type script - Angular 4

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

<div class="modal fade" #encasUnPwModal id="encasUnPwModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" style="width: 400px;">   

		 <!-- 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>
 </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 = ‘’; }

}

[dhaval-phemesoft]

-> component.html file <a id=“linkid” (click)=“openmodel(.id)” data-toggle=“modal” data-target=“#myModalcostcase”>Open model /* Open model link */

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

[harshadp37]

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;