title: Collapse doesn't work in a Modal
body: <p>I am trying to use the most basic collapse function inside a Modal but the collapse won't trigger</p>
  <p>Literally just copied <a href="http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible&amp;stacked=h" rel="nofollow noreferrer">this w3schools collapse example</a> into my Modal.</p>
  <p>This is my Modal code:</p>
  <pre><code>&lt;template #content let-c=&quot;close&quot; let-d=&quot;dismiss&quot; ngbModalContainer&gt;
    &lt;div class=&quot;modal-header&quot;&gt;
      &lt;h4 class=&quot;modal-title&quot;&gt;Collapse&lt;/h4&gt;
    &lt;/div&gt;
    &lt;form&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#demo&quot;&gt;Simple collapsible&lt;/button&gt;
        &lt;div id=&quot;demo&quot; class=&quot;collapse&quot;&gt;
              This is the collapsible text!
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; (click)=&quot;c('Close click')&quot;&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;button class=&quot;btn btn-success&quot; (click)=&quot;open(content)&quot;&gt;Open Modal&lt;/button&gt;
  </code></pre>
  <p>My BasicModalComponent:</p>
  <pre><code>@Component({
    selector: 'basic-modal',
    templateUrl: './BasicModal.html'
  })
  export class BasicModalComponent {
    closeResult: string;
  
    constructor(private modalService: NgbModal) {}
  
    open(content) {
      this.modalService.open(content).result.then((result) =&gt; {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) =&gt; {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
    }
  
    private getDismissReason(reason: any): string {
      if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
      } else {
        return `with: ${reason}`;
      }
    }
  }
  </code></pre>
  <p>my AppComponent:</p>
  <pre><code>@Component({
      selector: 'my-app',
      template: '&lt;basic-modal&gt;&lt;/basic-modal&gt;'
  })
  export class AppComponent { }
  </code></pre>
  <p>My AppModule:</p>
  <pre><code>@NgModule({
      imports: [NgbModule, FormsModule],
      declarations: [AppComponent, BasicModalComponent],
      bootstrap: [AppComponent],
  })
  export class AppModule {
  }
  </code></pre>
  <p>I tried debugging the behavior of collapse in the DOM, seems like when you collapse a <code>&lt;div&gt;</code> it adds it some classes and few attributes, and when collapsing it back it changes them as well.</p>
  <p>When I debugged it within the Modal, triggering the collapse button does not manipulate the DOM, the class of the <code>&lt;div&gt;</code> and its' attributes remained the same.</p>
  <p>Any ideas?</p>