Angular - hide/show column in a table when checkbox is selected

Question

I'm trying to hide whole column with all elements in that column when the checkbox is clicked. I'm wondering what's the best approach to solve that using Angular.

 <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let user of Items" >
                        <td>{{user.Name}}</td>
                        <td>{{user.Email}}</td>
                        <td>{{user.Date}}</td>
                    </tr>
                    </tbody>
                </table>

Above the table I have 3 checkboxes:

Name | Email | Date

I want to press one of them and then whole column disappears including <th> element and <td> element. What could be the best idea for this problem?

Are you asking about column?

Gourav Garg
– Gourav Garg

2020-04-15 19:17:36 +00:00
Commented Apr 15, 2020 at 19:17 — Gourav Garg
– Gourav Garg, Commented Apr 15, 2020 at 19:17
Of course, my fault, column

Jan
– Jan

2020-04-15 19:18:49 +00:00
Commented Apr 15, 2020 at 19:18 — Jan
– Jan, Commented Apr 15, 2020 at 19:18

Bike_dotnet · Accepted Answer · 2020-04-15 19:46:33Z

2

To hide columns when a checkbox is selected.

In your .ts create 3 variables set to true for each column.

showName = true;
showEmail = true;
showDate = true;

in your respective checkboxes you need to add checked and change calls for each and match it to the 3 booleans above:

  <input type="checkbox" [checked]="!showName" (change)="showName=!showName"/>

  <input type="checkbox" [checked]="!showEmail" (change)="showEmail=!showEmail"/>

  <input type="checkbox" [checked]="!showDate " (change)="showDate =!showDate "/>

And then add *ngIf in each related th and td for example for the name td and th:

<th scope="col" *ngIf="showName">Name</th>
<td *ngIf="showName">{{user.Name}}</td>

edited Apr 15, 2020 at 19:46

answered Apr 15, 2020 at 19:31

Bike_dotnet

2548 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cagri Tacyildiz · Accepted Answer · 2020-04-15 19:46:59Z

declare class

  export class ColumnVisible{
       public nameVisible:boolean=true;
       public emailVisible:boolean=true;
       public dateVisible:boolean=true;
       constructor(){}
    }

call it in component

columnVisible:ColumnVisible;

in costructor initialize it with

this.columnVisible=new ColumnVisible();

inhtml write as class and give click event

<input [(ngModel)]="columnVisible.nameVisible" type="checkbox"(change)="columnVisible.nameVisible=!columnVisible.nameVisible" /> 
<input [(ngModel)]="columnVisible.emailVisible" type="checkbox"(change)="columnVisible.emailVisible=!columnVisible.emailVisible" /> 
<input [(ngModel)]="columnVisible.dateVisible" type="checkbox"(change)="columnVisible.dateVisible=!columnVisible.dateVisible" /> 
    <table class="table">
        <thead>
        <tr>
            <th  ngIf="columnVisible.nameVisible" scope="col">Name</th>
            <th  ngIf="columnVisible.emailVisible" scope="col">Email</th>
            <th  ngIf="columnVisible.dateVisible" scope="col">Date</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let user of Items" class="{{user.IsShown}}" >
            <td ngIf="columnVisible.nameVisible" >{{user.Name}}</td>
            <td ngIf="columnVisible.emailVisible">{{user.Email}}</td>
            <td ngIf="columnVisible.dateVisible">{{user.Date}}</td>
        </tr>
        </tbody>
    </table>

Danil Sidorenko · Accepted Answer · 2020-04-15 19:32:11Z

0

Here's a little bit of code. stackblitz. You just need three different models for different checkboxes or use 1 property but with different types

answered Apr 15, 2020 at 19:32

Danil Sidorenko

261 silver badge2 bronze badges

Collectives™ on Stack Overflow

Angular - hide/show column in a table when checkbox is selected

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related