How to hide p-dropdown in p-table header under a particular condition?

Question

I have these codes.

   <p-tabPanel>
      <a *ngIf="customer.length; else NoCustomer">
        <p-table
          #Customer
          [value]="customer"
          [scrollable]="true"
          [(selection)]="selectedCustomer"
        >
          <ng-template pTemplate="header" let-newCustomer>
            <tr>
              <th>
                <p-tableHeaderCheckbox
                ></p-tableHeaderCheckbox>
                Select All
              </th>
              <th>Name</th>
              <th>Age</th>
              <th>
                <p-dropdown
                  [options]="phoneNumber"
                  optionLabel="PhoneNumber"
                ></p-dropdown>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-newCustomer>
            <tr>
              <td>
                <p-tableCheckbox [value]="customer"></p-tableCheckbox>
              </td>
              <td>{{ newCustomer.Name }}</td>
              <td>{{ newCustomer.Age }}</td>
            </tr>
          </ng-template>
        </p-table>
      </a>
      <ng-template #NoCustomer>
        <h1>No New Customers</h1>
      </ng-template>
    </p-tabPanel>

I want to hide the <p-dropdown> inside the <th> depending on the condition of imported data. Here is the data and condition:

[
  {
      Name : "Jason",
      Age : 29,
      PhoneNumber: "111-222-3333",
      Level: "Secured"
  },
  {
      Name : "Smith",
      Age : 56,
      PhoneNumber: "222-333-4444",
      Level: "Secured"
  },
  {
      Name : "Jackson",
      Age : 18,
      PhoneNumber: "333-444-5555",
      Level: "Secured"
  }
]

Condition: If all imported data has the "Secured" level, I want to hide the <p-dropdown>.

I tried this, but no difference:

              <th *ngIf="newCustomer && newCustomer.Level !== 'Secured'">
                <p-dropdown
                  [options]="phoneNumber"
                  optionLabel="PhoneNumber"
                ></p-dropdown>
              </th>

              <th>
                <p-dropdown
                  *ngIf="newCustomer && newCustomer.Level !== 'Secured'"
                  [options]="phoneNumber"
                  optionLabel="PhoneNumber"
                ></p-dropdown>
              </th>

Any advice please!

score 0 · Answer 1 · answered Oct 24 '22 at 22:05

That is what your code produces:

what I think is that you add a th instead of td:

    <p-tabPanel>
        <a *ngIf="customer.length; else NoCustomer">
            <p-table #Customer [value]="customer" [scrollable]="true" [(selection)]="selectedCustomer">
                <ng-template pTemplate="header">
                    <tr>
                        <th>
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                            Select All
                        </th>
                        <th>Name</th>
                        <th>Age</th>
                        <th></th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-newCustomer>
                    <tr>
                        <td>
                            <p-tableCheckbox [value]="customer"></p-tableCheckbox>
                        </td>
                        <td>{{ newCustomer.Name }}</td>
                        <td>{{ newCustomer.Age }}</td>
                        <td>
                            <p-dropdown *ngIf="newCustomer.Level !== 'Secured'" [options]="phoneNumber"
                                optionLabel="PhoneNumber"></p-dropdown>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </a>
        <ng-template #NoCustomer>
            <h1>No New Customers</h1>
        </ng-template>
    </p-tabPanel>

and that is what code produce:

hope it helps :)

How to hide p-dropdown in p-table header under a particular condition?

1 Answers1

Linked