Angular: Show hide a row based on a value in the previous row

Question

I am trying to hide and show based on the <td> value in the row in my angular 7 application. In the below example, there are three rows with the following headers.

Component

public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal Class ID'];

If you notice in the code, I am trying to hide a row based on the following condition. What I am looking for is that the row should be hidden based on the value in Last Edited row. So I need to show ColumnNames[2] if the value is true in Last Edited

<ng-container *ngIf="c != ColumnNames[2]">

HTML

<table class="fundClassesTable table-striped" border="1">
  <tr *ngFor="let c of ColumnNames">
    <ng-container *ngIf="c != ColumnNames[2]">
      <th class="tableItem bold">{{ c }}</th>
      <ng-container *ngFor="let f of data">

        <ng-container>        
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
        </ng-container>

      </ng-container>
    </ng-container>
  </tr>
</table>

Updated screenshot

**HTML**: call a function in `*ngIf`, pass it the row's index... **TS**: check the previous index for your condition and pass true/false; — Akber Iqbal, Jun 14 '19 at 09:07
I am not too sure what you meant. I have created a jsfiddle https://jsfiddle.net/nc8kjofr/1/. could you kindly show me — Tom, Jun 14 '19 at 09:21
So take the first column for example. If the value in Last Edited is true then row needs to be hidden if it false then it should be shown — Tom, Jun 14 '19 at 09:31
To be more clear, if the value is true in any of the td in that row then show the row else hide the row — Tom, Jun 14 '19 at 16:43
Don't say ambiguous words row/column here causing confusions, do you want to hide **Class X** if `Last Edited` i.e `AuditSummary` is true? [Like this](https://jsfiddle.net/monim67/53tgweso/)? — Munim Munna, Jun 16 '19 at 07:48
If lastedited contains true , it could be value falling under any class then legal class id should be hidden . The entire row. I am referring to visual row as seen in the example — Tom, Jun 16 '19 at 12:05
Shared the a fiddle https://jsfiddle.net/vzc4j3rs/4/ and also see the screenshot for an updated screenshot — Tom, Jun 16 '19 at 13:42
@Tom you want to hide legal classid entire row if any of last edited is true — NickCoder, Jun 22 '19 at 08:42

score 0 · Answer 1 · answered Jun 17 '19 at 09:12

Any particular reason why you had a horizontal table? it just made the HTML a little weird. However, the following solution will get you what you wanted... a function is returning true/false which toggles the visibility via *ngIf.

relevant TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  public ColumnNames: string[] = ['Legal Class Name', 'Last Edited', 'Legal Class ID'];
  data: any[] = [
    { className: 'class A', edited: 'true', id: '11101' }, { className: 'class B', edited: 'false', id: '11101' },
    { className: 'class C', edited: 'true', id: '11101' }, { className: 'class C', edited: 'true', id: '11101' },
    { className: 'class E', edited: 'true', id: '11101' }, { className: 'class D', edited: 'true', id: '11101' },
    { className: 'class G', edited: 'true', id: '11101' }, { className: 'class E', edited: 'true', id: '11101' },
    { className: 'class I', edited: 'true', id: '11101' }, { className: 'class F', edited: 'true', id: '11101' },
    { className: 'class K', edited: 'true', id: '11101' }, { className: 'class G', edited: 'true', id: '11101' },
  ]
  constructor() { }

  checkVisibility() {
    let columnCheck: boolean = true;
    for (var i = 0; i < this.data.length; i++) {
      if (this.data[i].edited == 'false') {
        return false;
      }
    }
    return columnCheck;
  }
}

relevant HTML:

<h3>
    Vertical Table
</h3>

<table class="fundClassesTable table-striped" border="1">
    <thead>
        <th class="tableItem bold">{{ColumnNames[0]}}</th>
        <th class="tableItem bold">{{ColumnNames[1]}}</th>
        <th class="tableItem bold" *ngIf='checkVisibility()'>{{ColumnNames[2]}}</th>
    </thead>
    <tbody>
        <tr *ngFor="let f of data">

            <td class="tableItem">{{f.className}}</td>
            <td class="tableItem">{{f.edited}}</td>
            <td class="tableItem" *ngIf='checkVisibility()'>{{f.id}}</td>
        </tr>
    </tbody>
</table>

<hr/>

    <h3>
        Horizontal Table
    </h3>
    <table class="fundClassesTable table-striped" border="1">
        <tbody>
            <tr>
                <th class="tableItem bold">{{ColumnNames[0]}}</th>
                <ng-container *ngFor="let f2 of data">
                    <td class="tableItem bold">{{f2.className}}</td>
                </ng-container>
            </tr>
            <tr>
                <th class="tableItem bold">{{ColumnNames[1]}}</th>
                <ng-container *ngFor="let f3 of data">
                    <td class="tableItem bold">{{f3.edited}}</td>
                </ng-container>
            </tr>
            <tr *ngIf='checkVisibility()'>
                <th class="tableItem bold">{{ColumnNames[2]}}</th>
                <ng-container *ngFor="let f4 of data">
                    <td class="tableItem bold">{{f4.id}}</td>
                </ng-container>
            </tr>
        </tbody>
    </table>

complete working stackblitz here

NickCoder · Answer 2 · 2019-06-22T08:59:31.863

0

if I am correct you want if any of the last-edit are true to hide entire legal class ID row.

by this consideration, you just have to replace this row

<td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>

to this:

<td class="tableItem" *ngIf="c == ColumnNames[2] && f.AuditSummary =='false' ">{{f.Id}}</td>

here is fiddle to check the behavior

edited Jun 22 '19 at 08:59

answered Jun 22 '19 at 08:48

NickCoder

1,504
2
23
35

Martin Schneider · Answer 3 · 2019-06-24T19:22:45.827

Your table template looks kind of confusing ;). The HTML standard does not expect a table in horizontal orientation, so to accomplish this, some tricks need to be done in any way.

Here is my solution to your task (I omitted some common code lines):

It is a bit more code, but this is for more readability and maintainability (in my opinion).
It is also less performance intensive than some other solutions, since the data is iterated only once.
The most logic is done in code-behind, not in the template.

Live example on StackBlitz

app.component.ts:

import { MyType } from './my-table/my-table.component';

// @Component ...
export class AppComponent  {
  myData: MyType[] = [
    { legalClassName: 'Class A', lastEdited: false, legalClassID: '11167' },
    { legalClassName: 'Class B', lastEdited: false, legalClassID: '13717' }
  ];
}

app.component.html

<my-table [data]="myData"></my-table>

my-table.component.ts

import { Component, OnInit, Input, OnChanges } from '@angular/core';

export class MyType {
  legalClassName: string;
  lastEdited: boolean;
  legalClassID: string;
}

class HorizontalTableColumn {
  header: string;
  visible: boolean;
  items: any[];
}

// @Component ...
export class MyTableComponent implements OnInit, OnChanges {
  @Input()
  data: MyType[];

  columnsThatAreActuallyRows: HorizontalTableColumn[] = [
    { header: 'Legal Class Name', visible: true, items: [] },
    { header: 'Last Edited',      visible: true, items: [] },
    { header: 'Legal Class ID',   visible: true, items: [] }
  ];

  constructor() { }

  ngOnInit() {
    this.processData();
  }

  ngOnChanges() {
    this.processData();
  }

  private processData() {
    this.columnsThatAreActuallyRows[0].items = [];
    this.columnsThatAreActuallyRows[1].items = [];
    this.columnsThatAreActuallyRows[2].items = [];

    let newVal = this.data;
    if (newVal != undefined && newVal != null && newVal.length > 0) {
      for (let i = 0; i < newVal.length; i++) {
        let item = newVal[i] as MyType;

        this.columnsThatAreActuallyRows[0].items.push(item.legalClassName);
        this.columnsThatAreActuallyRows[1].items.push(item.lastEdited);
        this.columnsThatAreActuallyRows[2].items.push(item.legalClassID);

        if (item.LastEdited) {
          this.columnsThatAreActuallyRows[2].visible = false;
        }
      }
    }
  }

}

my-table.component.html

<table>
  <ng-container *ngFor="let fakeCol of columnsThatAreActuallyRows"> 
    <tr *ngIf="fakeCol.visible">
      <th>{{fakeCol.header}}</th>
      <td *ngFor="let item of fakeCol.items">{{item}}</td>
    </tr>
  </ng-container>
</table>

Angular: Show hide a row based on a value in the previous row

3 Answers3