CODEWITHSUNDEEP
angularaccordionng-bootstrap
vivekkurien
vivekkurien

Reputation: 1594

ng-bootstrap accordion panel color change

I am using ng-bootstrap accordion. I need to show the header of panels in ngb-accordion if it have error. Since I am having form inside ngb-accordion.

I have a form and I used ngb-accordion to split my form in to 2 parts. Suppose first panel (ngb-panel) contains contact details and second panel contains educational details.

If fields under first panel have error its header color need to change to red. Since the DOM elements for header are created when showing the UI. I am not able to change the color dynamically.

<form>
    <ngb-accordion #acc="ngbAccordion" [closeOthers]="true">
                <ngb-panel title="First Panel" [id]="firstPanel" [ngclass]="haveErrror: firstPanelHaveError">
                    <ng-template ngbPanelContent>
                    ............Contact Details..................
                    </ng-template>
                </ngb-panel>
                <ngb-panel title="Second Panel" [id]="secondPanel" [ngclass]="haveErrror: secondPanelHaveError">
                    <ng-template ngbPanelContent>
                    ..............Educational Details................
                    </ng-template>
                </ngb-panel>
    </ngb-accordion>
</form>

Rendered content

<form>
   <div class="card">
       <div role="tab" id="[object Object]-header" class="card-header active">
         <a href="" aria-expanded="true" aria-controls="[object Object]" aria-disabled="false">First Panel</a>
       </div>

        ....................... 
        --Other Contents---
        ........................
        ............................ 
  </div>

Can anyone help me in this?

Upvotes: 2

Views: 4593

Answers (1)

Enrique Rubio Sanchez
Enrique Rubio Sanchez

Reputation: 129

you can access to ngb-accordion style through deep.

For example, you can add this in your CSS file to change the title

/deep/ ngb-accordion{

  .btn-link{
    margin-bottom: 0;
    color: #656565;
    font-size: 1.2rem;
    font-weight: normal;
    background-color: transparent;
    text-decoration: none!important;

  }

 .btn-link:hover{
     color: #df5329;
     font-weight: bold;
    text-decoration: none!important;
  }
}

Upvotes: 1

Related Questions