How to set color in div element using property binding with Angular 4

0

I have the follow object

 public countries= [

    {code: 'AE' , country_name: 'United Arab Emirates', color: '#eea638'},

    {code: 'AF' , country_name: 'Afghanistan', color: '#eea638'},

    {code: 'AL' , country_name: 'Albania', color: '#eea638'},

    {code: 'AM' , country_name: 'Armenia', color: '#eea638'},

    {code: 'US' , country_name: 'United State',color: '#eea638'},

    {code: 'AR' , country_name: 'Argentina', color: '#eea638'},

    {code: 'AT',  country_name: 'Austria', color: '#eea638'},

    {code: 'AU',  country_name: 'Australia', color: '#eea638'}

]

So I would like to set the div color dinamically based in this object list. I tried to do this:

<div *ngFor="let country of countries">

    <p class="m-b-10">{{country.country_name}} 

        <span class="f-right">{{country.code}}</span>

    </p>

    <div class="progress">

        <div class="progress-bar" ng-style="{'background-color': country.color}" [style.width]="'75%'"></div>

   </div>

But it's not working. Could you please help me?

angular property-binding

share|improve this question

asked Nov 22 '18 at 12:34

JohJoh

568

add a comment | 

0

I have the follow object

 public countries= [

    {code: 'AE' , country_name: 'United Arab Emirates', color: '#eea638'},

    {code: 'AF' , country_name: 'Afghanistan', color: '#eea638'},

    {code: 'AL' , country_name: 'Albania', color: '#eea638'},

    {code: 'AM' , country_name: 'Armenia', color: '#eea638'},

    {code: 'US' , country_name: 'United State',color: '#eea638'},

    {code: 'AR' , country_name: 'Argentina', color: '#eea638'},

    {code: 'AT',  country_name: 'Austria', color: '#eea638'},

    {code: 'AU',  country_name: 'Australia', color: '#eea638'}

]

So I would like to set the div color dinamically based in this object list. I tried to do this:

<div *ngFor="let country of countries">

    <p class="m-b-10">{{country.country_name}} 

        <span class="f-right">{{country.code}}</span>

    </p>

    <div class="progress">

        <div class="progress-bar" ng-style="{'background-color': country.color}" [style.width]="'75%'"></div>

   </div>

But it's not working. Could you please help me?

angular property-binding

share|improve this question

asked Nov 22 '18 at 12:34

JohJoh

568

add a comment | 

0

0

0

I have the follow object

 public countries= [

    {code: 'AE' , country_name: 'United Arab Emirates', color: '#eea638'},

    {code: 'AF' , country_name: 'Afghanistan', color: '#eea638'},

    {code: 'AL' , country_name: 'Albania', color: '#eea638'},

    {code: 'AM' , country_name: 'Armenia', color: '#eea638'},

    {code: 'US' , country_name: 'United State',color: '#eea638'},

    {code: 'AR' , country_name: 'Argentina', color: '#eea638'},

    {code: 'AT',  country_name: 'Austria', color: '#eea638'},

    {code: 'AU',  country_name: 'Australia', color: '#eea638'}

]

So I would like to set the div color dinamically based in this object list. I tried to do this:

<div *ngFor="let country of countries">

    <p class="m-b-10">{{country.country_name}} 

        <span class="f-right">{{country.code}}</span>

    </p>

    <div class="progress">

        <div class="progress-bar" ng-style="{'background-color': country.color}" [style.width]="'75%'"></div>

   </div>

But it's not working. Could you please help me?

angular property-binding

share|improve this question

asked Nov 22 '18 at 12:34

JohJoh

568

I have the follow object

 public countries= [

    {code: 'AE' , country_name: 'United Arab Emirates', color: '#eea638'},

    {code: 'AF' , country_name: 'Afghanistan', color: '#eea638'},

    {code: 'AL' , country_name: 'Albania', color: '#eea638'},

    {code: 'AM' , country_name: 'Armenia', color: '#eea638'},

    {code: 'US' , country_name: 'United State',color: '#eea638'},

    {code: 'AR' , country_name: 'Argentina', color: '#eea638'},

    {code: 'AT',  country_name: 'Austria', color: '#eea638'},

    {code: 'AU',  country_name: 'Australia', color: '#eea638'}

]

So I would like to set the div color dinamically based in this object list. I tried to do this:

<div *ngFor="let country of countries">

    <p class="m-b-10">{{country.country_name}} 

        <span class="f-right">{{country.code}}</span>

    </p>

    <div class="progress">

        <div class="progress-bar" ng-style="{'background-color': country.color}" [style.width]="'75%'"></div>

   </div>

But it's not working. Could you please help me?

angular property-binding

angular property-binding

share|improve this question

asked Nov 22 '18 at 12:34

JohJoh

568

share|improve this question

asked Nov 22 '18 at 12:34

JohJoh

568

share|improve this question

share|improve this question

asked Nov 22 '18 at 12:34

JohJoh

568

asked Nov 22 '18 at 12:34

JohJoh

568

asked Nov 22 '18 at 12:34

JohJoh

568

568

add a comment | 

add a comment | 

2 Answers
2

active

oldest

votes

1

There are two issues with your implementation:

1. You've used ng-style which was used in AngularJS(1.x). But since you're working with Angular(2+) use [ngStyle] instead of ng-style.




2. Your div doesn't have a content. Also, it just has width and not height. Another thing to point out here is that since you're using [ngStyle], you can use the width and the height attributes right there instead of creating another [style.width] or [style.height] attribute binding.

---

Give this a try to fix it:

<div *ngFor="let country of countries">

  <p class="m-b-10">{{country.country_name}}

    <span class="f-right">{{country.code}}</span>

  </p>

  <div class="progress">

    <div 

      class="progress-bar" 

      [ngStyle]="{ 'background-color': country.color, 'width': '75%', 'height': '50px'}">

    </div>

  </div>

</div>

---

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 22 '18 at 13:26

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you. it's working :)
  
  – Joh
  Nov 22 '18 at 13:40
  

  
  
  
  

add a comment | 

1

Div height is missing.

   <div class="progress">

        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>

   </div>

share|improve this answer

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much! ;)
  
  – Joh
  Nov 22 '18 at 13:42
  

  
  
  
  

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


}
});

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

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431156%2fhow-to-set-color-in-div-element-using-property-binding-with-angular-4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

1

There are two issues with your implementation:

1. You've used ng-style which was used in AngularJS(1.x). But since you're working with Angular(2+) use [ngStyle] instead of ng-style.




2. Your div doesn't have a content. Also, it just has width and not height. Another thing to point out here is that since you're using [ngStyle], you can use the width and the height attributes right there instead of creating another [style.width] or [style.height] attribute binding.

---

Give this a try to fix it:

<div *ngFor="let country of countries">

  <p class="m-b-10">{{country.country_name}}

    <span class="f-right">{{country.code}}</span>

  </p>

  <div class="progress">

    <div 

      class="progress-bar" 

      [ngStyle]="{ 'background-color': country.color, 'width': '75%', 'height': '50px'}">

    </div>

  </div>

</div>

---

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 22 '18 at 13:26

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you. it's working :)
  
  – Joh
  Nov 22 '18 at 13:40
  

  
  
  
  

add a comment | 

1

There are two issues with your implementation:

1. You've used ng-style which was used in AngularJS(1.x). But since you're working with Angular(2+) use [ngStyle] instead of ng-style.




2. Your div doesn't have a content. Also, it just has width and not height. Another thing to point out here is that since you're using [ngStyle], you can use the width and the height attributes right there instead of creating another [style.width] or [style.height] attribute binding.

---

Give this a try to fix it:

<div *ngFor="let country of countries">

  <p class="m-b-10">{{country.country_name}}

    <span class="f-right">{{country.code}}</span>

  </p>

  <div class="progress">

    <div 

      class="progress-bar" 

      [ngStyle]="{ 'background-color': country.color, 'width': '75%', 'height': '50px'}">

    </div>

  </div>

</div>

---

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 22 '18 at 13:26

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you. it's working :)
  
  – Joh
  Nov 22 '18 at 13:40
  

  
  
  
  

add a comment | 

1

1

1

There are two issues with your implementation:

1. You've used ng-style which was used in AngularJS(1.x). But since you're working with Angular(2+) use [ngStyle] instead of ng-style.




2. Your div doesn't have a content. Also, it just has width and not height. Another thing to point out here is that since you're using [ngStyle], you can use the width and the height attributes right there instead of creating another [style.width] or [style.height] attribute binding.

---

Give this a try to fix it:

<div *ngFor="let country of countries">

  <p class="m-b-10">{{country.country_name}}

    <span class="f-right">{{country.code}}</span>

  </p>

  <div class="progress">

    <div 

      class="progress-bar" 

      [ngStyle]="{ 'background-color': country.color, 'width': '75%', 'height': '50px'}">

    </div>

  </div>

</div>

---

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 22 '18 at 13:26

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

There are two issues with your implementation:

1. You've used ng-style which was used in AngularJS(1.x). But since you're working with Angular(2+) use [ngStyle] instead of ng-style.




2. Your div doesn't have a content. Also, it just has width and not height. Another thing to point out here is that since you're using [ngStyle], you can use the width and the height attributes right there instead of creating another [style.width] or [style.height] attribute binding.

---

Give this a try to fix it:

<div *ngFor="let country of countries">

  <p class="m-b-10">{{country.country_name}}

    <span class="f-right">{{country.code}}</span>

  </p>

  <div class="progress">

    <div 

      class="progress-bar" 

      [ngStyle]="{ 'background-color': country.color, 'width': '75%', 'height': '50px'}">

    </div>

  </div>

</div>

---

Here's a Sample StackBlitz for your ref.

share|improve this answer

edited Nov 22 '18 at 13:26

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

share|improve this answer

share|improve this answer

edited Nov 22 '18 at 13:26

edited Nov 22 '18 at 13:26

edited Nov 22 '18 at 13:26

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

answered Nov 22 '18 at 12:37

SiddAjmeraSiddAjmera

15.6k31238

15.6k31238

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you. it's working :)
  
  – Joh
  Nov 22 '18 at 13:40
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you. it's working :)
  
  – Joh
  Nov 22 '18 at 13:40
  

  
  
  
  

thank you. it's working :)

– Joh
Nov 22 '18 at 13:40

thank you. it's working :)

– Joh
Nov 22 '18 at 13:40

add a comment | 

1

Div height is missing.

   <div class="progress">

        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>

   </div>

share|improve this answer

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much! ;)
  
  – Joh
  Nov 22 '18 at 13:42
  

  
  
  
  

add a comment | 

1

Div height is missing.

   <div class="progress">

        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>

   </div>

share|improve this answer

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much! ;)
  
  – Joh
  Nov 22 '18 at 13:42
  

  
  
  
  

add a comment | 

1

1

1

Div height is missing.

   <div class="progress">

        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>

   </div>

share|improve this answer

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

Div height is missing.

   <div class="progress">

        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>

   </div>

share|improve this answer

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

answered Nov 22 '18 at 12:43

Sanjay KatiyarSanjay Katiyar

44018

44018

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much! ;)
  
  – Joh
  Nov 22 '18 at 13:42
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much! ;)
  
  – Joh
  Nov 22 '18 at 13:42
  

  
  
  
  

Thank you so much! ;)

– Joh
Nov 22 '18 at 13:42

Thank you so much! ;)

– Joh
Nov 22 '18 at 13:42

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.

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

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431156%2fhow-to-set-color-in-div-element-using-property-binding-with-angular-4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

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

Name

Email

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

Name

Email

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

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

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