how to change particular array element background color in angular 6

below is my HTML code, I want to change the NameList array color while clicking on that particular array index, example if I click on NameList[1]
only that element background color change to green, again if I click NameList[2] then NameList[1] background change to white and nameList[2] change to green , how to fix this in angular 6.

 

 <div>

 <ul *ngFor="let name of NameList">

      <tr>

         <td class=""  (click)="nameDetail(name)">{{name}}</td>

        </tr>

  </ul>

  </div>

edited Jan 1 at 6:51

Sumithran

8193822

asked Jan 1 at 5:59

xyz

124

add a comment |

 

 <div>

 <ul *ngFor="let name of NameList">

      <tr>

         <td class=""  (click)="nameDetail(name)">{{name}}</td>

        </tr>

  </ul>

  </div>

edited Jan 1 at 6:51

Sumithran

8193822

asked Jan 1 at 5:59

xyz

124

add a comment |

 

 <div>

 <ul *ngFor="let name of NameList">

      <tr>

         <td class=""  (click)="nameDetail(name)">{{name}}</td>

        </tr>

  </ul>

  </div>

edited Jan 1 at 6:51

Sumithran

8193822

asked Jan 1 at 5:59

xyz

124

 

 <div>

 <ul *ngFor="let name of NameList">

      <tr>

         <td class=""  (click)="nameDetail(name)">{{name}}</td>

        </tr>

  </ul>

  </div>

 

 <div>

 <ul *ngFor="let name of NameList">

      <tr>

         <td class=""  (click)="nameDetail(name)">{{name}}</td>

        </tr>

  </ul>

  </div>

 

 <div>

 <ul *ngFor="let name of NameList">

      <tr>

         <td class=""  (click)="nameDetail(name)">{{name}}</td>

        </tr>

  </ul>

  </div>

html angular typescript

edited Jan 1 at 6:51

Sumithran

8193822

asked Jan 1 at 5:59

xyz

124

edited Jan 1 at 6:51

Sumithran

8193822

asked Jan 1 at 5:59

xyz

124

edited Jan 1 at 6:51

Sumithran

8193822

edited Jan 1 at 6:51

Sumithran

8193822

edited Jan 1 at 6:51

Sumithran

8193822

asked Jan 1 at 5:59

xyz

124

asked Jan 1 at 5:59

xyz

124

asked Jan 1 at 5:59

xyz

124

add a comment |

4 Answers
4

active

oldest

votes

You can conditionally use NgClass Here's the reference link https://angular.io/api/common/NgClass

answered Jan 1 at 6:07

Ritik Patni

2116

add a comment |

you can use ngClass as suggested by Ritik or you can use ngStyle

[ngClass]="{'changeColor': name.active}"



[ngStyle]="{'background': name.active ? 'green':'white'}"

here is a link of working demo

answered Jan 1 at 6:23

Farhat Zaman

591311

I want to change just an normal array element color , example NameList=[User1,User2,User3,user4]; without using array object

– xyz
Jan 1 at 9:07

did you check the demo? I think as per your question, this is fulfilling your requirements but still you think this is not fulfilling your requirements then I am unable to understand what exactly you want to do.

– Farhat Zaman
Jan 1 at 9:14

you are inserting an object inside the array, it works only for key value elements(json object) , but i need normal elements like array=[1,2,3]. anyhow it is also useful for json objects thanks

– xyz
Jan 2 at 5:56

oooh sorry, my bad. got your point.

– Farhat Zaman
Jan 2 at 5:59

add a comment |

You can use conditional based CSS using ngClass

<div [className]="condition ? 'example-class' : 'other-class'"></div>





<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">..

</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Let me know if you still not able to change background color.

answered Jan 1 at 6:32

jatin.7744

1675

add a comment |

//html code



<td (click)="select(name)"

 [class.highlight]="isSelected(name)"

>{{name}}</td>



//Ts code

selectedName = '';



select(name){

    this.selectedName = name;

}



isSelected(name){

    return this.selectedName === name;

}

//css code

.highlight{

  background: #42A948; /* green */

}

answered Jan 1 at 7:04

Ajay Barokar

762

It is working to me, Thank you

– xyz
Jan 1 at 9:19

@Ajay can you please explain about [class.highlight]. because something new for me, and I am curious to know more about this. thanks and also please provide an example link if it is possible for you.

– Farhat Zaman
Jan 1 at 11:22

1

@FarhatZaman please go through this link angular.io/guide/template-syntax#class-binding

– Ajay Barokar
Jan 4 at 8:19

thanks, mate. it was really helpful.

– Farhat Zaman
Jan 4 at 9:55

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993331%2fhow-to-change-particular-array-element-background-color-in-angular-6%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

You can conditionally use NgClass Here's the reference link https://angular.io/api/common/NgClass

answered Jan 1 at 6:07

Ritik Patni

2116

add a comment |

You can conditionally use NgClass Here's the reference link https://angular.io/api/common/NgClass

answered Jan 1 at 6:07

Ritik Patni

2116

add a comment |

You can conditionally use NgClass Here's the reference link https://angular.io/api/common/NgClass

answered Jan 1 at 6:07

Ritik Patni

2116

You can conditionally use NgClass Here's the reference link https://angular.io/api/common/NgClass

answered Jan 1 at 6:07

Ritik Patni

2116

answered Jan 1 at 6:07

Ritik Patni

2116

answered Jan 1 at 6:07

Ritik Patni

2116

answered Jan 1 at 6:07

Ritik Patni

2116

add a comment |

you can use ngClass as suggested by Ritik or you can use ngStyle

[ngClass]="{'changeColor': name.active}"



[ngStyle]="{'background': name.active ? 'green':'white'}"

here is a link of working demo

answered Jan 1 at 6:23

Farhat Zaman

591311

I want to change just an normal array element color , example NameList=[User1,User2,User3,user4]; without using array object

– xyz
Jan 1 at 9:07

did you check the demo? I think as per your question, this is fulfilling your requirements but still you think this is not fulfilling your requirements then I am unable to understand what exactly you want to do.

– Farhat Zaman
Jan 1 at 9:14

you are inserting an object inside the array, it works only for key value elements(json object) , but i need normal elements like array=[1,2,3]. anyhow it is also useful for json objects thanks

– xyz
Jan 2 at 5:56

oooh sorry, my bad. got your point.

– Farhat Zaman
Jan 2 at 5:59

add a comment |

you can use ngClass as suggested by Ritik or you can use ngStyle

[ngClass]="{'changeColor': name.active}"



[ngStyle]="{'background': name.active ? 'green':'white'}"

here is a link of working demo

answered Jan 1 at 6:23

Farhat Zaman

591311

I want to change just an normal array element color , example NameList=[User1,User2,User3,user4]; without using array object

– xyz
Jan 1 at 9:07

did you check the demo? I think as per your question, this is fulfilling your requirements but still you think this is not fulfilling your requirements then I am unable to understand what exactly you want to do.

– Farhat Zaman
Jan 1 at 9:14

you are inserting an object inside the array, it works only for key value elements(json object) , but i need normal elements like array=[1,2,3]. anyhow it is also useful for json objects thanks

– xyz
Jan 2 at 5:56

oooh sorry, my bad. got your point.

– Farhat Zaman
Jan 2 at 5:59

add a comment |

you can use ngClass as suggested by Ritik or you can use ngStyle

[ngClass]="{'changeColor': name.active}"



[ngStyle]="{'background': name.active ? 'green':'white'}"

here is a link of working demo

answered Jan 1 at 6:23

Farhat Zaman

591311

you can use ngClass as suggested by Ritik or you can use ngStyle

[ngClass]="{'changeColor': name.active}"



[ngStyle]="{'background': name.active ? 'green':'white'}"

here is a link of working demo

answered Jan 1 at 6:23

Farhat Zaman

591311

answered Jan 1 at 6:23

Farhat Zaman

591311

answered Jan 1 at 6:23

Farhat Zaman

591311

answered Jan 1 at 6:23

Farhat Zaman

591311

I want to change just an normal array element color , example NameList=[User1,User2,User3,user4]; without using array object

– xyz
Jan 1 at 9:07

did you check the demo? I think as per your question, this is fulfilling your requirements but still you think this is not fulfilling your requirements then I am unable to understand what exactly you want to do.

– Farhat Zaman
Jan 1 at 9:14

you are inserting an object inside the array, it works only for key value elements(json object) , but i need normal elements like array=[1,2,3]. anyhow it is also useful for json objects thanks

– xyz
Jan 2 at 5:56

oooh sorry, my bad. got your point.

– Farhat Zaman
Jan 2 at 5:59

add a comment |

I want to change just an normal array element color , example NameList=[User1,User2,User3,user4]; without using array object

– xyz
Jan 1 at 9:07

did you check the demo? I think as per your question, this is fulfilling your requirements but still you think this is not fulfilling your requirements then I am unable to understand what exactly you want to do.

– Farhat Zaman
Jan 1 at 9:14

you are inserting an object inside the array, it works only for key value elements(json object) , but i need normal elements like array=[1,2,3]. anyhow it is also useful for json objects thanks

– xyz
Jan 2 at 5:56

oooh sorry, my bad. got your point.

– Farhat Zaman
Jan 2 at 5:59

I want to change just an normal array element color , example NameList=[User1,User2,User3,user4]; without using array object

– xyz
Jan 1 at 9:07

did you check the demo? I think as per your question, this is fulfilling your requirements but still you think this is not fulfilling your requirements then I am unable to understand what exactly you want to do.

– Farhat Zaman
Jan 1 at 9:14

you are inserting an object inside the array, it works only for key value elements(json object) , but i need normal elements like array=[1,2,3]. anyhow it is also useful for json objects thanks

– xyz
Jan 2 at 5:56

oooh sorry, my bad. got your point.

– Farhat Zaman
Jan 2 at 5:59

add a comment |

You can use conditional based CSS using ngClass

<div [className]="condition ? 'example-class' : 'other-class'"></div>





<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">..

</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Let me know if you still not able to change background color.

answered Jan 1 at 6:32

jatin.7744

1675

add a comment |

You can use conditional based CSS using ngClass

<div [className]="condition ? 'example-class' : 'other-class'"></div>





<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">..

</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Let me know if you still not able to change background color.

answered Jan 1 at 6:32

jatin.7744

1675

add a comment |

You can use conditional based CSS using ngClass

<div [className]="condition ? 'example-class' : 'other-class'"></div>





<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">..

</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Let me know if you still not able to change background color.

answered Jan 1 at 6:32

jatin.7744

1675

You can use conditional based CSS using ngClass

<div [className]="condition ? 'example-class' : 'other-class'"></div>





<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">..

</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Let me know if you still not able to change background color.

answered Jan 1 at 6:32

jatin.7744

1675

answered Jan 1 at 6:32

jatin.7744

1675

answered Jan 1 at 6:32

jatin.7744

1675

answered Jan 1 at 6:32

jatin.7744

1675

add a comment |

//html code



<td (click)="select(name)"

 [class.highlight]="isSelected(name)"

>{{name}}</td>



//Ts code

selectedName = '';



select(name){

    this.selectedName = name;

}



isSelected(name){

    return this.selectedName === name;

}

//css code

.highlight{

  background: #42A948; /* green */

}

answered Jan 1 at 7:04

Ajay Barokar

762

It is working to me, Thank you

– xyz
Jan 1 at 9:19

@Ajay can you please explain about [class.highlight]. because something new for me, and I am curious to know more about this. thanks and also please provide an example link if it is possible for you.

– Farhat Zaman
Jan 1 at 11:22

1

@FarhatZaman please go through this link angular.io/guide/template-syntax#class-binding

– Ajay Barokar
Jan 4 at 8:19

thanks, mate. it was really helpful.

– Farhat Zaman
Jan 4 at 9:55

add a comment |

//html code



<td (click)="select(name)"

 [class.highlight]="isSelected(name)"

>{{name}}</td>



//Ts code

selectedName = '';



select(name){

    this.selectedName = name;

}



isSelected(name){

    return this.selectedName === name;

}

//css code

.highlight{

  background: #42A948; /* green */

}

answered Jan 1 at 7:04

Ajay Barokar

762

It is working to me, Thank you

– xyz
Jan 1 at 9:19

@Ajay can you please explain about [class.highlight]. because something new for me, and I am curious to know more about this. thanks and also please provide an example link if it is possible for you.

– Farhat Zaman
Jan 1 at 11:22

1

@FarhatZaman please go through this link angular.io/guide/template-syntax#class-binding

– Ajay Barokar
Jan 4 at 8:19

thanks, mate. it was really helpful.

– Farhat Zaman
Jan 4 at 9:55

add a comment |

//html code



<td (click)="select(name)"

 [class.highlight]="isSelected(name)"

>{{name}}</td>



//Ts code

selectedName = '';



select(name){

    this.selectedName = name;

}



isSelected(name){

    return this.selectedName === name;

}

//css code

.highlight{

  background: #42A948; /* green */

}

answered Jan 1 at 7:04

Ajay Barokar

762

//html code



<td (click)="select(name)"

 [class.highlight]="isSelected(name)"

>{{name}}</td>



//Ts code

selectedName = '';



select(name){

    this.selectedName = name;

}



isSelected(name){

    return this.selectedName === name;

}

//css code

.highlight{

  background: #42A948; /* green */

}

answered Jan 1 at 7:04

Ajay Barokar

762

answered Jan 1 at 7:04

Ajay Barokar

762

answered Jan 1 at 7:04

Ajay Barokar

762

answered Jan 1 at 7:04

Ajay Barokar

762

It is working to me, Thank you

– xyz
Jan 1 at 9:19

@Ajay can you please explain about [class.highlight]. because something new for me, and I am curious to know more about this. thanks and also please provide an example link if it is possible for you.

– Farhat Zaman
Jan 1 at 11:22

1

@FarhatZaman please go through this link angular.io/guide/template-syntax#class-binding

– Ajay Barokar
Jan 4 at 8:19

thanks, mate. it was really helpful.

– Farhat Zaman
Jan 4 at 9:55

add a comment |

It is working to me, Thank you

– xyz
Jan 1 at 9:19

@Ajay can you please explain about [class.highlight]. because something new for me, and I am curious to know more about this. thanks and also please provide an example link if it is possible for you.

– Farhat Zaman
Jan 1 at 11:22

1

@FarhatZaman please go through this link angular.io/guide/template-syntax#class-binding

– Ajay Barokar
Jan 4 at 8:19

thanks, mate. it was really helpful.

– Farhat Zaman
Jan 4 at 9:55

It is working to me, Thank you

– xyz
Jan 1 at 9:19

@Ajay can you please explain about [class.highlight]. because something new for me, and I am curious to know more about this. thanks and also please provide an example link if it is possible for you.

– Farhat Zaman
Jan 1 at 11:22

@FarhatZaman please go through this link angular.io/guide/template-syntax#class-binding

– Ajay Barokar
Jan 4 at 8:19

thanks, mate. it was really helpful.

– Farhat Zaman
Jan 4 at 9:55

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu