Angular: Pull value from localStorage and display values

I am populating a list in localStorage using a multi select mat-button-toggle-group, but when I try to display the value on my page it comes back empty. What am I missing?


I have 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>

which sets the value in localStorage on change (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"]

I can then verify through console -> application -> Local Storage that the values have been set

productFilter   ["Wii", "Xbox", "Playstation3"]

So now I try to pull 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 being pulled, and stored in this.productCookie, so I should be able to use productCookie in my html

<div>
    testing:
    {{productCookie|json}}
</div>

but it doesn't display anything 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 am I doing wrong that's preventing this localStorage value from being displayed in the html?

1 answer