title: BootStrap Modal issue in angular 6
body: <p>I have created a custom component in my project. The html of that component has Bootstrap modal in which i am displaying some text which gets passed as input to this component from app module (attribute name is testInput) . The type script of this component has the attribute name marked with @Input annotation.</p>
  
  <p>In app component html file, I have two instances of this custom component and value passed as input is different. When i run this project, the displayed value in html (outside of the modal) of the custom component comes different for two instances. However the same attribute which is displayed inside the modal window is same for both instances of custom component when button is clicked. Please help to resolve the issue.</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;app-tesmodal [testInput] ="'anish'"&gt;&lt;/app-tesmodal&gt;
  &lt;app-tesmodal [testInput] ="'anuj'"&gt;&lt;/app-tesmodal&gt;
  </code></pre>
  
  <p>test-modal.component.ts</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  @Component({
    selector: 'app-tesmodal',
    templateUrl: './tesmodal.component.html',
    styleUrls: ['./tesmodal.component.css']
  })
  export class TesmodalComponent implements OnInit {
  
    @Input() testInput: string;
    constructor() { }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>Code for test-modal.component.html</p>
  
  <pre><code> {‌{testInput}}
  &lt;div class="container"&gt;
      &lt;h2&gt;Modal Example&lt;/h2&gt;
      &lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;
      &lt;div class="modal" id="myModal" role="dialog"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;h4 class="modal-title"&gt;{‌{testInput}}&lt;/h4&gt;
  
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Modal Header &lt;/h4&gt;
              &lt;h4 class="modal-title"&gt;{‌{test}}&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;p&gt;Some text in the modal.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
      &lt;/div&gt;    
    &lt;/div&gt;  
  </code></pre>
  
  <p>I am expecting the modal content to be different for two different instances of component</p>