Show a table row based on a specific condition in Angular

Question

Show a table row based on a specific condition in Angular

I'm having this issue with the tr tag in my code snippet below:

<tr *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index " *ngIf="data.status=='1'" >
<td>

</td>
<td>
</td>
</tr>

I am trying to display the tr only when

*ngIf="data.status=='1'"

is true.

However, I encountered the following error:

Can't have multiple template bindings on one element. Use only one attribute prefixed with *

If anyone has a solution for this problem, I would greatly appreciate it. Thank you!

angular typescript

Answer 1

Answer №1

Approach 1: Enclose the content within <ng-container>.

<ng-container *ngFor="let data of list | paginate:{itemsPerPage: 10, currentPage:p} ; let i = index">
  <tr *ngIf="data.status == '1'">
    ...
  </tr>
</ng-container>

Approach 2: Implement the filtering in the component

this.list = this.list.filter((x) => x.status == '1');

<tr *ngFor="let data of list | paginate:{itemsPerPage: 10, currentPage:p} ; let i = index">
  ...
</tr>

Demo Approach 1 & 2 @ StackBlitz

Answer 2

Approach 1: Enclose the content within <ng-container>.

<ng-container *ngFor="let data of list | paginate:{itemsPerPage: 10, currentPage:p} ; let i = index">
  <tr *ngIf="data.status == '1'">
    ...
  </tr>
</ng-container>

Approach 2: Implement the filtering in the component

this.list = this.list.filter((x) => x.status == '1');

<tr *ngFor="let data of list | paginate:{itemsPerPage: 10, currentPage:p} ; let i = index">
  ...
</tr>

Demo Approach 1 & 2 @ StackBlitz

Answer 3

Answer №2

To achieve this, you have the option of utilizing ng-template: https://angular.io/api/core/ng-template

One approach is to encapsulate the entire content within <ng-template> and then apply the structural directive like so:

<ng-template [ngIf]="data.status=='1'">
    <tr
        *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index "
    >
        <td></td>
        <td></td>
    </tr>
</ng-template>

Answer 4

To achieve this, you have the option of utilizing ng-template: https://angular.io/api/core/ng-template

One approach is to encapsulate the entire content within <ng-template> and then apply the structural directive like so:

<ng-template [ngIf]="data.status=='1'">
    <tr
        *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index "
    >
        <td></td>
        <td></td>
    </tr>
</ng-template>

Show a table row based on a specific condition in Angular

Answer №1

Answer №2

Similar questions

Dividing the text by its position value and adding it to a fresh object

Error: There was a problem trying to import the `.d.ts` file

Accessing property values from a map in Angular

The Influence of Getter Performance in Angular Templates

Ways to break down a collection of multiple arrays

Creating a personalized installation pathway for NPM, Angular, and TypeScript on Windows operating systems

Prevent repetition of errors during compiling in the ahead-of-time (AOT

Arranging mat-checkboxes in a vertical stack inside a mat-grid-tile component of a mat-grid-list

What is the process for switching the tile layer from OpenStreetMap to Stamen?

What is the best way to dynamically set an ID in Angular using the pound symbol (#)?

"Exploring the process of connecting a `mat-select` element with dynamically changing data

Angular does not completely erase everything

Tips for incorporating nested generics in Typescript

Encountering an error on Ionic 4, Angular 8: Unable to access property 'subscribe' of undefined

Tips for implementing simple custom styling within an Angular application without relying on innerHTML

What could be causing the issue of my application not being able to operate on the specified port on Heroku?

Achieving the highest ranking for Kendo chart series item labels

Utilize Angular6 and NodeJS to exhibit images stored on a server file system

I am struggling to comprehend the concept of dependency injection. Is there anyone available to provide a clear explanation for me?

Webpack is struggling to locate core-js paths when running on Windows operating systems