ng-bootstrap collapse is not working in angular10?

user_8152794 0
Viewed 440

In my angular10 app i am implementing ng-bootstrap collapse.

component.html

<div class="op-bg-dark-blue op-font-12 darkblue-block-padding" (click)="collapse.toggle()"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
   <span class="mb-0 op-text-white font-bold">Total Bid Rate</span>
   <span class="mb-0 float-right op-text-white font-bold">105,328 <i class="fa fa-angle-right ml-1"> 
    </i></span>
</div>

<div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed">

</div>

component.ts

isCollapsed = false;

but the problem is that when i click on my div to open callapse so it is giving an error

_r0.toggle is not a function

How can i fix this?

ng-bootstrap angular
1 Answers

Hello @FahadSubzwari I have tried ng-bootstrap collapse example from ng-bootstrap.github.io in stackblitz. However, I did not found any error as you demonstrated in the question. But I found that button was not doing anything unless I changed my index.html into code below=>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css" />
</head>

<body>
  <div class="container-fluid">
    <my-app>loading</my-app>
  </div>
</body>
</html>

These 2 stylesheet inside head is necessary for collapse.
So, You can check my stackblitz demo link => Demo of ng-bootstrap in Stackblitz.

user_104151770
Related