How to change the styleurls link after pressing a button and keep it that way

Question

I am working on an angular 2 project and am trying to include a setting themes. I have created 3 component.scss file red.component.scss, yellow.component.scss and blue.component.scss. I want to make it so that as per the user input from a button the styleURLS in the component.ts file changes with the selected color related scss file url. Is it possible and how? or are there any other effective and easy way to achieve this?

Answer 1

you can use property binding

my solution

//// in css file

.red {
    color: red;
}

.yellow {
    color: yellow;
}

.blue {
    color: blue;
}

.green {
    color: green;
}

/// in html

<div [class.red]="isRed" [class.yellow]="isYellow" [class.blue]="isblue" [class.green]="isGreen"  ></div>

//// and isRed, isBlue ... are boolean in ts file

Answer 2

You can include multiple stylesheets in styleUrls property. You cannot add dynamic property in styleUrl.

You can achieve this by many ways.

Style Binding

<div [ngStyle]="setStyle()">
  LOREM IPSUM
</div>

<button (click)="changeColorCode('#9FD068')">#9FD068 </button>
<button (click)="changeColorCode('#0C66A1')">#0C66A1 </button>
<button (click)="changeColorCode('#fff000')">#fff000 </button>


  selectedColor: any = '';
  changeColorCode(colorCode: string) {
   this.selectedColor = colorCode;
  }

  setStyle() {
    return {
      'color': this.selectedColor
    };
  }

Class Binding

<div [ngClass]="setClass()" #divRef>
  LOREM IPSUM
</div>
<button (click)="changeClass('red')">Red </button>
<button (click)="changeClass('green')">Green </button>
<button (click)="changeClass('blue')">Blue </button>


  selectedClass: string = '';
  changeClass(className: string) {
    this.selectedClass = className;

  }
  setClass() {
    return [this.selectedClass];
  }

  changeColorCode(colorCode: string) {
    this.selectedColor = colorCode;

  }