CODEWITHSUNDEEP
cssangularaccordionprimeng
Fseee
Fseee

Reputation: 2631

PrimeNG Accordion: Programmatically change header and content styles

I've the following accordion group:

<p-accordion multiple=true>
    <p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab.myClass}}" header="{{tab.header}}"
        [selected]="false">
        {{tab.description}}
    </p-accordionTab>
</p-accordion>

It's usually populated dinamically by tabs size. The goal is to have different background and other styles, depending of tab content. So I have that myClass style variable which could change at each accordion tab creation. E.g. assuming to use myClass = 'myClass':

:host ::ng-deep .myClass.p-accordion {
    .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
        background: red;
    }
}

Anyway I was not able to create a css rule to achieve this goal. Can anyone assist? Many thanks in advance

Upvotes: 2

Views: 8568

Answers (2)

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

In order to create a different style for each tab you need to make it dependent on the tab. Right now you set the same style for each. One approach would be to create a pipe which provides the class name.

<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab | getTabClass}}" header="{{tab.header}}"

Upvotes: 1

Fseee
Fseee

Reputation: 2631

Solution was using a wrapper div of each accordion tab:

<p-accordion multiple=true>
    <div *ngFor="let tab of tabs" class="{{tab.customClass}}">
        <p-accordionTab header="{{tab.header}}"
            [selected]="false">
            {{tab.description}}
        </p-accordionTab>
    </div>
</p-accordion>

where :

.customClass * {
    background: red !important;
    //other properties
}

Upvotes: 3

Related Questions