CODEWITHSUNDEEP
javascriptcssangular
Mateen Kadwaikar
Mateen Kadwaikar

Reputation: 403

Set value in styles from component Angular 2

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

  }

}

Upvotes: 2

Views: 1422

Answers (2)

Mateen Kadwaikar
Mateen Kadwaikar

Reputation: 403

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

Upvotes: 0

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658067

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.

Upvotes: 1

Related Questions