Search code examples
angularangular-directiveng-bootstrap

customizing ngbAccordion

I am using NgbAccordion in one of my project and need to customise it text color property, but unable to do so. I have written the css but it is not affecting the accordion in any way. You can see my code here

Also I came across this where users have mentioned that it is not possible to customise ngbAccordion, still I would like to know if anyone has figured this out. In case not, what other approach I can use, instead of bootstrap accordion, due to some project specific reasons am not allowed to use jquery and popper js in the project, that's why.

Solution

  • In the github issue link, which I have mentioned above, in the same thread I found this solution and it worked. Used the following css:

    ::ng-deep .card {
  margin-bottom: 20px;
}

::ng-deep .card .card-header.active > a > span {
  color: #1d2124;
}

    Have updated the stackblitz code also