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

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">
The S.R. No. is not sequential because the i is getting updated in for loop.
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) );