CODEWITHSUNDEEP
htmlcssangularprimengaccordion
Radha
Radha

Reputation: 81

Add primeng icon with color in header of an accordion

I wanted to add a circle ngprime icon which will have some color after my accordion header text.

 [![<p-accordion class="p-2  d-flex row border m-4">
        <p-accordionTab header="Product Testing"   >                 
            <div class="d-flex justify-content-between" >
                <p>Completed : <p-badge value="{{number1}}" severity="success"></p-badge>
                </p>
                <p style="float: right; clear:both;">Remaining : <p-badge value="{{number2}}" severity="danger">
                    </p-badge>
                </p>
                <em class="pi pi-trash" (click)="deleteCard($event)"></em>
            </div>
            
         
        </p-accordionTab>
    </p-accordion>][1]][1]

I want to display a circle icon (pi-pi-circle) after product testing text and show a number there which will have different colors depending on condition. Please suggest

Upvotes: 1

Views: 2786

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3160

use ng-template pTemplate="header" to add custom header content, and ngStyle to set custom colours using a variable, set the value of the variable (iconColor) based on condition

<p-accordionTab header="Header I" [selected]="true">
    <ng-template pTemplate="header">
        <i class="header-icon pi pi-circle" [ngStyle]="{ color: iconColor }">
          <span>1</span>
        </i>
    </ng-template>
...
</p-accordionTab>

in the main styles.css add the below styles

.pi.header-icon {
  display: flex;
  margin-left: 8px;
  justify-content: center;
  align-items: center;
}
.pi.header-icon span {
  position: absolute;
  font-size: 0.8em;
}

Upvotes: 3

Related Questions