Angular material data table
-1
Scenario:
- I used angular material data table to show user data.
I need to label those data with red color which will come under this
criteria:
- 100 minutes of outdoor games, or
- 50 minutes of indoor games, or
- a proportionate mix of both, e.g. 75 minutes of indoor and 120 minutes of
outdoor games.
I am able to show whole data through json.
I need how to show those user data red who come under above criteria.
angular angular-material
edited Nov 22 at 13:42
Abhishek Kumar
987216
asked Nov 22 at 10:36
Soumya Bajpai
31
add a comment |
-1
Scenario:
- I used angular material data table to show user data.
I need to label those data with red color which will come under this
criteria:
- 100 minutes of outdoor games, or
- 50 minutes of indoor games, or
- a proportionate mix of both, e.g. 75 minutes of indoor and 120 minutes of
outdoor games.
I am able to show whole data through json.
I need how to show those user data red who come under above criteria.
angular angular-material
edited Nov 22 at 13:42
Abhishek Kumar
987216
asked Nov 22 at 10:36
Soumya Bajpai
31
2
Please, add to your question some relevant code. Can't really help you without knowing what you've done.
– Jacopo Sciampi
Nov 22 at 10:41
export class UserTableComponent implements OnInit { dataSource = new UserDataSource(this.UserService); displayedColumns = ['id', 'name', 'gender', 'birthDate', 'height', 'weight', 'bmi']; constructor(private UserService:UsersService) { } ngOnInit() { } } export class UserDataSource extends DataSource<any> { connect(): Observable<Patient> { return this.userService.getPatient(); } disconnect() { } constructor(private userService: usersService) { super(); } }
– Soumya Bajpai
Nov 22 at 10:58
<div> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>USerId</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.name}}</mat-cell> </ng-container> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>
– Soumya Bajpai
Nov 22 at 11:02
can you please create a demo on Stackblitz
– Abhishek Kumar
Nov 22 at 13:01
add a comment |
-1
-1
-1
Scenario:
- I used angular material data table to show user data.
I need to label those data with red color which will come under this
criteria:
- 100 minutes of outdoor games, or
- 50 minutes of indoor games, or
- a proportionate mix of both, e.g. 75 minutes of indoor and 120 minutes of
outdoor games.
I am able to show whole data through json.
I need how to show those user data red who come under above criteria.
angular angular-material
edited Nov 22 at 13:42
Abhishek Kumar
987216
asked Nov 22 at 10:36
Soumya Bajpai
31
Scenario:
- I used angular material data table to show user data.
I need to label those data with red color which will come under this
criteria:
- 100 minutes of outdoor games, or
- 50 minutes of indoor games, or
- a proportionate mix of both, e.g. 75 minutes of indoor and 120 minutes of
outdoor games.
I am able to show whole data through json.
I need how to show those user data red who come under above criteria.
angular angular-material
angular angular-material
edited Nov 22 at 13:42
Abhishek Kumar
987216
asked Nov 22 at 10:36
Soumya Bajpai
31
edited Nov 22 at 13:42
Abhishek Kumar
987216
asked Nov 22 at 10:36
Soumya Bajpai
31
edited Nov 22 at 13:42
Abhishek Kumar
987216
edited Nov 22 at 13:42
Abhishek Kumar
987216
edited Nov 22 at 13:42
Abhishek Kumar
987216
987216
asked Nov 22 at 10:36
Soumya Bajpai
31
asked Nov 22 at 10:36
Soumya Bajpai
31
asked Nov 22 at 10:36
Soumya Bajpai
31
31
2
Please, add to your question some relevant code. Can't really help you without knowing what you've done.
– Jacopo Sciampi
Nov 22 at 10:41
export class UserTableComponent implements OnInit { dataSource = new UserDataSource(this.UserService); displayedColumns = ['id', 'name', 'gender', 'birthDate', 'height', 'weight', 'bmi']; constructor(private UserService:UsersService) { } ngOnInit() { } } export class UserDataSource extends DataSource<any> { connect(): Observable<Patient> { return this.userService.getPatient(); } disconnect() { } constructor(private userService: usersService) { super(); } }
– Soumya Bajpai
Nov 22 at 10:58
<div> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>USerId</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.name}}</mat-cell> </ng-container> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>
– Soumya Bajpai
Nov 22 at 11:02
can you please create a demo on Stackblitz
– Abhishek Kumar
Nov 22 at 13:01
add a comment |
2
Please, add to your question some relevant code. Can't really help you without knowing what you've done.
– Jacopo Sciampi
Nov 22 at 10:41
export class UserTableComponent implements OnInit { dataSource = new UserDataSource(this.UserService); displayedColumns = ['id', 'name', 'gender', 'birthDate', 'height', 'weight', 'bmi']; constructor(private UserService:UsersService) { } ngOnInit() { } } export class UserDataSource extends DataSource<any> { connect(): Observable<Patient> { return this.userService.getPatient(); } disconnect() { } constructor(private userService: usersService) { super(); } }
– Soumya Bajpai
Nov 22 at 10:58
<div> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>USerId</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.name}}</mat-cell> </ng-container> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>
– Soumya Bajpai
Nov 22 at 11:02
can you please create a demo on Stackblitz
– Abhishek Kumar
Nov 22 at 13:01
2
2
Please, add to your question some relevant code. Can't really help you without knowing what you've done.
– Jacopo Sciampi
Nov 22 at 10:41
Please, add to your question some relevant code. Can't really help you without knowing what you've done.
– Jacopo Sciampi
Nov 22 at 10:41
export class UserTableComponent implements OnInit { dataSource = new UserDataSource(this.UserService); displayedColumns = ['id', 'name', 'gender', 'birthDate', 'height', 'weight', 'bmi']; constructor(private UserService:UsersService) { } ngOnInit() { } } export class UserDataSource extends DataSource<any> { connect(): Observable<Patient> { return this.userService.getPatient(); } disconnect() { } constructor(private userService: usersService) { super(); } }
– Soumya Bajpai
Nov 22 at 10:58
export class UserTableComponent implements OnInit { dataSource = new UserDataSource(this.UserService); displayedColumns = ['id', 'name', 'gender', 'birthDate', 'height', 'weight', 'bmi']; constructor(private UserService:UsersService) { } ngOnInit() { } } export class UserDataSource extends DataSource<any> { connect(): Observable<Patient> { return this.userService.getPatient(); } disconnect() { } constructor(private userService: usersService) { super(); } }
– Soumya Bajpai
Nov 22 at 10:58
<div> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>USerId</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.name}}</mat-cell> </ng-container> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>
– Soumya Bajpai
Nov 22 at 11:02
<div> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>USerId</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.name}}</mat-cell> </ng-container> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>
– Soumya Bajpai
Nov 22 at 11:02
can you please create a demo on Stackblitz
– Abhishek Kumar
Nov 22 at 13:01
can you please create a demo on Stackblitz
– Abhishek Kumar
Nov 22 at 13:01
add a comment |
1 Answer
1
active
oldest
votes
0
Try to add something like this:
[style.background-color]="isCondition ? 'green' : 'red'"
answered Nov 22 at 11:01
Silvester Schn.
387
where to add this condition
– Soumya Bajpai
Nov 22 at 11:04
your condition is the "more than 100 minutes outdoor..." and you could add this into ` <td mat-cell *matCellDef="let element" [style.background-color]="isCondition? 'green' : 'red'"> {{element.position}} </td>` for example. the code of the table is copied from material.angular.io/components/table/examples
– Silvester Schn.
Nov 22 at 11:41
I have an array where userId are there.And then i want to show those rows as red where the user.id is included in my array.const myArr =[1,2,3]; <mat-cell *matCellDef = "let user" [class.red]="myArr.hasOwnProperty(user.id)" style="text-align:center">{{user.id}}</mat-cell>.But here its saying myArr is undefined
– Soumya Bajpai
Nov 23 at 10:16
it would be much easier if you could add a stackblitz example here but anyway. try to wrap your "myArr.hasOwnProperty(user.id)" call into your component.ts component.ts: checkForUser(userid:number){ return arr.hasOwnProperty(userid); } in your html: <tr mat-row [style.background-color]="checkForUser(user.id) ? 'green' : 'white'" *matRowDef="let user; columns: displayedColumns;"></tr>
– Silvester Schn.
Nov 26 at 7:01
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%2f53429024%2fangular-material-data-table%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
Try to add something like this:
[style.background-color]="isCondition ? 'green' : 'red'"
answered Nov 22 at 11:01
Silvester Schn.
387
where to add this condition
– Soumya Bajpai
Nov 22 at 11:04
your condition is the "more than 100 minutes outdoor..." and you could add this into ` <td mat-cell *matCellDef="let element" [style.background-color]="isCondition? 'green' : 'red'"> {{element.position}} </td>` for example. the code of the table is copied from material.angular.io/components/table/examples
– Silvester Schn.
Nov 22 at 11:41
I have an array where userId are there.And then i want to show those rows as red where the user.id is included in my array.const myArr =[1,2,3]; <mat-cell *matCellDef = "let user" [class.red]="myArr.hasOwnProperty(user.id)" style="text-align:center">{{user.id}}</mat-cell>.But here its saying myArr is undefined
– Soumya Bajpai
Nov 23 at 10:16
it would be much easier if you could add a stackblitz example here but anyway. try to wrap your "myArr.hasOwnProperty(user.id)" call into your component.ts component.ts: checkForUser(userid:number){ return arr.hasOwnProperty(userid); } in your html: <tr mat-row [style.background-color]="checkForUser(user.id) ? 'green' : 'white'" *matRowDef="let user; columns: displayedColumns;"></tr>
– Silvester Schn.
Nov 26 at 7:01
add a comment |
0
Try to add something like this:
[style.background-color]="isCondition ? 'green' : 'red'"
answered Nov 22 at 11:01
Silvester Schn.
387
where to add this condition
– Soumya Bajpai
Nov 22 at 11:04
your condition is the "more than 100 minutes outdoor..." and you could add this into ` <td mat-cell *matCellDef="let element" [style.background-color]="isCondition? 'green' : 'red'"> {{element.position}} </td>` for example. the code of the table is copied from material.angular.io/components/table/examples
– Silvester Schn.
Nov 22 at 11:41
I have an array where userId are there.And then i want to show those rows as red where the user.id is included in my array.const myArr =[1,2,3]; <mat-cell *matCellDef = "let user" [class.red]="myArr.hasOwnProperty(user.id)" style="text-align:center">{{user.id}}</mat-cell>.But here its saying myArr is undefined
– Soumya Bajpai
Nov 23 at 10:16
it would be much easier if you could add a stackblitz example here but anyway. try to wrap your "myArr.hasOwnProperty(user.id)" call into your component.ts component.ts: checkForUser(userid:number){ return arr.hasOwnProperty(userid); } in your html: <tr mat-row [style.background-color]="checkForUser(user.id) ? 'green' : 'white'" *matRowDef="let user; columns: displayedColumns;"></tr>
– Silvester Schn.
Nov 26 at 7:01
add a comment |
0
0
0
Try to add something like this:
[style.background-color]="isCondition ? 'green' : 'red'"
answered Nov 22 at 11:01
Silvester Schn.
387
Try to add something like this:
[style.background-color]="isCondition ? 'green' : 'red'"
answered Nov 22 at 11:01
Silvester Schn.
387
edited Nov 22 at 11:42
answered Nov 22 at 11:01
Silvester Schn.
387
answered Nov 22 at 11:01
Silvester Schn.
387
answered Nov 22 at 11:01
Silvester Schn.
387
387
where to add this condition
– Soumya Bajpai
Nov 22 at 11:04
your condition is the "more than 100 minutes outdoor..." and you could add this into ` <td mat-cell *matCellDef="let element" [style.background-color]="isCondition? 'green' : 'red'"> {{element.position}} </td>` for example. the code of the table is copied from material.angular.io/components/table/examples
– Silvester Schn.
Nov 22 at 11:41
I have an array where userId are there.And then i want to show those rows as red where the user.id is included in my array.const myArr =[1,2,3]; <mat-cell *matCellDef = "let user" [class.red]="myArr.hasOwnProperty(user.id)" style="text-align:center">{{user.id}}</mat-cell>.But here its saying myArr is undefined
– Soumya Bajpai
Nov 23 at 10:16
it would be much easier if you could add a stackblitz example here but anyway. try to wrap your "myArr.hasOwnProperty(user.id)" call into your component.ts component.ts: checkForUser(userid:number){ return arr.hasOwnProperty(userid); } in your html: <tr mat-row [style.background-color]="checkForUser(user.id) ? 'green' : 'white'" *matRowDef="let user; columns: displayedColumns;"></tr>
– Silvester Schn.
Nov 26 at 7:01
add a comment |
where to add this condition
– Soumya Bajpai
Nov 22 at 11:04
your condition is the "more than 100 minutes outdoor..." and you could add this into ` <td mat-cell *matCellDef="let element" [style.background-color]="isCondition? 'green' : 'red'"> {{element.position}} </td>` for example. the code of the table is copied from material.angular.io/components/table/examples
– Silvester Schn.
Nov 22 at 11:41
I have an array where userId are there.And then i want to show those rows as red where the user.id is included in my array.const myArr =[1,2,3]; <mat-cell *matCellDef = "let user" [class.red]="myArr.hasOwnProperty(user.id)" style="text-align:center">{{user.id}}</mat-cell>.But here its saying myArr is undefined
– Soumya Bajpai
Nov 23 at 10:16
it would be much easier if you could add a stackblitz example here but anyway. try to wrap your "myArr.hasOwnProperty(user.id)" call into your component.ts component.ts: checkForUser(userid:number){ return arr.hasOwnProperty(userid); } in your html: <tr mat-row [style.background-color]="checkForUser(user.id) ? 'green' : 'white'" *matRowDef="let user; columns: displayedColumns;"></tr>
– Silvester Schn.
Nov 26 at 7:01
where to add this condition
– Soumya Bajpai
Nov 22 at 11:04
where to add this condition
– Soumya Bajpai
Nov 22 at 11:04
your condition is the "more than 100 minutes outdoor..." and you could add this into ` <td mat-cell *matCellDef="let element" [style.background-color]="isCondition? 'green' : 'red'"> {{element.position}} </td>` for example. the code of the table is copied from material.angular.io/components/table/examples
– Silvester Schn.
Nov 22 at 11:41
your condition is the "more than 100 minutes outdoor..." and you could add this into ` <td mat-cell *matCellDef="let element" [style.background-color]="isCondition? 'green' : 'red'"> {{element.position}} </td>` for example. the code of the table is copied from material.angular.io/components/table/examples
– Silvester Schn.
Nov 22 at 11:41
I have an array where userId are there.And then i want to show those rows as red where the user.id is included in my array.const myArr =[1,2,3]; <mat-cell *matCellDef = "let user" [class.red]="myArr.hasOwnProperty(user.id)" style="text-align:center">{{user.id}}</mat-cell>.But here its saying myArr is undefined
– Soumya Bajpai
Nov 23 at 10:16
I have an array where userId are there.And then i want to show those rows as red where the user.id is included in my array.const myArr =[1,2,3]; <mat-cell *matCellDef = "let user" [class.red]="myArr.hasOwnProperty(user.id)" style="text-align:center">{{user.id}}</mat-cell>.But here its saying myArr is undefined
– Soumya Bajpai
Nov 23 at 10:16
it would be much easier if you could add a stackblitz example here but anyway. try to wrap your "myArr.hasOwnProperty(user.id)" call into your component.ts component.ts: checkForUser(userid:number){ return arr.hasOwnProperty(userid); } in your html: <tr mat-row [style.background-color]="checkForUser(user.id) ? 'green' : 'white'" *matRowDef="let user; columns: displayedColumns;"></tr>
– Silvester Schn.
Nov 26 at 7:01
it would be much easier if you could add a stackblitz example here but anyway. try to wrap your "myArr.hasOwnProperty(user.id)" call into your component.ts component.ts: checkForUser(userid:number){ return arr.hasOwnProperty(userid); } in your html: <tr mat-row [style.background-color]="checkForUser(user.id) ? 'green' : 'white'" *matRowDef="let user; columns: displayedColumns;"></tr>
– Silvester Schn.
Nov 26 at 7:01
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53429024%2fangular-material-data-table%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
2
Please, add to your question some relevant code. Can't really help you without knowing what you've done.
– Jacopo Sciampi
Nov 22 at 10:41
export class UserTableComponent implements OnInit { dataSource = new UserDataSource(this.UserService); displayedColumns = ['id', 'name', 'gender', 'birthDate', 'height', 'weight', 'bmi']; constructor(private UserService:UsersService) { } ngOnInit() { } } export class UserDataSource extends DataSource<any> { connect(): Observable<Patient> { return this.userService.getPatient(); } disconnect() { } constructor(private userService: usersService) { super(); } }
– Soumya Bajpai
Nov 22 at 10:58
<div> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef>USerId</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.id}}</mat-cell> </ng-container> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef = "let user">{{user.name}}</mat-cell> </ng-container> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>
– Soumya Bajpai
Nov 22 at 11:02
can you please create a demo on Stackblitz
– Abhishek Kumar
Nov 22 at 13:01