Как изменить css свойство у класса в angular2?

Question

[Ленар Мутигуллин]

Хочу сделать так, чтобы при "input type='color'" у меня менялся цвет(background) у фигуры

Answer 1

[Malkolm]

Нужно поменять значение в css файле? Или всего лишь прописать конкретному элементу конкретный стиль?
С первым не помогу а вот второе просто.
В разметке:

<input type='color' [(ngModel)]='myColor' />
<div class='myElement' [ngStyle]='{backgroundColor: myColor}'>
....
</div>

а в компоненте

//...
myColor: string;
//...

хотя можно еще проще вроде

<input type='color' #myColor />
<div class='myElement' [ngStyle]='{backgroundColor: myColor.value}'>

Надо потестить может заработает)))

Answer 2

[Ленар Мутигуллин]

В итоге нужно было сделать градиент, сделал подобным образом:

<input type="color" [(ng-model)]="backgroundColorStart"><br><br>
     <input type="color" [(ng-model)]="backgroundColorEnd"><br><br>
      <div
        square 
        [style.background]="backgroundColor"
      </div>

export class App {
  private _backgroundColorStart:string ="#fefcea"

   get backgroundColorStart():string {
        return this._backgroundColorStart;
    }
    set backgroundColorStart(theBar:string) {
        this._backgroundColorStart = theBar;
        
        this.backgroundColor="linear-gradient(to bottom right, "+theBar+", " +this.backgroundColorEnd+")"
      console.log(this.backgroundColor);
    }
     private _backgroundColorEnd:string ="#fefcea"
    get backgroundColorEnd():string {
        return this._backgroundColorEnd;
    }
    set backgroundColorEnd(theBar:string)   {
        this._backgroundColorEnd = theBar;
        
        this.backgroundColor="linear-gradient(to top, "+this.backgroundColorStart+", "+this.backgroundColorEnd+")"
      console.log(this.backgroundColor);
    }
  
}