Acabo de empezar a aprender Angular y parece un poco diferente a React, que fue el primer framework/biblioteca JS que aprendí.
Vi algunos cursos esta semana y pensé que debería escribir algo de código y ver hasta dónde me lleva, probar lo que aprendí. Es posible que reconozca la aplicación, ya que ha sido uno de los desafíos enumerados en Frontend Mentor y lo he completado en React, por lo que también quería probarlo en Angular.
Esto es lo que he hecho hasta ahora. https://i.imgur.com/HbrndxR.png
Atm, no estoy obteniendo datos de la API porque todavía no sé cómo hacerlo. Sin embargo, lo que quiero hacer es:
export class ThemeService { isLightTheme:boolean = true; changeTheme():void { this.isLightTheme = !this.isLightTheme; } }Lo que hice fue vincular el botón del encabezado a la función changeTheme()
TS
changeTheme():void { this.themeService.changeTheme(); this.isLightTheme = this.themeService.isLightTheme; }HTML
<button (click)="changeTheme()">...</button>Pero no estoy seguro de cómo escuchar los cambios de esta propiedad isLightTheme en el servicio y aplicarlos a otros componentes que necesitan saber qué tema aplicar.
La mejor manera de hacer esto es usar BehaviourSubject de rxjs lib.
El código se vería así:
export class ThemeService { public isLightTheme: BehaviorSubject<boolean> = new BehaviorSubject(true); changeTheme():void { this.isLightTheme.next(!this.isLightTheme.getValue()); } }Luego, en sus componentes, puede suscribirse al valor de isLightTheme de esta manera:
themeService.isLightTheme.subscribe(val=>{ //do something with val });P1: Puede usar localStorage.
para establecer el valor:
localStorage.setItem("isLightTheme",true);para obtener el valor
this.isLightTheme = localStorage.getItem("isLightTheme");P2: puede usar HTMLElement para ocultar el div (supongo que está asignando una identificación a los divs de la tarjeta de país).
(<HTMLElement>document.getElementById('your-div-id')).<attribute-to-change>= newValue;Solución 1: la mejor respuesta es utilizar la gestión de estado de NgRX para almacenar este tipo de información. que se puede compartir en otras partes de la aplicación. Cualquier actualización en un lugar puede actualizar toda la aplicación a la vez.
Solución 2: use los decoradores @Input y @Output para compartir información entre componentes,
puede ver un ejemplo aquí https://indepth.dev/posts/1218/lets-implement-a-theme-switch-like-the-angular-material-site