title: angular 6 modal popup with dynamic content
body: <p>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. </p>
  
  <p>I don't know how to load the content by Id inside the popup in my code.  </p>
  
  <p>I have 2 components. Userlist and user details. </p>
  
  <pre><code>&lt;li&gt;&lt;a href="javascript:void()" data-toggle="modal" data-target="#personal-details"&gt;user 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="javascript:void()" data-toggle="modal" data-target="#personal-details"&gt;user 2&lt;/a&gt;&lt;/li&gt;...
  
   &lt;!-- POPUP PERSONAL DETAILS START HERE --&gt;
  &lt;div class="modal fade" id="personal-details" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;        
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;           
          &lt;div class="modal-body"&gt;             
              &lt;app-userdetails&gt;&lt;/app-userdetails&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;!-- POPUP PERSONAL DETAILS END HERE --&gt;
  </code></pre>
  
  <p>The selector <code>&lt;app-userdetails&gt;&lt;/app-userdetails&gt;</code> fetched from another component(user details component). </p>
  
  <p>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. </p>
  
  <p>Please help me to fix this</p>