0

enter image description here

I have a table that is displaying five rows of N/A when I would like to display just one row.

(HTML)

              <ng-container *ngFor="let item of file?.fileConfigurations">
                <tr *ngIf="item.file === element.file; else notapplicable">
                    <td> {{item.filename}} </td>
                    <td> {{item.day}} </td>
                    <td> {{item.week}} </td>
                    <td> {{item.time}} </td>
                </tr>
              </ng-container>
              <ng-template #notapplicable>
                <tr>
                  <td>N/A</td>
                  <td>N/A</td>
                  <td>N/A</td>
                  <td>N/A</td>
                </tr>
              </ng-template>

How can I just display one row of N/A if the ngIf condition is never met? Basically, it displays N/A repeatedly, for five times, when my ngIf condition is not met. This is because the ngFor loop loops through five file configurations.

I have tried removing ng-template, but then it never displays my N/A placeholder value in the data cell (which I want).

cluis92
  • 664
  • 12
  • 35
  • Can you provide a Minimal Reproducible Example by showing your data and create the project in [StackBlitz](https://stackblitz.com)? It is hard to know that how's the structure of your table and what is `element` for `element.file` ? – Yong Shun Jul 16 '21 at 00:39
  • https://stackoverflow.com/questions/68402432/how-to-display-a-certain-html-if-a-condition-is-never-met-angular – cluis92 Jul 16 '21 at 01:26

2 Answers2

0

Assuming you have element is available in your ts file, you can pre-check for all file in fileConfigurations matches element.file

in component.ts

file: {fileConfigurations: any[]} = {
    fileConfigurations: []
}

element = {
    file: 'some data'
}

noFileExists() {
   return this.file?.fileConfigurations.every(item => item.file !== this.element.file)
}

if the above condition matches, show single <tr>

in component.html

<ng-container *ngIf="noFileExists(); else fileLoop">
    <tr>
        <td>NA</td>
        <td>NA</td>
        <td>NA</td>
        <td>NA</td>
    </tr>
</ng-container>
<ng-template #fileLoop> 
    <ng-container *ngFor="let item of file?.fileConfigurations">
        <tr *ngIf="item.file === element.file; else notapplicable">
            <td> {{item.filename}} </td>
            <td> {{item.day}} </td>
            <td> {{item.week}} </td>
            <td> {{item.time}} </td>
        </tr>
      </ng-container>
      <ng-template #notapplicable>
        <tr>
          <td>N/A</td>
          <td>N/A</td>
          <td>N/A</td>
          <td>N/A</td>
        </tr>
      </ng-template>
</ng-template>
Pradeep Siva
  • 1
  • 1
0

You can create a parent element around the container, And check if the childElementCount property is equal to 0.

<div #items>
  <ng-container *ngFor="let item of file?.fileConfigurations">
    <tr *ngIf="item.file === element.file">
      <td> {{item.filename}} </td>
      <td> {{item.day}} </td>
      <td> {{item.week}} </td>
      <td> {{item.time}} </td>
    </tr>
  </ng-container>
</div>

<tr [hidden]="items.childElementCount !== 0">
  <td>N/A</td>
  <td>N/A</td>
  <td>N/A</td>
  <td>N/A</td>
</tr>
Tammy
  • 1
  • 1