CODEWITHSUNDEEP
javascriptangulartypescript
Jan
Jan

Reputation: 79

Angular - displaying table elements according to true/false checkbox element

I'm trying to create a list of checkboxes and table. My goal is to hide specific element in a table when specific checkbox is set to false.

For example: When I press 'Id' -> '20' should disappear (stackblitz example)

I get data from API (json file). My idea was to create a second array with names and statuses (set default to true -> to display checkboxes) to display list of checkboxes.

But I don't know how to connect this, so elements of table can be displayed according to checked/unchecked checkbox.

Here is my example

Does anyone have an idea how to solve that problem?

Upvotes: 0

Views: 805

Answers (1)

Ali Adravi
Ali Adravi

Reputation: 22823

Use and object like status to keep track of column status:

status =  {
    id: false,
    email: true,
    login: true,
    phone: true
  };

To bind the key value:

<li *ngFor="let item of status | keyvalue">
    <div>
        <input type="checkbox"
  [(ngModel)]="item.key" />
        <div class="state">
            <label>{{item.value}}</label>
        </div>
    </div>
</li>

It will only support after angular 6, because keyvalue pipe was introduced in 6.1

Then on each column:

<td *ngIf="status.id">{{tableList.Id}}</td>

Your link of stackblitz is using @angular/compiler@5.0.0, so that will not work for keyvalue pipe.

Hope it will give you the direction to proceed!

Upvotes: 1

Related Questions