Mixing
How to highlight a column for 500ms when it's data changes. Need to highlight it green/red based on whether...
0
I've included angular material table in my new project and want the table to keep track of each column's data when it changes. If the data value is increased then flash the column in green color and if decreased then in red color for say 500ms and then return to normal state.
I've tried doing that with keeping track of the last data in my code itself but it is not looking an optimized solution. Whether some directive or any material functionality can help me in that?
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
<ng-container matColumnDef="valueA">
<mat-header-cell class="text-text" *matHeaderCellDef> valueA </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueA']}} </mat-cell>
</ng-container>
<ng-container matColumnDef="valueB">
<mat-header-cell class="text-text" *matHeaderCellDef> valueB </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueB']}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns" class="bg-table-odd-row"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" [ngClass]="{'bg-table-even-row': i%2 == 0, 'bg-table-odd-row': i%2 != 0}"></mat-row>
TS
import { Component, ViewEncapsulation, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
@Component({
selector: 'my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.styl'],
encapsulation: ViewEncapsulation.None
})
export class MyTableComponent {
displayedColumns = ['time', 'valueA', 'valueB'];
dataSource: MatTableDataSource<any>;
private tableData: any = ;
@Input()
set data(value) {
if(value) {
this.tableData = [...value];
this.refresh();
}
};
constructor() {
this.dataSource = new MatTableDataSource(this.tableData);
}
private refresh() {
this.dataSource.data = this.tableData;
}
}
rxjs angular6 angular-material2
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
add a comment |
0
I've included angular material table in my new project and want the table to keep track of each column's data when it changes. If the data value is increased then flash the column in green color and if decreased then in red color for say 500ms and then return to normal state.
I've tried doing that with keeping track of the last data in my code itself but it is not looking an optimized solution. Whether some directive or any material functionality can help me in that?
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
<ng-container matColumnDef="valueA">
<mat-header-cell class="text-text" *matHeaderCellDef> valueA </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueA']}} </mat-cell>
</ng-container>
<ng-container matColumnDef="valueB">
<mat-header-cell class="text-text" *matHeaderCellDef> valueB </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueB']}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns" class="bg-table-odd-row"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" [ngClass]="{'bg-table-even-row': i%2 == 0, 'bg-table-odd-row': i%2 != 0}"></mat-row>
TS
import { Component, ViewEncapsulation, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
@Component({
selector: 'my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.styl'],
encapsulation: ViewEncapsulation.None
})
export class MyTableComponent {
displayedColumns = ['time', 'valueA', 'valueB'];
dataSource: MatTableDataSource<any>;
private tableData: any = ;
@Input()
set data(value) {
if(value) {
this.tableData = [...value];
this.refresh();
}
};
constructor() {
this.dataSource = new MatTableDataSource(this.tableData);
}
private refresh() {
this.dataSource.data = this.tableData;
}
}
rxjs angular6 angular-material2
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
please show some code
– Fan Cheung
Jan 2 at 5:24
@FanCheung I've added the code. Please check this.
– Harsh Mathur
Jan 2 at 5:38
add a comment |
0
0
0
I've included angular material table in my new project and want the table to keep track of each column's data when it changes. If the data value is increased then flash the column in green color and if decreased then in red color for say 500ms and then return to normal state.
I've tried doing that with keeping track of the last data in my code itself but it is not looking an optimized solution. Whether some directive or any material functionality can help me in that?
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
<ng-container matColumnDef="valueA">
<mat-header-cell class="text-text" *matHeaderCellDef> valueA </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueA']}} </mat-cell>
</ng-container>
<ng-container matColumnDef="valueB">
<mat-header-cell class="text-text" *matHeaderCellDef> valueB </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueB']}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns" class="bg-table-odd-row"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" [ngClass]="{'bg-table-even-row': i%2 == 0, 'bg-table-odd-row': i%2 != 0}"></mat-row>
TS
import { Component, ViewEncapsulation, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
@Component({
selector: 'my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.styl'],
encapsulation: ViewEncapsulation.None
})
export class MyTableComponent {
displayedColumns = ['time', 'valueA', 'valueB'];
dataSource: MatTableDataSource<any>;
private tableData: any = ;
@Input()
set data(value) {
if(value) {
this.tableData = [...value];
this.refresh();
}
};
constructor() {
this.dataSource = new MatTableDataSource(this.tableData);
}
private refresh() {
this.dataSource.data = this.tableData;
}
}
rxjs angular6 angular-material2
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
I've included angular material table in my new project and want the table to keep track of each column's data when it changes. If the data value is increased then flash the column in green color and if decreased then in red color for say 500ms and then return to normal state.
I've tried doing that with keeping track of the last data in my code itself but it is not looking an optimized solution. Whether some directive or any material functionality can help me in that?
HTML
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
<ng-container matColumnDef="valueA">
<mat-header-cell class="text-text" *matHeaderCellDef> valueA </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueA']}} </mat-cell>
</ng-container>
<ng-container matColumnDef="valueB">
<mat-header-cell class="text-text" *matHeaderCellDef> valueB </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> {{row['valueB']}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns" class="bg-table-odd-row"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" [ngClass]="{'bg-table-even-row': i%2 == 0, 'bg-table-odd-row': i%2 != 0}"></mat-row>
TS
import { Component, ViewEncapsulation, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
@Component({
selector: 'my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.styl'],
encapsulation: ViewEncapsulation.None
})
export class MyTableComponent {
displayedColumns = ['time', 'valueA', 'valueB'];
dataSource: MatTableDataSource<any>;
private tableData: any = ;
@Input()
set data(value) {
if(value) {
this.tableData = [...value];
this.refresh();
}
};
constructor() {
this.dataSource = new MatTableDataSource(this.tableData);
}
private refresh() {
this.dataSource.data = this.tableData;
}
}
rxjs angular6 angular-material2
rxjs angular6 angular-material2
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
edited Jan 2 at 5:37
Harsh Mathur
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
asked Jan 2 at 4:24
Harsh MathurHarsh Mathur
193
193
please show some code
– Fan Cheung
Jan 2 at 5:24
@FanCheung I've added the code. Please check this.
– Harsh Mathur
Jan 2 at 5:38
add a comment |
please show some code
– Fan Cheung
Jan 2 at 5:24
@FanCheung I've added the code. Please check this.
– Harsh Mathur
Jan 2 at 5:38
please show some code
– Fan Cheung
Jan 2 at 5:24
please show some code
– Fan Cheung
Jan 2 at 5:24
@FanCheung I've added the code. Please check this.
– Harsh Mathur
Jan 2 at 5:38
@FanCheung I've added the code. Please check this.
– Harsh Mathur
Jan 2 at 5:38
add a comment |
1 Answer
1
active
oldest
votes
0
You can start with the data setter and hook your logic there
@Input()
set data(value) {
if(value) {
const newData=[...value];
this.tableData = [...value];
this.refresh();
this.flashClass=''
if(this.tableData.length>newData.length)
this.flashClass='green-flash'
if(this.tableData.length>newData.length)
this.flashClass='red-flash'
}
};
apply the class to your html
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time" [ngClass]="flashClass">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
animations css
.green-flash {
-webkit-animation-name: flash-animation;
-webkit-animation-duration: 0.3s;
animation-name: flash-animation;
animation-duration: 0.3s;
}
@keyframes flash-animation {
from { background: none; }
to { background: green; }
}
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001181%2fhow-to-highlight-a-column-for-500ms-when-its-data-changes-need-to-highlight-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can start with the data setter and hook your logic there
@Input()
set data(value) {
if(value) {
const newData=[...value];
this.tableData = [...value];
this.refresh();
this.flashClass=''
if(this.tableData.length>newData.length)
this.flashClass='green-flash'
if(this.tableData.length>newData.length)
this.flashClass='red-flash'
}
};
apply the class to your html
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time" [ngClass]="flashClass">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
animations css
.green-flash {
-webkit-animation-name: flash-animation;
-webkit-animation-duration: 0.3s;
animation-name: flash-animation;
animation-duration: 0.3s;
}
@keyframes flash-animation {
from { background: none; }
to { background: green; }
}
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
add a comment |
0
You can start with the data setter and hook your logic there
@Input()
set data(value) {
if(value) {
const newData=[...value];
this.tableData = [...value];
this.refresh();
this.flashClass=''
if(this.tableData.length>newData.length)
this.flashClass='green-flash'
if(this.tableData.length>newData.length)
this.flashClass='red-flash'
}
};
apply the class to your html
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time" [ngClass]="flashClass">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
animations css
.green-flash {
-webkit-animation-name: flash-animation;
-webkit-animation-duration: 0.3s;
animation-name: flash-animation;
animation-duration: 0.3s;
}
@keyframes flash-animation {
from { background: none; }
to { background: green; }
}
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
add a comment |
0
0
0
You can start with the data setter and hook your logic there
@Input()
set data(value) {
if(value) {
const newData=[...value];
this.tableData = [...value];
this.refresh();
this.flashClass=''
if(this.tableData.length>newData.length)
this.flashClass='green-flash'
if(this.tableData.length>newData.length)
this.flashClass='red-flash'
}
};
apply the class to your html
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time" [ngClass]="flashClass">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
animations css
.green-flash {
-webkit-animation-name: flash-animation;
-webkit-animation-duration: 0.3s;
animation-name: flash-animation;
animation-duration: 0.3s;
}
@keyframes flash-animation {
from { background: none; }
to { background: green; }
}
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
You can start with the data setter and hook your logic there
@Input()
set data(value) {
if(value) {
const newData=[...value];
this.tableData = [...value];
this.refresh();
this.flashClass=''
if(this.tableData.length>newData.length)
this.flashClass='green-flash'
if(this.tableData.length>newData.length)
this.flashClass='red-flash'
}
};
apply the class to your html
<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="time" [ngClass]="flashClass">
<mat-header-cell class="text-text" *matHeaderCellDef> </mat-header-cell>
<mat-cell class="text-text" *matCellDef="let row"> <b>{{row['time']}}</b> </mat-cell>
</ng-container>
animations css
.green-flash {
-webkit-animation-name: flash-animation;
-webkit-animation-duration: 0.3s;
animation-name: flash-animation;
animation-duration: 0.3s;
}
@keyframes flash-animation {
from { background: none; }
to { background: green; }
}
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
answered Jan 2 at 5:52
Fan CheungFan Cheung
2,9121419
2,9121419
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001181%2fhow-to-highlight-a-column-for-500ms-when-its-data-changes-need-to-highlight-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
please show some code
– Fan Cheung
Jan 2 at 5:24
@FanCheung I've added the code. Please check this.
– Harsh Mathur
Jan 2 at 5:38