Collapse doesn't work in a Modal
<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>