angularprimengprimeflex

Get buttons on right in p-header


This should be simple. I'm using Angular/PrimeNG 14 and PrimeFlex.

I have a p-header in a p-panel. In the p-header I want text on the left and two buttons on the right. Here's the .html:

<div>
  <p-panel>
    <p-header>
        <span class="align-content-start">
            Header Text
        </span>
        <span  class="align-content-end">
              <button pButton icon="pi pi-plus" class="p-button-icon" ></button>&nbsp;
              <button pButton icon="pi pi-trash" class="p-button-danger"></button>
        </span>
    </p-header>
  </p-panel>
</div>

Here's what it looks like:

p-header

I've tried float:right, align-text:right, align-content-left, and everything I can think of with PrimeFlex but none of it had any effect at all.

What does it take to get the text on the left and the buttons on the right?

Edit:

I took some example code from PrimeFlex to see if it works:

<div>
  <p-panel>
    <p-header >
      <div class="card">
        <div class="flex justify-content-between flex-wrap card-container purple-container">
          <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-purple-500 font-bold text-white border-round m-2">1</div>
          <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-purple-500 font-bold text-white border-round m-2">2</div>
          <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-purple-500 font-bold text-white border-round m-2">3</div>
        </div>
      </div>
    </p-header>
  </p-panel>
</div>

Here's the output. The three divs should be on the left, center, and right as shown in the PrimeFlex link above. The PrimeFlex classes don't work inside of p-header. And nothing else I've tried works in a p-header either. The problem seems to be with p-header in Angular 14.

Not justified when in p-header


Solution

  • From the migration guide:

    p-header and p-footer are deprecated in favor or ng-template pTemplate="header or footer."

    The correct layout is:

    <p-panel>
      <ng-template pTemplate="header">
        Header Text
      </ng-template>
      <ng-template pTemplate="icons">
        <button pButton icon="pi pi-plus" class="p-button-icon mr-2"></button>
        <button pButton icon="pi pi-trash" class="p-button-danger"></button>
      </ng-template>
    </p-panel>
    

    StackBlitz