I have a variable in my ts that contains a value of 3 (array length), I want to use it in my html to increment the value of index ([0]) until the value of 3 is reached.
<table mat-table [dataSource]="dataSourceQuizOverview" matSort>
<ng-container matColumnDef="question_text">
<th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Questions</th>
<td class="font" mat-cell *matCellDef="let row">{{row.quiz_records[0].question_text}}</td>
</ng-container>
<ng-container matColumnDef="user_answers">
<th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Answer</th>
<td class="font" mat-cell *matCellDef="let row">{{row.quiz_records[0].user_answers}}</td>
</ng-container>
</table>
ts
quiz_recordsLength.length: number = 3;
You should check, NgForOf Directive. This should solve your issue.
Also, for future questions, please remember this: How much research effort is expected of stack overflow. Posting a new question should be your last resort.
Related
I have an angular material table
(HTML)
<table mat-table
[dataSource]="dataSource" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container *ngIf="{{column}}" matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
I want to change the styling on the element if it equals 'Missing' (e.g. {{element[column}} == Missing then change styling).
(style) (HTML)
<mat-chip *ngIf="element.status=='Missing'" style="background-color: #ec9d9d; color: red">Missing</mat-chip>
How can I do this in the HTML? I only want to do this if the displayedColumn 'status' is equal to 'Missing'.
(Typescript)
displayedColumns: string[] = [
'id',
'tradingPartnerTradingPartner',
'fileFormatFileFormat',
'status',
];
you could use the ng-class directive
in your example, using it should be something like this:
(Assuming the mat-chip would get placed into this cell I modified below)
<table mat-table [dataSource]="dataSource" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container *ngIf="{{column}}" matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"
[ngClass]="{missing: element.status=='Missing' }"> {{element[column]}} </td>
</ng-container>
...
and don't forget to create the css for the .missing class we are referencing in the ngClass directive:
.missing {
background-color: #ec9d9d;
color: red
}
As show below code i want to add space after every value in listing in angular. This data are come in table view.
In HTML file
<ng-container matColumnDef="rType">
<th mat-header-cell *matHeaderCellDef > Resource Type </th>
<td mat-cell *matCellDef="let element"> {{element.rType}} </td>
</ng-container>
In ts file
bindTableCol() : void {
if(DNHelper.loginUserData && DNHelper.loginUserData.resourcePreference1 && DNHelper.loginUserData.resourcePreference1.length > 0){
this.displayedColumns = DNHelper.getColumnTable(DNHelper.loginUserData.resourcePreference1);
this.displayedColumns.push('view_more');
this.displayedColumns.push('action');
} else {
this.displayedColumns = ['divisonName', 'categoryName', 'rType', 'resourceStatus', 'view_more', 'action'];
}
}
In Result (These are values)
CRWT1,CRWT2IA,CRWT2,CRWT3,ENG1
Expected Result
CRWT1, CRWT2IA, CRWT2, CRWT3, ENG1
There snap of generated html
To minimize the load on your application, you might also consider creating a pipe.
It could look something like this, as far as usage: <p>{{ element.rType|join:', ' }}</p>.
The transform function would look like this:
#Pipe({
name: 'join'
})
export class JoinPipe implements PipeTransform {
transform(input:Array<any>, sep = ','): string {
return input.join(sep);
}
}
You can try this :
<ng-container matColumnDef="rType">
<th mat-header-cell *matHeaderCellDef > Resource Type </th>
<td mat-cell *matCellDef="let element"> {{element.rType.split(",").join(", ")}} </td>
</ng-container>
Use this code It will help you.
<ng-container matColumnDef="rType">
<th mat-header-cell *matHeaderCellDef > Resource Type </th>
<td mat-cell *matCellDef="let element"> {{element.rType.replaceAll(',',', '}} </td>
</ng-container>
I am trying to sort a mat-table using the mat-sort-header. I am able to do it with common attributes like string or number.
<table #tablaClientes mat-table [dataSource]="dataSource" matSort multiTemplateDataRows>
<!-- Id Column -->
<ng-container matColumnDef="idIngreso">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id Comprobante</th>
<td mat-cell *matCellDef="let row">{{row.idIngreso}}</td>
</ng-container>
<!-- Proveedor Column -->
<ng-container matColumnDef="idProveedor">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre Proveedor</th>
<td mat-cell *matCellDef="let row">{{row.idProveedor.nombre}}</td>
</ng-container>
<!-- Fecha Compra Column -->
<ng-container matColumnDef="fechaCompra">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Compra</th>
<td mat-cell *matCellDef="let row">{{row.fechaCompra}}</td>
</ng-container>
<!-- Fecha Recepcion Column -->
<ng-container matColumnDef="fechaRecepcion">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Recepcion</th>
<td mat-cell *matCellDef="let row">{{row.fechaRecepcion}}</td>
</ng-container>
<!-- Monto Total Column -->
<ng-container matColumnDef="totalIngreso">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Monto Total</th>
<td mat-cell *matCellDef="let row">{{row.totalIngreso |currency}}</td>
</ng-container>
However I can't sort by idProveedor since it's an object.
Thank you very much!
The easer way is add to your dataSource a new property and sort by this new property like this SO (really if you don't need the "idProveedor" object, your dataSource can be transform to some like
this.data.forEach(x=>{
x.proveedorNombre=x.idProveedor.nombre
delete x.idProveedor
}
Another solution is create a sortingDataAccesor
this.dataSource.sortingDataAccessor = (item, property) => {
if (property=="idProveedor")
return item.nombre;
if (property=="idIngreso")
return item.idIngreso
if (property=="fechaCompra")
return item.fechaCompra
...
}
An example simple in this stackblitz
I've followed the Angular docs here https://angular.io/api/common/NgIf to create an NgIf else conditional over my Material Table. It is reading remote JSON file as API.
The API is twitter data and one of the fields I want to run condition on is 'replies'. If there are no replies, I want to replace the "0" with a "-".
I am getting the error
Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" Replies
]*ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}}
"):`
So it seems I cannot run NgIf and interpolate my data in the same element, I've tried all kinds of combinations in the HTML but I am real stuck.
HTML
<ng-container matColumnDef="replies">
<th mat-header-cell *matHeaderCellDef> Replies </th>
<td mat-cell *matCellDef="let hashtags" *ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}} </td>
<ng-template #noReplies>-</ng-template>
</ng-container>
Try
<ng-container matColumnDef="replies">
<th mat-header-cell *matHeaderCellDef> Replies </th>
<ng-container *matCellDef="let hashtags">
<td mat-cell *ngIf="(hashtags.replies>0); else noReplies"> {{hashtags.replies}} </td>
</ng-container>
<ng-template #noReplies>-</ng-template>
</ng-container>
The reason for getting this error is because your can't put 2 structural directives on the same DOM
In your code, you were using *matCellDef and *ngIf on the same <td>.
you can do it this way...... xd
<ng-container matColumnDef="estadoRevision">
<mat-header-cell *matHeaderCellDef mat-sort-header>Revision</mat-header-cell>
<mat-cell *matCellDef="let element">
<td *ngIf="element.a === 0"> ejemplo </td>
<td *ngIf="element.a === 1"> ejemplo </td>
</mat-cell>
</ng-container>
Is there any reason you can't do the conditional directly in the interpolation?
<td mat-cell *matCellDef="let hashtags">{{hashtags.replies > 0 ? hashtag.replies : '-'}}</td>
As it is my first post here, I would like to say hello to everybody so...
Hello everybody :)
I have a problem with angular and html and I cant find a way to solve it.
Lets say I have 2 interfaces:
export interface Product {
name?: string;
price?: number;}
export interface Meal {
name?: string;
products?: Array<Product>;}
I want to create table like this:
meal name | price
pizza | 10
Where 10 is sum of prices of each product in meal.
Now i cannot find a way to sum those prices in html. Is it possible or should I do it in ts file? Or maybe this shoud be done in java backend and asked with rest? Or maybe should I add "totalPrice" to meal class?
This is my table:
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> meal name </th>
<td mat-cell *matCellDef="let element">
{{element.name}}
</td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef> price </th>
<td mat-cell *matCellDef="let element">
//<ng-container *ngFor="let product of element.products">
//{{product.price}}
//</ng-container>
</td>
</ng-container>
You can accomplish this using the Array.reduce() function.
In your template:
<td mat-cell *matCellDef="let element">
{{calculateMealTotal(element.products)}}
</td>
And in the component file:
calculateMealTotal(products: Product[]): number {
return products.reduce((acc, product) => acc + product.price, 0)
}
This will sum up the total value of all of the products.