Page 1 of 1

Styling Accordion headers

Posted: 29 Oct 2019, 19:40
by burghi
Hello!

i'm trying to style an accordion so each tab has an unique color, that comes within a JSON;

Code: Select all

<p-accordion [multiple]="false">
        <ng-container *ngFor="let item of arvoreCat; let idx1 = index">
            <p-accordionTab [ngStyle]="{'background-color' : item.color, 'color': item.fontColor}"> <!--case #1-->
                <p-header [ngStyle]="{'background-color' : item.color, 'color': item.fontColor}"> <!--case #2-->
                    {{item.name}}
                </p-header>
                <ng-container *ngTemplateOutlet="itemPrincipal; context:{$implicit:item.children, idx1:idx1}">
                </ng-container>
            </p-accordionTab>
        </ng-container>
    </p-accordion>
if i use the ngStyle on the p-accordionTab element (case#1), it doesn't change colors at all, since the actual color is on the a element inside of it.
if i use it on the p-header (case#2) only the p-header element (that is inside the a element) is styled

can anyone shed some light on what can i do to solve this?