To open bootstrap 4 modal by calling method in typescript

Question

I am using bootstrap 4 modal in my angular app(v6):

CODE:


  

  
  
    
      

        
        
          Modal Heading
          
        

        
        
          Modal body..

Now i will open the modal by clicking open button. This works fine.But instead of opening it manually, On clicking open button i need call method/function for ex:

open() {
     if('Some condition'){
       // Don't open the modal
     } else {
        // Open the modal
     }

   }

In the open() method if condition fails modal should open, else should not.How can i achieve this using only typescript

Stackblitz Demo

user_8175467 · Answer

You need to use @ViewChild directive to achieve this. Just add below code :


  
    
      ...... further code

in your component.ts file :

export class AppComponent implements OnInit {

     @ViewChild('content') content: any;
     public  ngOnInit() {
  }

   public open() {
     if(!true){
       // Dont open the modal
     } else {
        // Open the modal
        this.content.open();
     }

   }

Updated stackblitz : https://stackblitz.com/edit/angular-ckggpk

user_7189035 · Answer

You can also show do this using *ngIf to modal dialog with some boolean value.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  showModalBox: boolean = false;

     public  ngOnInit() {
  }

   public open() {
     if(0){
       // Dont open the modal
       this.showModalBox = false;
     } else {
        // Open the modal
        this.showModalBox = true;
     }

   }
}


  

  
  
    
      
      
        
        
          Modal Heading
          
        
        
        
        
          Modal body..

Stackblitz : https://stackblitz.com/edit/angular-2ngwu1

user_5366038 · Answer

Using ng bootstrap you can do . bootstrap modal demo https://stackblitz.com/edit/angular-j2e63j?file=app%2Fmodal-basic.ts

more information refer this https://ng-bootstrap.github.io

To open bootstrap 4 modal by calling method in typescript

3 Answers