Tengo un grupo mat-button-toggle y cuando controlo un botón, almacena un valor en localStore.
Y quiero obtener el valor almacenado en localStorage y después de una actualización de página, mantenga marcado el mat-button-toggle en función del valor almacenado en localStorage.
Aquí está mi componente.html :
<p> <mat-button-toggle-group> <mat-button-toggle class="grille" (click)="callSwitchGrille()"> <app-icon nomIcon="grille" [stroke]=true [size]="'1.8'"></app-icon> Grille </mat-button-toggle> <mat-button-toggle class="tableau" (click)="callSwitchTableau()"> <app-icon nomIcon="tableau" [stroke]=true [size]="'1.8'"></app-icon> Tableau </mat-button-toggle> </mat-button-toggle-group> </p>Así que puedo cambiar entre "Grille" y "Tableau" y almacenar "grille" o "tableau" en el localStorage y me gustaría que si "grille" está almacenado, el botón permanece marcado en "Grille".
Aquí está mi componente.ts donde almaceno los datos:
constructor(private localStorageService : LocalStorageService) { } setDisplayMode(mode:DisplayMode){ this.displayMode=mode; this.displayModeChanged.emit(this.displayMode); localStorage.setItem('displayModeKey', this.displayMode) } callSwitchGrille(){ this.setDisplayMode(DisplayMode.GRILLE) } callSwitchTableau(){ this.setDisplayMode(DisplayMode.TABLEAU) } }Intenté muchas cosas diferentes y no está funcionando como quiero, así que si pudieras ayudarme, te lo agradecería mucho.
Muchísimas gracias
Creé una clase solo para explicar todo, pero en su caso, podría ser un componente existente en el que ya está trabajando.
import { Component, OnInit } from "@angular/core"; @Component({ selector: "app-experiments", templateUrl: "./experiments.component.html", styleUrls: ["./experiments.component.scss"], }) export class ExperimentsComponent implements OnInit { displayMode: string; constructor() {} ngOnInit(): void { this.displayMode = localStorage.getItem("displayModeKey"); } setDisplayMode(mode: string) { localStorage.setItem("displayModeKey", mode); this.displayMode = mode; } }archivo .html
<p> <mat-button-toggle-group> <mat-button-toggle [ngClass]="{ grille: displayMode === 'grille' }" (click)="setDisplayMode('grille')" > <app-icon nomIcon="grille" [stroke]="true" [size]="'1.8'"></app-icon> Grille </mat-button-toggle> <mat-button-toggle [ngClass]="{ tableau: displayMode === 'tableau' }" (click)="setDisplayMode('tableau')" > <app-icon nomIcon="tableau" [stroke]="true" [size]="'1.8'"></app-icon> Tableau </mat-button-toggle> </mat-button-toggle-group> </p>Archivo .scss o .css
.grille { border: 4px rgb(170, 231, 0) solid; } .tableau { border: 4px #c03 solid; }