Using bootstrap 4 modal with Angular 5

Make sure you have jquery and bootstrap installed.
or else you can use the following commands.

npm i jquery bootstrap@4.0.0-beta.2 --save

If you are using angular-cli, then you need to include the jquery in the scripts section of .angular-cli.json file. The same goes with bootstrap files as well. My file looks somewhat similar to the following.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

Here is the HTML you would want to use to trigger the modal to show up. The fade class is removed from the modal with id = “exampleModal” when the button with the attributes data-toggle = “modal” data-target = “#exampleModal” is clicked.

HTML






  
    
      
        Modal title
        
      
      
        ...

Programmatically

If you want trigger the opening and closing of the modal programmatically, then use the following in your methods inside the component with the above HTML after installing the required.

npm install @types/jquery --save

This is the best approach if all that we want to use is the modal. We can avoid the overhead of an angular wrapper around bootstrap jQuery functions.
Now in the component in which you are using jQuery import it as the following.

import * as $ from 'jquery';

// opening
$('#modalTrigger').click();

// closing
 $('#postJobModalClose').click();

HTML

Programmatically

Related