I've got this:
Array of objects:
users : User [];
average = 5;
compareValue (value){
...}
And im printing a table: like this:
<table mat-table [dataSource]="users">
<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef >Name</th>
<td mat-cell *matCellDef="let element" > {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="num_aval">
<th mat-header-cell *matHeaderCellDef >Number of Works</th>
<td mat-cell *matCellDef="let element"> {{element.works.length}} </td>
</ng-container>
<ng-container matColumnDef="comparaMedia">
<th mat-header-cell *matHeaderCellDef >Stats</th>
<td *matCellDef="let element" > HELP HERE </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
What I wanna do is the following:
I wanna grab the number of works from an user, compare with the value average (with the function compareValue), and if the value is under some value, color the cell with blue; if it's above, color the cell with red.
I have no ideia how to do it. Some help?
You can add a class conditionally to your td as
<td mat-cell *matCellDef="let element" [class.red]="element.works.length > average"> {{element.works.length}} </td>
And add styles to your component as
td {
background-color: blue; /* the default color is blue for the cells */
}
td.red {
background-color: red; /* more specific style to override color to red */
}
I assume compareValue func returns true if value in cell is higher than average and false when it isn't, so I would use
and than use it to setting background color for number of works value cell
<td mat-cell *matCellDef="let element"
[style.background-color]="compareValue(element.works.length) ? 'blue' : 'red'">
{{element.works.length}}
</td>
Related
in my code I get an image of the API (row. fotoPessoa), if I don't have an image I put another one in place ([src] = "imgPessoa"). How to do this?
<ng-container matColumnDef="fotoIndividuo">
<th mat-header-cell *matHeaderCellDef > Foto </th>
<td mat-cell *matCellDef="let row" data-label="Foto: " >
<img [src]="imgPessoa" >
{{row.fotoPessoa}}
</td>
</ng-container>
I have a mat-toggle as a column in Mat-table.I am changing values on toggle on/off. However the issue is if I change the value then the value changes for all the rows. I want to do it only for the particular row. How can I do it.
HTML Code:
<ng-container matColumnDef="active">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Reschedule</th>
<td mat-cell *matCellDef="let element">
<mat-slide-toggle (change)="setMessage($event)">{{
message
}}</mat-slide-toggle>
</td>
</ng-container>
Typescript Code:
// Toggle Button Code
message = 'Disabled!';
setMessage(e) {
if (e.checked) {
this.message = 'Running';
} else {
this.message = 'Disabled!';
}
}
You need a property for every row to bind your toggle state to.
E.g.:
Component data:
....
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', activate: true, role: '1' },
...
Template:
...
<!-- toggle olumn -->
<ng-container matColumnDef="toggle">
<th mat-header-cell *matHeaderCellDef> toggle </th>
<td mat-cell *matCellDef="let element" >
<mat-slide-toggle [checked]="element.activate" (change)="updateActiveStatus(element)"></mat-slide-toggle>
</td>
</ng-container>
...
Check this Stackblitz for a working version.
i have data in in a td similar to
Sugar:5;Onion:3;Carrot:9;Bread:9;
where i want to display like,
Sugar:5
Onion:3
Carrot:9
Bread:9
Inside a td in a table.
im trying to implement using angular material table
i have reached only this much, want to achieve like the above image for Items column
code:
html file
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="orderId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> orderId </th>
<td mat-cell *matCellDef="let element"> {{element.orderId}} </td>
</ng-container>
<ng-container matColumnDef="customerId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> customerId </th>
<td mat-cell *matCellDef="let element"> {{element.customerId}} </td>
</ng-container>
<ng-container matColumnDef="deliveryPincode">
<th mat-header-cell *matHeaderCellDef mat-sort-header> deliveryPincode </th>
<td mat-cell *matCellDef="let element"> {{element.deliveryPincode}} </td>
</ng-container>
<ng-container matColumnDef="orderDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> orderDate </th>
<td mat-cell *matCellDef="let element"> {{element.orderDate}} </td>
</ng-container>
<ng-container matColumnDef="items">
<th mat-header-cell *matHeaderCellDef mat-sort-header> items </th>
<td mat-cell *matCellDef="let element"> {{element.items}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
Upload
typescriptfile
import {MatSort} from '#angular/material/sort';
import {MatTableDataSource} from '#angular/material/table';
import * as XLSX from 'xlsx';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'antstack-problem';
arrayBuffer:any;
file:File;
displayedColumns: string[] = ['orderId', 'customerId', 'deliveryPincode','orderDate', 'items' ];
dataSource = new MatTableDataSource();
#ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() {
this.dataSource.sort = this.sort;
}
incomingfile(event) {
this.file= event.target.files[0];
}
Upload() {
let fileReader = new FileReader();
fileReader.onload = (e) => {
this.arrayBuffer = fileReader.result;
var data = new Uint8Array(this.arrayBuffer);
var arr = new Array();
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, {type:"binary"});
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
this.dataSource = new MatTableDataSource(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
this.dataSource.sort = this.sort;
console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
}
fileReader.readAsArrayBuffer(this.file);
}
}
I would go for a Map() and ngFor, which gives you some stuff like this:
<ul>
<li *ngFor="let recipient of map | keyvalue">
{{recipient.key}} --> {{recipient.value}}
</li>
</ul>
https://stackblitz.com/edit/angular-map-keyvalue
(seen here)
You can wrap the items in the p tag. This will also break this in the next line.
I have such issue I need to extract data from:
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> Title </th>
<td mat-cell *matCellDef="let row"><div id="{{'make_editable' + row.title}}">{{row.title}}</div></td>
</ng-container>
...
<ng-container matColumnDef="buttonEdit">
<th mat-header-cell *matHeaderCellDef> buttonEdit </th>
<td mat-cell *matCellDef="let row"><button (click)="makeEditable(row.title)" class="mat-raised-button" form="myform">Edit</button></td>
/ng-container>
makeEditable(title){
console.log(this.checkOutForm.value.title);
let id:string="make_editable"+title;
if(this.toggleEdit()){
document.getElementById(id).innerHTML = `<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"><input type="text" value="${title}"></form>`;
}
else {
document.getElementById(id).innerHTML = title;
console.log(this.checkOutForm.controls.title.value);
}
The button is outside the function. If edit button is clicked then input wraps data and make it active. I need to do it without refreshing all page.The button Edit is outside of the form
You could create on the type, that the rows have, a boolean property - isEdited.
makeEditable(title) would find the correct row and toggle its isEdited value. It would also set:
checkOutForm.setValue({title: title});
(if isEdited was set to true).
In the template you would wrap the whole block in
<form id="myform" (ng-submit)="extractFormValues()" [formGroup]="checkOutForm"</form>
and change the td for a title:
<td mat-cell *matCellDef="let row">
<div *ngIf="!row.isEdited">{{row.title}}</div>
<input *ngIf="row.isEdited" type="text" formControlName="title">
</td>
This only works if just one row is edited at once.
my previous question was not clear. Allow me to ask again clearly as I'm struggling complete my task.
I've mat-table along with checkbox for every row. (No master checkbox). whenever I select the row I should send the values of the selected row to button which is outside of the table.
[if I have a button inside the table, I could do that by accessing the default ELEMENT from *matCellDef="let element" variable if the button present inside the table.
But I don't know how to pass the selected row value to the button. I've to do routing based on the value from the selected row.
so far I've.
HTML
<div><button mat-button [disabled]="!checkedbtn" (click)='linktomynxtpage()'>link to another page</button></div>
<table #demoTable mat-table [dataSource]="sample" multiTemplateDataRows>
// some ng-container with <th><td>
<ng-container *ngIf="isAdmin" matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element">
<mat-checkbox class="select-checkbox" [(ngModel)]="checkedbtn" ></mat-checkbox>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row style="text-align:left" *matRowDef="let element; columns: displayedColumns;" ></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
</table>
TS
linktomynxtpage(){
//some logics
//passing row value. and doing routing
this.nxtPage.navigate(['/home/particular-user'])
}
use the (change) event
<mat-checkbox class="select-checkbox" [(ngModel)]="checkedbtn" (change)="onChange(element)" ></mat-checkbox>
onChange(row){
// put the row whenever you want
}