title: How to call a same component multiple times with different input and display it in same page
body: <p>I have a parent component with few scripts. I have a child component which will display details about the script . I'm passing script name as input to my child component every time. I get details from server and display it in child.html page.</p>
  <p>Here, When I click a script every time, the old script details gets replaced with the new script(clicked script) details. I don't want my old script details to go away when I click on the new one</p>
  <p>I'm new to angular. Could someone help me with this. Basically I want to load the same component multiple times for different inputs and display all together.Below is just a code example of what I'm trying to achieve..</p>
  <h1>parent.html</h1>
  <pre><code>parent.html
  
  &lt;li&gt; script1 &lt;li&gt;
  &lt;li&gt; script2 &lt;li&gt;
  &lt;input type=button (onclick)=getDetails(script)&gt;
  &lt;app-script-details 
      *ngIf=&quot;showChild&quot;
      [job]=&quot;currentScript&quot;&gt;
  &lt;/app-Script-details&gt;     
  </code></pre>
  <p>-- Calling Child component with clicked script as input</p>
  <h2>parent component.ts</h2>
  <pre><code>getDetails(script){
     this.showChild=true
     this.currentScript=script  // Clicked script
  }
  </code></pre>
  <h2>Child.html</h2>
  <pre><code>&lt;h1&gt;Script A - Details &lt;/h1&gt;
  </code></pre>
  <h2>child component.html</h2>
  <pre><code> @Input() script
  
  // Here I make a call to the server and get the details from server and display in child.html
  </code></pre>
  <p>Here, If I click Script A first, it will show Script A Details and then if I click script B, Script A details will be replaced with Script B details.</p>
  <p>I want to show both details at the same time.. Script A and while it is loading(waiting from response from server) if I click Script B,It should start loading and Both the script details should come whenever available.</p>