Hide table using ngOnInit

Question

I need to hide a particular column in the HTML table when the page loads. I used ngOnInit() to hide the column. But it works only for the <th> and not for <td>.

But, when I used in click function it works for both <th> and <td>. How can I achieve this?

this is my code used in ngOnInit

ngOnInit() {
$('td:nth-child(19),#tr1 th:nth-child(8)').hide();
}

Try putting it in the life cycle `NgAfterViewChecked`, if I've understood right. — Jacopo Sciampi, May 10 '19 at 09:09

score 0 · Answer 1 · answered May 10 '19 at 11:32

You have to make the particular column depend on a boolean element using ngIf. For example:

// ----- component.html -----
<table style="width:100%">
  <tr>
    <th>column1</th>
    <th>column2</th> 
    <th *ngIf="!eliminar">columnInvisible</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td> 
  </tr>
  <tr>
    <td>3</td>
    <td>4</td> 
  </tr>
</table>

// ------ component.ts ------
export class LoginViewComponent implements OnInit {

  eliminar: boolean;

  ngOnInit() {
    this.eliminar = true;
  }

}

Hide table using ngOnInit

1 Answers1