angular determine if a column exists within a matCellDef iteration

Is there a way to check a column in an ng for loop in Angular without using the logic "{{element[p.key] != null ? '$' : ''}}" for a specific column or excluding a specific column?

View image description here

#html code

<table mat-table [dataSource]="bovDemos" class="mat-elevation-z0">
                    <ng-container  *ngFor="let p of marketDemographicsTableLabel; last as l" matColumnDef="{{p.key}}">
                      <th mat-header-cell *matHeaderCellDef class="fs-12px">{{p.label}}</th>
                      <ng-container >
                        <td  mat-cell *matCellDef="let element; index as i"
                        [ngClass]="{'border-none': i === bovDemos.length - 1}" class="fs-12px">
                        {{element[p.key] != null ? '$' : ''}}{{(element[p.key]) ? (element[p.key] | number): '-'}}</td>
                      </ng-container>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="tableMarketDemographicsHeaders"></tr>
                    <tr mat-row *matRowDef="let row; columns: tableMarketDemographicsHeaders;" class="cursor-default">
                    </tr>
                  </table>

Answer №1

If you have designated "index as i", you can then utilize "i" to identify the first td.

<span *ngIf="i===0">
   ..this is first column
 </span>
<span *ngIf="i!==0">
{{element[p.key] != null ? '$' : ''}}{{(element[p.key]) ? (element[p.key] | number): '-'}}
</span>

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

Building a different theme using the ng or npm command can be achieved by following these steps

In an attempt to utilize different npm commands for building distinct themes, such as running 'npm run red' (to launch index with red.html) or 'npm run blue' (to initiate index with blue.html). npm run red npm run blue I have configur ...

Why is Vue JS throwing an error stating "undefined is not an object"?

After creating a Vue app on a single page .html file served by django, which consists of multiple components, I decided to transition this project into a full-fledged Vue.js project using the Vue CLI. Initially, I thought it would be a simple task to trans ...

Creating variables in Typescript

I'm puzzled by the variable declaration within an Angular component and I'd like to understand why we declare it in the following way: export class AppComponent { serverElements = []; newServerName = ''; newServerContent = &apos ...

What is the process of overriding methods in a function-based component in React?

Overriding in a parent component works when it is a class-based component // Parent Button Class class Button extends React.Component { createLabel = () => { return <span>{this.props.label}</span>; }; render() { return <butt ...

A guide on sorting MongoDB arrays in JavaScript to arrange them in descending order based on two specific fields

I am attempting to organize MongoDB arrays in a descending order. I have devised some JavaScript code to transform all the documents into JSON arrays, but I also need to arrange them in a descending order. Here is the code I have written: const result = xp ...

Is there a way for me to obtain a selection of 20 random items from this JSON data

When working with my JSON data using Myjson.slice(1, 20), I encountered a situation where I needed to extract only 20 items from a dataset that had a length of 2624. In the code snippet provided, I attempted to use the slice method but struggled to differe ...

Restrict the duration of time a user can spend in the v-calendar

I'm currently developing a project where users can request appointments. I'm utilizing the v-calendar library, which incorporates a datepicker. The challenge I'm facing is that users are able to request appointments at any time of day, 24/7 ...

Avoiding mocking a specific module with jest forever

Our codebase heavily relies on underscore in various parts, and I prefer to avoid mocking it. I'm aware that I can use jest.unmock('underscore'); in each test that utilizes underscore. Is there a method to unmock underscore across all tests ...

Validating email addresses using jQuery regular expressions

Probable Match: How can I validate email addresses using a regular expression? I have explored various options, but none have proven effective for validating email: [email protected] This is the client-side function I have implemented for a cust ...

Retrieve data from jQuery and send it to PHP multiple times

<input type="checkbox" value="<?= $servicii_content[$j]['title'] ?>" name="check_list" id="check" /> By using jQuery, I am able to extract multiple values from the table above once the checkboxes are checked. Here's how: var te ...

List the hours using TypeScript

My data table is displaying records including a column for hours spent and a row showing the total sum of those hours. While the hours are being added correctly, the minutes display as NaN, such as 52:Nan. Can someone assist me in resolving this issue? co ...

What is the best way to create a backup copy of my project using git?

To ensure the safety of my project, I took the necessary steps to back it up. First, I initialized a repository using git init Following that, I committed all files by executing git add . git commit -am "first commit" Now, the next step involves pushin ...

Leveraging the NextAuth hooks, employ the useSession() function within the getServerSideProps

I'm currently working on retrieving data from my server based on the user who is logged in. I am utilizing Next-Auth and usually, I can easily obtain the session by calling: const { data: session } = useSession(); In a functional component, this work ...

Recovering antiquated submission script in JavaScript

Here is a form with input data: <form id = 'myform'> ... <td><input type="checkbox" name="supplier_aid" value="on" checked disabled >{$output.t_artikelnr}</td> <td><input type="checkbox" n ...

Troubleshooting TextField malfunctioning after button click within Dialog on Material UI

My main objective is to focus on a Material UI TextField after closing a Dialog by clicking a button inside the Dialog. The code snippet below successfully accomplishes this task when triggered from a button that is not within a dialog component: focusOn ...

Navigate between tabs with a single click

Hey there! I'm having trouble putting together a webpage that features a sidebar. I want to make it so that clicking on one of the links at the top will switch the tab and its content accordingly. However, the current code I have isn't working an ...

What are the potential reasons for a function in React not being identified as a function?

I recently started learning React and decided to follow this YouTube tutorial on creating a TO DO LIST using React. https://www.youtube.com/watch?v=E1E08i2UJGI Everything seems to be in place, but when I try to interact with my form by typing something an ...

Tips for executing a JavaScript function within a secure sandbox environment

My current setup involves an application server developed in JavaScript (node.js) where I receive JS function code as input from a web browser. Now, my goal is to execute this function on the server without any interference with other processes. I am look ...

What kind of output should a Server Side Component generate?

Recently, I decided to incorporate the NextPage type from Next.js into my component writing routine after hearing it's a beneficial practice. However, I discovered that it only functions properly with client-side components. When attempting to utilize ...

Issue with AngularJS: error:areq Invalid Argument

<!DOCTYPE html> <html ng-app> <body data-ng-controller="SimpleController"> <div class="container"> Title: <br/> <input type="text" ng-model="title" />{{title}} <br/> ...