Angular Material - Change color of mat-list-option on selected
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this: 
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
angular angular-material angular2-template angular-material2 angular2-material
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
add a comment |
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this:
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
angular angular-material angular2-template angular-material2 angular2-material
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
add a comment |
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this:
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
angular angular-material angular2-template angular-material2 angular2-material
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
How can I change the color of selected option of mat-list-option?
Right now I have something like this:
Current list
I want to change the color of whole option or card 'on select' to green. Something like this:
My code is like this:
<mat-selection-list #list>
<mat-list-option *ngFor="let yuvak of yuvaks">
{yuvak.name}
{yuvak.phonenumber}
</mat-list-option>
</mat-selection-list>
angular angular-material angular2-template angular-material2 angular2-material
angular angular-material angular2-template angular-material2 angular2-material
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
edited Nov 23 '18 at 7:49
Steffi Keran Rani J
8582828
8582828
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
asked Nov 22 '18 at 23:09
Tanmay Parmar
74110
74110
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
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
});
}
});
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%2f53438937%2fangular-material-change-color-of-mat-list-option-on-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
Stackblitz Working Demo
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
answered Nov 23 '18 at 6:46
Abhishek Kumar
1,020216
1,020216
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
I haven't implemented but from the demo i think this will work. However, Where can i find the documentation for the attribute likes aria-selected?.
– Tanmay Parmar
Nov 23 '18 at 17:51
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
please search the net, because i looked for the dom changes whenever i checked the mat-list-option and found that this attribute was triggered, so i went ahead with the attribute to style mat-list-option tag.
– Abhishek Kumar
Nov 23 '18 at 17:54
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
@TanmayParmar please upvote the answer as well, its helpful for users looking for answers.
– Abhishek Kumar
Nov 24 '18 at 7:23
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
Drop Down:
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need.
.mat-option.mat-active {
background: blue !important;
}
.mat-option.mat-selected {
background: red !important;
}
Working Demo
Selection List:
The selection list has aria-selected attribute and by default it is false. It changes to true if you select the item. All you need is to set CSS as below:
.mat-list-option[aria-selected="true"] {
background: rgba(200, 210, 90, 0.7);
}
Working Demo
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
edited Nov 23 '18 at 13:44
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
answered Nov 22 '18 at 23:56
Maihan Nijat
2,54722344
2,54722344
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
i am using selection list. this is dropdown.
– Tanmay Parmar
Nov 23 '18 at 4:07
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
@TanmayParmar Edit my answer for selection list.
– Maihan Nijat
Nov 23 '18 at 13:44
add a comment |
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.
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%2f53438937%2fangular-material-change-color-of-mat-list-option-on-selected%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
