angular 6 modal popup with dynamic content

Question

In my project, I have a user list of around 50 users. By clicking each username, the corresponding user's info should display in the modal popup.

I don't know how to load the content by Id inside the popup in my code.

I have 2 components. Userlist and user details.

<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 1</a></li>
<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 2</a></li>...

 <!-- POPUP PERSONAL DETAILS START HERE -->
<div class="modal fade" id="personal-details" role="dialog">
    <div class="modal-dialog">        
      <!-- Modal content-->
      <div class="modal-content">           
        <div class="modal-body">             
            <app-userdetails></app-userdetails> 
        </div>
      </div>
    </div>
  </div>
<!-- POPUP PERSONAL DETAILS END HERE -->

The selector <app-userdetails></app-userdetails> fetched from another component(user details component).

This is my HTML Design structure. By this way, the modal popup displayed with the same content. Now I want to customize this section with my real-time data from DB. If so how to pass the user id to another component.

Please help me to fix this

Answer 1

I would strongly recommend looking at the [ng-bootstrap][1] library for their model. The immediate benefite to this is it removes the dependency on jQuery from your app, which can be a pain to use within Angular (in my experience)!

Using the ng-bootstrap library, you will pass in as many input parameters as you want

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.user = myUserObject;
modalRef.componentInstance.title = 'My First ng-bootstrap Model';

Bringing this all together, I would be suggest the following:

1. Create a service which communicates with the database, containing a method to get all usernames, ids etc (high level info to display the screen).
2. On your first screen call the service above to obtain the high level information needed and render for the user. (Try and work with observables and the async pipe if possible, Todd Moto has a great [tutorial][2] on this)
3. When a user clicks on an id, use the service again, but this time passing in the user's id and get back a user object which in turn can be passed to the Model and rendered however you wish :)

I hope this answers your question, let me know if not. Adam

[1]:!) https://ng-bootstrap.github.io/#/components/modal/examples

[2]:!) https://toddmotto.com/angular-ngif-async-pipe

Answer 2

 The working Modal with content .I hope this is very helpful

 Angular 6 Modal Directive Component. The custom modal directive is used for 
 adding  modals anywhere in your angular application.

https://stackblitz.com/edit/angular-iybx4hangular6-custom-popup