Hiding or showing content inside mat-table mat-cells in Angular

Question

Hiding or showing content inside mat-table mat-cells in Angular

I'm working on a simple mat-table where the user can accept or reject rows within 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>

My goal is to hide the accept and reject buttons when a row has already been accepted or rejected.

I attempted to achieve this using:

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

and also tried:

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

However, both methods resulted in an error "Cannot read property 'style' of null".

If more information is needed to help answer my question, please let me know.

Thank you.

angular typescript

Answer 1

Answer №1

To define the style in TypeScript, consider placing it within the ngAfterViewInit hook. This is important especially if you want to set styles for elements that are not yet part of the DOM.

Answer 2

To define the style in TypeScript, consider placing it within the ngAfterViewInit hook. This is important especially if you want to set styles for elements that are not yet part of the DOM.

Answer 3

Answer №2

Here are a couple of ways to accomplish this:

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

In the accept function, you can access the native properties of the element like this:

accept(row, buttonRef){
    buttonRef._elementRef.nativeElement.style.display = 'none';
    // additional logic here
}

This code will hide the button by changing its display property to none.

Another option is to use *ngIf to conditionally remove the button from the DOM. You can find an example here.

Answer 4

Here are a couple of ways to accomplish this:

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

In the accept function, you can access the native properties of the element like this:

accept(row, buttonRef){
    buttonRef._elementRef.nativeElement.style.display = 'none';
    // additional logic here
}

This code will hide the button by changing its display property to none.

Another option is to use *ngIf to conditionally remove the button from the DOM. You can find an example here.

Answer 5

Answer №3

Include the following code in your Tab's container:

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

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

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

Toggle the tab by adding a

(click)="toggleTabVisibility()"

.

If you need further assistance, check out this resource: How to hide tab, but keep content of tab displayed in angular material in angular2?

Answer 6

Include the following code in your Tab's container:

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

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

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

Toggle the tab by adding a

(click)="toggleTabVisibility()"

.

If you need further assistance, check out this resource: How to hide tab, but keep content of tab displayed in angular material in angular2?

Hiding or showing content inside mat-table mat-cells in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to utilize two distinct data sources for the primary chart and dataZoom feature within Apache ECharts?

Unlock the full potential of Angular by taking advantage of {N} application lifecycle events

cdkVirtualFor failing to display complete list of items

Moving information from two modules to the service (Angular 2)

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

When the Mat menu radio button inside a Bootstrap popover is clicked, it will automatically close the popover

The try-catch statement in Typescript is generating an inconsistent return error

Generating a Key/Value pair using a factory limits the properties and their corresponding data types to those defined within a class

Error: Could not inject CookieService - No provider found for CookieService

Issue with Angular 6 Material2 mat-table MatRipple causing errors

Make the width of a table column match the width of the header

Undefined error encountered in the Google Places library

Tour Of Heroes offers a unique and versatile http create feature

A guide on dynamically showcasing/summoning icons in react by utilizing array data

Troubleshooting the error message "Encountering issues with Module build failed (from ./node_modules/postcss-loader/src/index.js)"

How can I uniquely combine a code with an existing CSS class and make modifications to it?

Angular2 is experiencing issues with child routing not functioning properly unless useAsDefault is set to true

The functionality of Angular 2's AsyncPipe seems to be limited when working with an Observable

The Angular checked functionality is not working as expected due to the presence of ngModel

Unable to bring the styles.scss file from angular-notifier into my project