Load Dynamic Components Inside a Modal Dialog in Angular 2

Load Dynamic Components Inside a Modal Dialog in Angular 2

Using modal windows from the NGX bootstrap library can be very convenient and easy to use. However, in a large application in which we may use it multiple times, a Modal window can make us write a lot of duplicated code.

Using modal windows from the NGX bootstrap library can be very convenient and easy to use. However, in a large application in which we may use it multiple times, a Modal window can make us write a lot of duplicated code.

The problem

Let’s think about this example:

Each Modal window needs a Close Button at the top and a Submit Button at the bottom. We don’t want to write these markup for every component in which we use the Modal Window. We want to be able to reuse these elements and the methods they might trigger for all our use cases.

Getting started:

For this solution use the modal window library from:

https://valor-software.com/ngx-bootstrap

Install Modal from NGX bootstrap

ng add ngx-bootstrap  --component modals

According to the documentation, you can open a template reference inside de Modal or a Component inside like this example:

demo.component.ts

@Component({
    selector: 'app-demo',
    template: `<div onClick="openModalWithComponent()">Open modal </div>`,
})
export class DemoComponent {
    bsModalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    openModalWithComponent() {
        this.bsModalRef =        this.modalService.show(ModalContentComponent);
    }
    close() { 
      this.bsModalRef.hide();
    }
    submit() {
      console.log('submit');
    }
}

bootstrap-modal dynamic-components ngx-bootstrap angular2 typescript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Laravel Bootstrap Modal Form Validation Tutorial

Laravel Bootstrap Modal Form Validation Tutorial. We will use jQuery, Laravel 5.6, Bootstrap to build this small application. Laravel 5.6 tutorial is very easy and you can run it on mac as well as windows.

Dynamically Generating React-Bootstrap Components

Imagine you're working on creating a new React-Bootstrap page and realize you need to use a component that's slightly different from an existing component. There are a few different ways this could be done.

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

How to load content dynamically from database into Bootstrap modal using Django

I am working on a testing app that lists out users from the database in a HTML table, what I want to achieve is this, when you click on any icon for a particular record or row the full detail of that record is displayed in a Bootstrap Modal. My...

React Bootstrap Modal | How To Create Modal In React

React Bootstrap Modal Example Tutorial. We will create Bootstrap Modal using reactstrap in React.js. On backend we use Laravel and axios for HTTP client.