Revamping Angular Material Table - A guide to refreshing column headers in a pre-existing table

I am currently working on an Angular 7 project where I have implemented a basic component that utilizes an Angular Material Table. I want to be able to update both the data and the header of the table when a certain event occurs, such as a mouse click.

Before:

https://i.sstatic.net/B0Unj.png

After (goal):

https://i.sstatic.net/6Y6HV.png

Currently, I have been successful in updating the data, but I am facing issues with updating the header text of the columns. I have tried using a window timeout call, which seems like a hacky solution.

It is difficult to explain this issue clearly, so I have provided a link to a stackblitz repository for reference. In the 'table-dynamic-columns.example.ts' file, you can see the two different strategies I have attempted in the 'changeColumnHeader' button click handler. It seems that clearing out the displayed columns of the table first and then setting them back within a timeout is necessary for the new column header title to appear properly. Perhaps the problem lies in the fact that only the title changes while the property name ('id') remains the same.

Is there a more efficient way to achieve this desired update?

angulartypescriptangular-materialangular-material-table

Answer №1

The issue may be due to the property name remaining the same ('id') while only the title is changing.

This is why the update is not occurring, as detailed in this comment

In the same comment, a suggested solution is provided (adding a trackBy function).

To implement this, add trackBy in your template:

<ng-container [matColumnDef]="config.property" *ngFor="let config of configs; trackBy: trackByIndex">
<th mat-header-cell *matHeaderCellDef> {{config.name}} </th>
<td mat-cell *matCellDef="let element"> {{element[config.property]}} </td>

Include the trackByIndex function in your component's TypeScript file:

trackByIndex(i) { return i; }

I have forked the stackblitz you shared and made it work. You can see it here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing geolocation within a promise in Ionic 2

Our implementation of the geolocation call is done within a promise in Ionic 2. It functions properly on iOS and older Android versions. In our app.js file, we are executing the geolocation call and resolving it in the initial view. On Android Marshmallo ...

androidgeolocationangularionic2

Align the ion content (or text or label) to the center vertically

I am striving to achieve a similar look as shown in the following images: https://i.sstatic.net/YFMay.png However, I am currently at this stage: https://i.sstatic.net/ZvpBV.png Please note that the first image showcases a bootstrap form, while the seco ...

htmlcssangularionic-frameworkionic4

Tips for securely accessing a parameterized property of an object in Typescript

I need to create a function that takes an object as an argument and accesses a specific property of this object based on another parameter. Here is the code snippet: // javascript code function setProperty(subject, property, value) { subject[property] ...

typescripttype-annotation

The error message "Property 'chart' is not available in the - ChartJS - Angular 13" indicates that the specified property '

As a beginner in Angular, I am currently working on my first page using Angular and facing some challenges with implementing onClick functionality in ChartJS Bar graphs. The issue arises when attempting to access this.chart within the onClick event of Cha ...

angularchart.js

Tips for identifying two mat-tables within the same component in Angular UI

Having trouble with rendering rows in two mat-tables within the same component. The renderRows() function is not working for the second table. @ViewChild(MatTable) tagsTable: any; @ViewChild(MatTable) serviceAreaTable:any; this.tagsTable.renderRows(); # ...

angularmaterial-uiangular-material-table

Challenges with passing props to a higher order stateless component in React using Typescript

I'm having trouble creating a NavLink following the react-router tutorial. I'm not sure why it's not working with Typescript 2.1 import React from 'react'; import { Link, LinkProps } from 'react-router'; const NavLink: ...

reactjstypescriptreact-routerjsx

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

I am faced with a unique design challenge where I am utilizing the MatCardComponent and each card contains a table. I would like to incorporate a floating label within the border gap similar to what is seen in MatFormField. https://i.stack.imgur.com/51LBj ...

cssangularcustomizationmat-form-fieldmat-card

Leveraging Runtime Environment Variables in Angular 5 within the app.module.ts File

I am currently utilizing a third-party authentication module called OktaAuthModule. In order to import it into my root module (app.module.ts), I must first configure it as follows: const config = { url: https://myurl.com/ } @NgModule({ declaration ...

angularokta

Tips for showing more rows by clicking an icon within an Angular 2 table

When I click on the plus (+) button in the first column of each row, only one row expands. How can I modify it to expand multiple rows at a time? Thanks in advance. <div> <table class="table table-striped table-bordered"> <thead> ...

javascripthtmlcssangularbootstrap-4

What is the best way to change the data types of all properties in Typescript?

Consider this scenario where an EmployeeDTO type is defined with properties like firstName, lastName, and dateOfBirth using Date type EmployeeDTO = { firstName: string lastName: string; dateOfBirth: Date; } Now, we need a utility type that can trans ...

typescript

steps for setting up firestore database

Hey there, I'm trying to retrieve data from Firestore within a cloud function. To initialize Firebase, I have a file called firebase.ts: import * as admin from "firebase-admin"; import { getFirestore } from "firebase-admin/firestore&quo ...

angulartypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

This browser does not recognize the tag <>. To render a React component, ensure its name starts with an uppercase letter

MyIcons.tsx export const ICONCAR = () => ( <span className="svg-icon svg-icon-primary svg-icon-2x"><svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="24px" height=&qu ...

javascriptreactjstypescript

Angular 7 routing glitches causing page refresh issues

Here is the issue I'm facing: I am looking for a way to switch between tabs in my navigation bar without having to refresh the entire website. I have just started working with Angular and I believe that the router should be able to route to a new pag ...

angularhtmlroutesfrontendangular7

Is it feasible to access a service instance within a parameter decorator in nest.js?

I am looking to replicate the functionality of Spring framework in nest.js with a similar code snippet like this: @Controller('/test') class TestController { @Get() get(@Principal() principal: Principal) { } } After spending countless ho ...

javascriptnode.jstypescriptdecoratornestjs

Having trouble with enzyme in React Typescript application

One of my components is called app.tsx import React, { useState } from "react"; const TestComponent = () => { return( <> <div className="head">hey there</div> <select name="xyz" id=&qu ...

reactjstypescriptjestjsenzyme

When the value is empty, MUI Autocomplete will highlight all items

I have encountered a specific issue. I am working on developing a custom Autocomplete Component for filtering purposes. However, I recently came across the following Warning. MUI: The value provided to Autocomplete is invalid. None of the options matc ...

reactjstypescriptmaterial-uiautocomplete

Deactivate the Mention and Hash tag in ngx-linkifyjs

I am currently utilizing ngx-linkifyjs to automatically convert URLs in text to clickable hyperlinks. However, I am facing an issue where it is also converting # and @ tags into links. Is there a way to prevent the conversion of # and @ while maintain ...

javascriptangulartypescript

Attempting a second filter of the table using the dropdown results in no data being returned

I've developed a CRUD app using Angular 7, and I'm facing an issue. When I select a dropdown item for the first time, it shows the desired table data. However, on selecting another item for the second time, it returns nothing. Below is my compone ...

angular

find your way to an angular component within a different module

Currently, I am utilizing this template and running into an issue with navigating from the login component to a different component associated with another module. I have attempted using both this.router.navigate(['myRoute']) and this.router.nav ...

angularangular6routerngroute

Assign object properties to a constant variable while validating the values

When receiving the features object, I am assigning its values to constants based on their properties. const { featureCode, featureSubType, contentId, price, family: { relationCountsConfig: { motherCount, fatherCount, childrenCount }, max ...

javascriptreactjstypescript