Estoy haciendo un switch
para cambiar el theme
de la vista, pero no accede al médodo de la misma clase, sale un error de que no existe
export class AppComponent implements OnInit {
ngOnInit(){
var local = localStorage.getItem("theme") || "light-theme";
this.loadStyle(local == "light-theme" ? "light-theme":"dark-theme");
}
constructor() {}
guri(styleName){
switch(styleName){
case "dark-theme":
return "assets/styles/style-dark.css";
default:
return "";
}
}
loadStyle(styleName) {
localStorage.setItem("theme", styleName);
const head = document.getElementsByTagName('head')[0];
let themeLink = document.getElementById(
'client-theme'
) as HTMLLinkElement;
if (themeLink) {
themeLink.href = this.guri(styleName);
} else {
const style = document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = this.guri(styleName);
head.appendChild(style);
}
}
}
aside-card.html
<li>
<li class="d-flex justify-content-center">
<a href="#" (click)="stheme('light-theme')" class="light btn-light"><i class="fas fa-sun"></i></a>
<a href="#" (click)="stheme('dark-theme')" class="dark btn-dark"><i class="fas fa-moon"></i></a>
</li>
</ul>
app.html
<aside class="col-12 col-md-12 col-xl-3">
<app-aside-card [loadStyle] = "loadStyle"></app-aside-card>
</aside>
aside-card.ts
export class AsideCardComponent implements OnInit {
@Input() loadStyle;
constructor() { }
ngOnInit(): void {
}
stheme(theme){
this.loadStyle(theme);
}
}
html
y elts