I am having trouble displaying values from a list stored in localStorage when using a multi-select mat-button-toggle-group. The value appears empty on my page. What could be the issue?
I am using a mat-button-toggle-group with a (change) trigger and default values [(value)]="productCookie"
<mat-button-toggle-group #group="matButtonToggleGroup" name="productSelect" aria-label="Font Style" multiple [(value)]="productCookie (change)=productFilter(group.value)>
<mat-button-toggle *ngFor="let product of products" [value]="product.name">
<a>{{product.name}}</a>
</mat-button-toggle>
</mat-button-toggle-group>
After a value is selected, it is stored in localStorage using the change event (change)=productFilter(group.value)
productFilter($event){
console.log("productFilter event value: " + $event)
this.selectedProductFilter = $event
// Testing
console.log(this.selectedProductFilter)
localStorage.setItem('productFilter', JSON.stringify(this.selectedProductFilter));
}
Console Output after selecting 3 options:
productFilter event value: Wii,Xbox,Playstation3
gaming-report.component.ts:280 (3) ["Wii", "Xbox", "Playstation3"]
Verification through console -> application -> Local Storage confirms that the values have been successfully set
productFilter ["Wii", "Xbox", "Playstation3"]
However, when attempting to retrieve these values:
ngOnInit() {
this.getProductCookie();
}
getProductCookie(){
if (localStorage.getItem('productFilter') === null){
console.log("No filters found in localStorage")
}
else{
this.productCookie = JSON.parse(localStorage.getItem('productFilter'));
console.log("localStorage Data Type: " + typeof this.productCookie) //object
console.log("localStorage: " + this.productCookie) // Wii,Xbox,Playstation3
}
}
Console Output:
localStorage Data Type: object
localStorage: Wii,Xbox,Playstation3
The value is retrieved and stored in this.productCookie, indicating that it can be used in the HTML
<div>
testing:
{{productCookie|json}}
</div>
However, the value is not displayed productCookie value is empty
Edit: Changed {{productCookie}} to {{productCookie|json}} now its printing
testing: []
until I start selecting options Selecting an option updates productCookie value
Edit: now this prints
testing: [ "Wii", "Xbox", "Playstation3" ]
What could be the issue preventing the display of this localStorage value in the HTML?