Display custom message if data[col.field] is empty

UI Components for Angular
Post Reply
maxjp
Posts: 5
Joined: 11 Apr 2021, 08:56

12 Apr 2021, 19:37

Hi everyone !

Here is the code I'll talk about :

Code: Select all

<ng-template pTemplate="body" let-content let-columns="columns">
        <tr [pSelectableRow]="content" (dblclick)="onDoubleClick(content)">
            <td *ngFor="let col of columns">
                {{ content[col.field] }}
            </td>
        </tr>
</ng-template>
This is a table with rows representing college thesis. One column for example, has the Header "Keyword".

Let's say, in my content[col.field], there are no keywords at all. In the current state, the column will just be blank.

But I'd like to have a random message saying "empty" if there is nothing to show.

I've tried :

Code: Select all

{{ content[col.field] !== ' ' ? content[col.field] : 'empty' }}
This doesn't work, and I can't find anywhere a correct way to do that, based on content[col.field] in my case.

Any help would be welcomed ! :)

PhilHuhn
Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

01 May 2021, 03:35

Maybe:

Code: Select all

{{ content[col.field] !== '' || content[col.field] !== undefined ? content[col.field] : 'empty' }}

PhilHuhn
Posts: 93
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

02 May 2021, 15:11

Hey This was harder than I originally thought. You can use ngIf/else also. I used StackBlitz to create the following:

Code: Select all

<p-table [columns]="cols" [value]="products">
  <ng-template pTemplate="header" let-columns>
      <tr>
          <th *ngFor="let col of columns">
              {{col.header}}
          </th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <span *ngIf='rowData[col.field] !== undefined || rowData[col.field] !== ""'>{{ rowData[col.field] }}</span>
        <span *ngIf='rowData[col.field] === undefined || rowData[col.field] === ""'> - </span>
      </td>
    </tr>
  </ng-template>
</p-table>

<p-table [columns]="cols" [value]="products">
  <ng-template pTemplate="header" let-columns>
      <tr>
          <th *ngFor="let col of columns">
              {{col.header}}
          </th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <div *ngIf='rowData[col.field] === undefined || rowData[col.field] === ""; else elseBlock'> - </div>
        <ng-template #elseBlock>{{rowData[col.field]}}</ng-template>
      </td>
    </tr>
  </ng-template>
</p-table>

Code: Select all

import { Component, OnInit } from '@angular/core';
import { Product } from './product';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit { 
  products: Product[];
  cols: any[];
  constructor( ) { }
  ngOnInit() {
    this.products = [
      { code: '1', name: 'p 1', category: 'cat 1', quantity: 1 },
      { code: '2', name: 'p 1', category: '', quantity: 1 },
      { code: '3', name: 'p 1', category: 'cat 1', quantity: 1 },
      { code: '4', name: 'p 1', category: 'cat 5', quantity: undefined },
      { code: '5', name: 'p 1', category: undefined, quantity: 22 }
    ];
    this.cols = [
        { field: 'code', header: 'Code' },
        { field: 'name', header: 'Name' },
        { field: 'category', header: 'Category' },
        { field: 'quantity', header: 'Quantity' }
    ];
  }
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests