Solution 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

Solution 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);
}

Solution 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) );

Problem :

<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. 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?

enter image description here

Comments

Comment posted by Shlok Nangia

try removing the

Comment posted by cerkiner

can you share codes from your typescript file?

Comment posted by Aakash Garg

@Aquarius_Girl did this solution also solve the index issue? like now you are having 1 and 2 as Serial Number? I beleive for more rows that scenario will fail.

Comment posted by Aquarius_Girl

This solution did not help with indexing. That’s true. @AakashGarg

Comment posted by Aakash Garg

oh ok, i thought i was missing something. thanks for confirming.

Comment posted by cerkiner

@Aquarius_Girl is the index an important part of the page? if so, unfortunately, there is no good solution on the template side. filtering must be done on the controller

Comment posted by Aquarius_Girl

Sam. Thank you. That’s what the other answer has shown. That other answer has solved the problem of indexing.

Comment posted by Aquarius_Girl

please point out the documentation for keyword ‘filter’ used in your answer.

Comment posted by developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Here you go @Aquarius_Girl

Comment posted by Aquarius_Girl

That’s why I could not find it. I was looking in Angular documentation. Thank you.

By

Leave a Reply

Your email address will not be published. Required fields are marked *