динамическое изменение стиля CSS от компонента в Angular 5

Question

Я использую материализованный диапазон:

<div class="range-field  col s6">
  <input type="range" id="test5" min="0" max="100"  #ranger (input)="yourMethod(ranger.value)"/>
</div>

Этот вход создает в HTML-теге span с большим пальцем класса, как я могу динамически изменять цвет, изменяя диапазон?Можно ли определить в css .thumb {background-color: somevariable} и изменить его из компонента?

Answer 1

Вы можете динамически установить цвет в html с помощью переменной, определенной в компоненте.

<p [style.color]="variable"></p>

определить значение переменной в компоненте.Но убедитесь, что у вас есть значение по умолчанию, в противном случае оно выдаст ошибку.