Estoy tratando de cambiar el valor de un atributo vinculándolo a una propiedad en mi componente.

 <div class="app-container" [data-theme]="theme"> <router-outlet></router-outlet> </div>

 import { Component } from '@angular/core'; import { ThemeService } from './common/_services'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { theme = 'dark'; constructor(private themeService: ThemeService) { this.themeService.isDark.subscribe(x => { this.theme = x ? 'dark' : 'light'; }); } }

Al configurar dark o light para el atributo data-theme , se utilizan diferentes colores. Así que solo necesito una forma de cambiar el valor.

Si trato de usar el código anterior, obtengo esto:

Error: src/app/app.component.html:1:28 - error NG8002: no se puede vincular a 'tema de datos' ya que no es una propiedad conocida de 'div'.

¿Hay alguna forma de vincular fácilmente mi propiedad a la plantilla? ¿Por qué recibo ese error?