How to write a *ngIf statement in a table in Angular?

Question

<table border = 2 border-bottom = 2>
    <th> </th>
    <th>S. No.</th>
    <th>Title</th>
    <th>Creation date</th>
    <th>Modification date</th>

    <tr *ngFor = "let checkboxesBlog of getCheckboxes_FormGroup.controls; let i = index;" >
        <a *ngIf = "checkboxesBlog.controls.visible.value === true">
            <td [formGroup] = "checkboxesBlog"> 
                <input type      = "checkbox"
                 formControlName = "checkboxValue"
                 (click)         = "onCheckboxClicked( i )">
            </td>

            <td>{{ i + 1 }}</td>
            <td>{{ checkboxesBlog.controls.blogTitle.value }}</td>
            <td>{{ checkboxesBlog.controls.creationDate.value }}</td>
            <td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
        </a>
    </tr>
</table>

Following if clause is creating two problems above:
<a *ngIf = "checkboxesBlog.controls.visible.value === true">

1. The S.R. No. S.R. No. is not sequential because the i is getting updated in for loop.

2. The first column is unnecessarily too long.

What is the way to write if statements to avoid these problems?

Answer 1

Some HTML elements require all immediate children to be of a specific type. For example, the <tr> element requires <td> children. You can't wrap the rows in a conditional <a> .

ng-container to the rescue

The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

Here's the conditional row again, this time using <ng-container> .

<table border = 2 border-bottom = 2>
    <th> </th>
    <th>S. No.</th>
    <th>Title</th>
    <th>Creation date</th>
    <th>Modification date</th>

    <tr *ngFor = "let checkboxesBlog of getCheckboxes_FormGroup.controls; let i = index;" >
        <ng-container *ngIf = "checkboxesBlog.controls.visible.value === true">
            <td [formGroup] = "checkboxesBlog"> 
                <input type      = "checkbox"
                 formControlName = "checkboxValue"
                 (click)         = "onCheckboxClicked( i )">
            </td>

            <td>{{ i + 1 }}</td>
            <td>{{ checkboxesBlog.controls.blogTitle.value }}</td>
            <td>{{ checkboxesBlog.controls.creationDate.value }}</td>
            <td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
        </ng-container>
    </tr>
</table>

For more information: https://angular.io/guide/structural-directives#ng-container-to-the-rescue

Answer 2

Here you go:-

<table border = 2 border-bottom = 2>
    <tr>
    <th> </th>
    <th>S. No.</th>
    <th>Title</th>
    <th>Creation date</th>
    <th>Modification date</th>
    </tr>
    <tr *ngFor = "let checkboxesBlog of filteredCheckBoxes; let i = index;" >
        <a>
            <td [formGroup] = "checkboxesBlog"> 
                <input type      = "checkbox"
                 formControlName = "checkboxValue"
                 (click)         = "onCheckboxClicked( i )">
            </td>

            <td>{{ i + 1 }}</td>
            <td>{{ checkboxesBlog.controls.blogTitle.value }}</td>
            <td>{{ checkboxesBlog.controls.creationDate.value }}</td>
            <td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
        </a>
    </tr>
</table>

In Typescript:-

public filteredCheckBoxes = [];

ngOnInit() {
  this.filterData();
}

public filterData() {
  this.filteredCheckBoxes = this.getCheckboxes_FormGroup.controls.filter((data) => data.controls.visible.value);
}

Answer 3

This answer: https://stackoverflow.com/a/62014605/462608 , throws the following error:

Property 'controls' does not exist on type 'AbstractControl'.

from the following function:

public filterData() {
  this.filteredCheckBoxes = this.getCheckboxes_FormGroup.controls.filter((data) => data.controls.visible.value);
}

Way to solve that error is to use data.get('visible').value instead of data.controls.visible.value as follows:

this.filteredCheckBoxes = this.getCheckboxes_FormGroup.controls.filter( (data) => data.get('visible').value) );