Looking to dynamically change the value of an attribute in my component using property binding.
<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';
});
}
}
Assigning either dark or light to the data-theme attribute changes the color scheme.
I need a solution to efficiently bind my property to the template and resolve the error.
Attempting to implement the code above results in:
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'.
Seeking advice on how to successfully connect my property to the template. What could be causing this error?