Angular - mat-table : show or hide mat-cell content

Question

I have a simple mat-table, where the user accept or reject the row of the table

<ng-container matColumnDef="accept">
  <mat-header-cell *matHeaderCellDef mat-sort-header>accept </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button (click)="accept(row)" mat-raised-button id="accept">accept</button>
  </mat-cell>
</ng-container>

<ng-container matColumnDef="reject">
  <mat-header-cell *matHeaderCellDef mat-sort-header>reject </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button (click)="reject(row)" mat-raised-button id="reject">reject</button> </mat-cell>
</ng-container>

So, when the row is already accepted or rejected, those buttons should be hidden

I tried this

 document.getElementById("accept").style.visibility = "hidden";

and this

 document.getElementById("accept").style.display = 'none';

but they didn't work, I got an error "Cannot read property 'style' of null"

I don't know if the question is clear enough but if you need more information I will provide.

Thank you.

Possible duplicate of [How to change CSS styling from within Angular 2 Component](https://stackoverflow.com/questions/40295832/how-to-change-css-styling-from-within-angular-2-component) — Teun van der Wijst, Oct 24 '18 at 08:34
cant you use attribute binding in this case in the corresponding button elements? LIke `` — Ashraful Islam, Oct 24 '18 at 08:43
Please click on this [link](https://stackoverflow.com/questions/48226868/document-getelementbyid-replacement-in-angular4-typescript/48226924) to find better way of using html elements. — priya_21, Oct 24 '18 at 09:09

score 0 · Answer 1 · answered Oct 24 '18 at 08:46

0

Where in typescript do you set the style? Most probably it should be in the ngAfterViewInit hook as the buttons are not in the DOM yet, if you are trying to set the style before it.

answered Oct 24 '18 at 08:46

vasilv

21
1
4

it is in a separated function getData() where I get data and show them on the table – user3504563 Oct 24 '18 at 08:54
If getData() is invoked before the view is compiled, the result will be the same. – vasilv Oct 24 '18 at 09:03

score 0 · Answer 2 · answered Oct 24 '18 at 09:02

You have some approaches for this: 1) changing the html of the button to

<button #acceptButton (click)="accept(row,acceptButton)" mat-raised-button id="accept">accept</button>

then in your accept function you can access element native properties something like this:

accept(row,buttonRef){
    buttonRef._elementRef.nativeElement.style.display = 'none'
bla bla logic
}

this will change the button display property to none and hide the button

2) you can attach logic to *ngIf then the button will be removed from the DOM example here

AndyNope · Answer 3 · 2021-01-12T14:20:17.730

0

Add to your div/container of your Tab:

[ngClass]="{ 'invisible': !displayTab}"

    .invisible * {
    visibility: hidden !important;
    transition: 0s !important;
}

    yourToggleFunction(): void{
     this.displayTab = !this.displayTab;
   }

Then you can switch it with a (click)="yourToggleFunction()".

This might help: How to hide tab, but keep content of tab displayed in angular material in angular2?

edited Jan 12 '21 at 14:20

answered Jan 12 '21 at 14:14

AndyNope

427
6
12

1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch Jan 12 '21 at 14:15

Angular - mat-table : show or hide mat-cell content

3 Answers3