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

The function mustAsync onSuccess is not present in this type (typescript)

How can deep nested properties be set in Angular without triggering a re-render of the entire component tree using the onPush change detection strategy

In Angular, encountering difficulty accessing object members within an array when using custom pipes

Guide on extracting the id from the path parameter in an HTTP request using Cloud Functions and nodejs

Typescript's ability to have Enums with dynamic keys

Error message possibly undefined when attempting to apply fill gradient to Highcharts area-spline chart

Error in declaring type even after including .d.ts file

Error 403 persists despite my login status!

Is there a way to display my modal separately from my sidenav while utilizing :host in Angular?

Reacting to the surprise of TS/JS async function behaving differently than anticipated

Error in ngx-mqtt service configuration related to the chosen protocol

The error message "Property 'hideKeyboardAccessoryBar' does not exist on type 'Keyboard'." appeared while using the IONIC Moodle App

Testing the functionality of an event through unit test cases

The CORS policy specified in next.config.js does not appear to be taking effect for the API request

Issue: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor can only bind to Iterables like Arrays

What is the best way to tally up the occurrences of a specific class within an Angular application?

Angular 6 - ngModel Value Reveals Itself upon User Interaction

Update Observable by assigning it a new value of transformed information using the async pipe and RXJS

The FormControl is currently presenting ",required(control)" within its value field

What is the best way to integrate @uirouter in the Angular/sampleapp project?