I'm trying to switch the value of an attribute by binding it to a property in my component.

<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';
    });
  }
}

By setting dark or light to the data-theme attribute, different colors are used. So I just need a way of switching the value.

If I try using the code above, I get this:

Error: src/app/app.component.html:1:28 - error NG8002: Can't bind to 'data-theme' since it isn't a known property of 'div'.

Is there any way to bind easily my property to the template? Why am I getting that error?