unable to change the background color in Angular using style binding

Question

The background color of the div is not changing when using the style binding using Angular.The code is placed below for reference

@Component({
  selector: 'course',
  template: `
   <div [style.backgroundColor]='red'>

   <button (click)="onClick($event)" class="btn btn-primary" [class.active]="isActive" [style.backgroundColor]='red'>Save</button>
   </div>
    `,
    styleUrls: ['./course.component.css']
  })
  export class CourseComponent {...}

The style element has the backgroundColor property. Where am I going wrong?

do it in angular way using ngStyle

Sajeetharan
– Sajeetharan

2018-02-18 11:05:54 +00:00
Commented Feb 18, 2018 at 11:05 — Sajeetharan
– Sajeetharan, Commented Feb 18, 2018 at 11:05

Naresh Pingale · Accepted Answer · 2018-02-18 10:30:17Z

4

Angular property binding expects an expression instead of a value which you are trying to assign. Instead of [style.backgroundColor]='red' you might want to use [style.backgroundColor]="'red'" note that i have wrapped 'red' on quotes.

answered Feb 18, 2018 at 10:30

Naresh Pingale

2461 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2018-02-18 10:25:51Z

0

You need to use [ngStyle] with backgroundColor property

<div  [ngStyle]="{backgroundColor: 'red' }">
   <button (click)="onClick($event)" class="btn btn-primary" [class.active]="isActive" [ngStyle]="{backgroundColor: 'red' }">Save</button>
</div>

DEMO STACKBLITZ

answered Feb 18, 2018 at 10:25

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Kevin Beal Over a year ago

Broken link. I tried something like what you have with no luck.

federico scamuzzi · Accepted Answer · 2018-02-18 10:26:13Z

0

I think you've a typo in your code ..

try this:

 [style.background-color]="'red'"

.. so something like:

@Component({
  selector: 'course',
  template: `
   <div [style.background-color]='red'>

   <button (click)="onClick($event)" class="btn btn-primary" [class.active]="isActive" [style.background-color]='red'>Save</button>
   </div>
    `,
    styleUrls: ['./course.component.css']
  })
  export class CourseComponent {...}

Hope it helps you!

edited Feb 18, 2018 at 10:26

answered Feb 18, 2018 at 10:16

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

2 Comments

zilcuanu Over a year ago

No. Its not working. I tried <div [style.backgroundColor]='red'>

federico scamuzzi Over a year ago

you have to try <div [style.background-color]='red'> as i say

Collectives™ on Stack Overflow

unable to change the background color in Angular using style binding

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related