Set value in styles from component Angular 2

Question

The task is to change the background-color depending on the routes. I have to show different color for UpcomingComponent and for the others route the background-color will remain the same.

I am trying to set value in STYLES in for /deep/ .classname for background-color dynamically.

Below is the code

@Component({
  selector: 'app-upcoming',
  templateUrl: './upcoming.component.html',
  // styleUrls: ['./upcoming.component.css'],

  styles: [`
  /deep/ .root {
    background-color: color;
  }`]
})

export class UpcomingComponent implements OnInit {

  color: string;


  ngOnInit() {
    this.bodyBackgroundImage();
  }



  bodyBackgroundImage() {
    if (window.location.pathname === '/upcoming'){
      console.log("Here i am");
      this.color =  'purple';
    }

  }

}

The reason is all the styles are compiled even before your class get's instantiated . — Milad, Dec 06 '16 at 09:07

score 1 · Answer 1 · answered Dec 06 '16 at 07:08

1

Binding in styles or styleUrls is not supported. Use instead [class.xxx]="...", [ngClass]="...", [style.xxx]="...", [ngStyle]="..." kinds of bindings on the element you want to style.

answered Dec 06 '16 at 07:08

Günter Zöchbauer

623,577
216
2,003
1,567

I want to change the background-color of the body element. – Mateen Kadwaikar Dec 06 '16 at 07:22
You can use `@HostBinding('style.background-color') bgColor = 'red';` in your `AppComponent` if it has `'body'` as selector or just `document.body.style.background = 'red';` from anywhere. – Günter Zöchbauer Dec 06 '16 at 07:25
Thank you for the answer .But it is changing for all the routes. I want it to change for particular route.I am trying to do this bodyBackgroundImage() { if (window.location.pathname === '/upcoming'){ console.log("Here i am"); document.body.style.background = 'blue'; } – Mateen Kadwaikar Dec 06 '16 at 07:30
You could use something like http://stackoverflow.com/questions/38644314/changing-the-page-title-using-the-angular-2-new-router/38652281#38652281 but set the background color instead of the title. – Günter Zöchbauer Dec 06 '16 at 07:34
Sorry, I don't understand what the problem is. Can you reproduce in a Plunker? Plunker has a ready-to-use Angular2 template. – Günter Zöchbauer Dec 06 '16 at 07:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129872/discussion-between-mateen-kadwaikar-and-gunter-zochbauer). – Mateen Kadwaikar Dec 06 '16 at 07:48

score 0 · Accepted Answer · answered Dec 06 '16 at 08:27

I have done using Route in AppComponent. Thanks to @Günter Zöchbauer for helping me out.

import { Component } from '@angular/core';
import {Router , ActivatedRoute,NavigationEnd} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {


  constructorprivate router:Router,private activatedRoute:ActivatedRoute) {

    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
         if (event.url === '/upcoming') {
          document.body.style.background = 'grey';
      }else {
          document.body.style.background  = 'blue';
      }
      }
    });
  }
}

Set value in styles from component Angular 2

2 Answers2