Заставить угловое изменить пользовательское свойство элемента

Question

Мой клиент купил шаблон Angular, и мне нужно создать приложение, используя этот шаблон.

У меня есть такой сценарий:

<div 
     class="sidebar" 
     data-color="white" 
     data-background-color="purple" 
     data-image="../assets/img/sidebar-1.jpg" />

это работает, но я бы хотел изменить цвет с помощью переменной Angular, например:

<div 
     class="sidebar" 
     data-color="{{MyColorVariable}}" 
     data-background-color="purple" 
     data-image="../assets/img/sidebar-1.jpg" />

Но это не работает. Я получаю эту ошибку:

Ошибки синтаксического анализа шаблона: невозможно связать с 'color', поскольку оно не является известным свойством 'div'.

Да, такие вещи, как цвет или data-color, на самом деле не являются свойством div. Итак, Angular откажется.

Есть ли какое-то решение для этого?

Спасибо!

Answer 1

Попробуйте это:

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setAttribute(this.el.nativeElement, 'color', 'white');
}

Согласно этому https://alligator.io/angular/using-renderer2/ это должно работать, но я еще не проверял его, я не использую пользовательские атрибуты; удалит ответ, если он не работает