0

I am trying to style the ngb-accordion built with ng-bootstrap. 

home.component.html :
<ngb-accordion #acc="ngbAccordion" [activeIds]="activeIds" >
    <ngb-panel *ngFor="let tab of tabs; let i= index" title="Tab{{i+1}}" id="tab-{{i+1}}">
      <ng-template ngbPanelContent>
         Tab
      </ng-template>
    </ngb-panel>
</ngb-accordion>


home.component.scss :
ngb-panel {
    width: 300px;
    color: red;
    background-color: orange;
}

I put that on the scss and nothing happens. I also installed bootstrap and added it in styles.scss

@import "../node_modules/bootstrap/scss/bootstrap.scss";

How can I style a ng-boostrap widget?

EPaz
  • 85
  • 1
  • 2
  • 13
  • Are you trying to style only the accordion header? Or the entire accordion? – wentjun Apr 04 '19 at 06:40
  • if you go to developer tools, i am guessing that SCSS was 404 (not found)... include the bootstrap.css: `` inside your `index.html` and you'll be on your way – Akber Iqbal Apr 06 '19 at 05:48
  • try this post: https://stackoverflow.com/questions/49787224/how-to-override-ng2-boostrap-accordion-default-style-with-custom-css-style-in-an/53662244#53662244 – Ragmar May 07 '19 at 12:21

0 Answers0