Display real-time information in angular material table segment by segment

I need to incorporate service data into an Angular mat table with specific conditions as outlined below:

  1. If the difference between the start date and end date is less than 21 days, display 'dd/mm' between the 'start_date' and 'end_date' in the header.
  2. If the start date and end date difference is less than 70 days, show the header with the week number.
  3. If the start date and end date difference is greater than 70 days but less than 1 year, the header values should be displayed as month names. Data provided by the service appears as follows:
let arr =[
{
    Code: 1234,
    Type: first
    Codedata: [{
        Ward: abc,
        Start_date:. 10/10/2022,
        End_date : 15/10/2022
    },{
        Ward: xyz,
        Start_date:. 15/10/2022,
        End_date : 15/12/2022
    }
]
}]

https://i.sstatic.net/UBKlQ.jpg

While attempting to dynamically change headers, I encountered an error indicating that the column ID could not be found with [id].

Answer №1

If you want to dynamically change the date column in a mat-table using Angular, you can create a custom Angular Pipe. Start by creating a transformDate.pipe.ts file where you can define your logic based on specific conditions. You will then need to update your HTML code as shown below.

<table mat-table [dataSource]="dataSource" class="mt-2 mat-elevation-z0">
 <ng-container *ngFor="let column of allCols" [matColumnDef]="column">
  <th mat-header-cell *matHeaderCellDef>{{ column === 'yourColumnName' ? (column | transformDateHeader) : column }}</th>
  <td mat-cell *matCellDef="let row">
     {{ column === 'yourColumnName' ? (row[column] | transfromDateColumn) }}
  </td>
 </ng-container>
</table>

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

JavaScript: Implementing a retry mechanism for asynchronous readFile() operation

My goal is to implement a JavaScript function that reads a file, but the file needs to be downloaded first and may not be immediately available. If an attempt to access the file using readFile() fails and lands in the catch block, I want to retry the actio ...

What is the best way to initialize a JavaScript constructor in AngularJS, similar to using ng-init to define variables but calling the constructor in service.js?

I need help converting this code to AngularJS. The current code is in core JavaScript and I want to call a core JavaScript constructor from AngularJS. I have successfully defined how to call the service constructor in core, but I am unsure of how to call i ...

Matching patterns with regular expressions in Javascript

There's a string that goes like this: |Africa||Africans||African Society||Go Africa Go||Mafricano||Go Mafricano Go||West Africa|. I'm attempting to craft a regular expression that will only match terms containing the word Africa or any variation ...

Unique icons crafted for iOS and Android devices

I have unique custom icons named "md-usb.svg" for both iOS and Android. After copying the Android icon to the designated folder: android\app\src\main\assets\public\svg When searching for the standard icon md-bluetooth.svg, ...

How to avoid the need to wrap all setState calls with #act in React 18?

One issue I encountered was when upgrading from React 17 to 18, ReactDom render became asynchronous. To handle this, I needed to use #act to wrap the ReactDom render. However, React also required that all setState calls be wrapped with #act. If not done, ...

What is the method for altering the color of the webkit-slider-thumb using JavaScript?

I am looking to adjust the color of an input range using JavaScript instead of CSS. Can someone help me with this request? Current CSS Code: input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: goldenrod !importa ...

What is the method for transforming an array object into an object?

How can I assign the values of an array object called hello to a constant called answer, changing the key value in the process? I've considered using Object.entries but couldn't quite get it right. Is there a way to achieve this? Here is my cod ...

The instance does not have a defined "key" property or method in this Vue/Laravel application

When I attempt to delete a register in my application, I encounter a Vue-warn message: The property or method "key" is referenced during render but is not defined on the instance. Make sure that this property is reactive by initializing it in the data o ...

Try to refrain from invoking effect within a component that is being conditionally rendered

I have a particular component that I am working with: const Component = () => { useEffect(() => { console.log('Executing useEffect in the Component') }, []) return <Text>element</Text>; } Whenever I conditionally re ...

Perplexed by the persistent failure of this Jasmine test accompanied by a vexing "timer in queue" error

I'm attempting to test a function that uses RxJS to broadcast long press events to subscribers. Below is the implementation of the function: export function watchForLongPress(target: HTMLElement) { let timer: number; const notifier = new Subject& ...

Completing a Promise without invoking the 'then' method

As I work on developing a small API for the NPM module Poolio, one common dilemma arises regarding error-first callbacks and promises. The challenge lies in how to cater to both types of asynchronous functions while maintaining consistency in APIs and retu ...

Learning the art of Javascript programming within the HTML5 realm

Seeking assistance with a JavaScript project - I'm attempting to develop a Bubble Buster game reminiscent of pong, but with multiple bubbles. The goal is to have falling bubbles on screen (roughly 100 in total) in various colors dropping from random l ...

There was an issue with the code: ERROR TypeError: Can't access the length of an undefined property in Angular 4

Encountering this particular issue: LeaderBoardComponent.html:27 ERROR TypeError: Cannot read property 'length' of undefined The error seems to be originating from the following HTML: <div *ngIf="leaderBoardTableData.length > 0"> With ...

Issues with displaying images in Fancybox

I've integrated FancyBox into my website, but I'm experiencing a minor issue. While the FancyBox works perfectly in Dreamweaver, it seems to malfunction in various browsers. As someone who is not well-versed in programming, I'm struggling t ...

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

Form validation has not passed the necessary checks

Struggling to create a new user POST form with Bootstrap form validation but encountering an issue. The button code is as follows: <button class="btn btn-primary btn-addUser" type="submit">Add User</button> This button trig ...

What is the process for defining a collection of strings as a data type?

Is there a way to define a strict type for a group of strings that users must adhere to? I want to restrict input to only be one of the predefined strings in the group. How can I achieve this? This is my current approach: const validTypes: Array<strin ...

Guide to accessing Angular app on a mobile device within the same network

I'm facing an issue with my Angular App when trying to access it on mobile within the same network. I've attempted running ng serve --host <my IP> or ng serve --host 0.0.0.0 and it works well. However, the problem arises because the applica ...

Obtaining the correct information from an array using Ionic's Angular framework

I am currently working with an array of data that contains arrays within each item. I have been able to display the data as needed, except for the IDs. Approach Show arrays within the array Retrieve the IDs of the arrays (excluding the IDs inside the ar ...

Checking to see if there are a minimum of two checkboxes selected before inputting the data into the database

I am currently using a combination of HTML, PHP, JavaScript, MySQL, and Wampserver. In my project, I have implemented 3 checkboxes where the user can choose a maximum of two options. Once selected, these choices are then inserted into the database. Initi ...