Styling Accordion headers

UI Components for Angular
Post Reply
burghi
Posts: 1
Joined: 13 Nov 2017, 00:08

29 Oct 2019, 19:40

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?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest