Angular 7/8/9 | Draggable Bootstrap Modals in 2 Steps! Tutorial by Example

Using modals in application really helps by adding a new layer of space on-page to add more information to users. They are the very common and most preferred way of displaying data.

Bootstrap modals in an Angular project are super easy to add and use anywhere in the project. But modals opens on some underlying data that a user can miss when modal is open. It can be closed easily but what if there is some hard filled data?

In this tutorial, we will add an extra amazing feature of dragging the Bootstrap modal using a handle using which a user can drag the modal a bit to see underlying info then simply release the icon to revert its original position.

Sounds great? let’s do it in just 2 steps 🙂

Adding Ng-bootstrap in Angular Project

First, to use bootstrap modals, let’s quicky install bootstrap to Angular project:

Run following NPM command in terminal:

Now open the app.module.ts file then add in imports array as shown below:

Next, add Bootstrap.css in Project. The best method is to include it in index.html file’s head section:

Add Bootstrap Modal

Here we have created a new component DraggablemodalComponent which will show up in modal for demo.

Run the following command to create using ng cli’s generate command:

Now replace the contents of draggablemodal.component.html file with following code:

Open Modal

In app.component.ts file add openModal method which will be called from template:

Here we also need to import the NgbModal class to call its open method where we passed the modal component.

Make Bootstrap Modal Draggable

Now we have working Angular Bootstrap Modal, let’s add Drag functionality:

Step 1) We will use the jQuery UI Draggable method, so include jQuery and jQuery UI libraries in index.html as shown below:

Step 2) Now open component of Modal which is DraggablemodalComponent in our case then call the draggable method in ngOnInit hook:

That’s it now when you will open modal, it can be dragged on screen after releasing mouse it will go back to the original position as we have set the revert property to true.

Leave a Reply

Notify of