1

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?

Martin Abbott
  • 11
  • 4
  • this.productCookie = localStorage.getItem('productFilter').split(','); Should give you a broken array really. Why did you copy out the correct way (JSON.parse)? – MikeOne Mar 08 '21 at 17:56
  • I have been taking different approaches trying to get it to work. I changed it back to `this.productCookie = JSON.parse(localStorage.getItem('productFilter'));` but I'm not seeing any improvement other than this.productCookie not being in brackets anymore. localStorage Data Type: object gaming-report.component.ts:270 localStorage: Wii,Xbox – Martin Abbott Mar 08 '21 at 18:14
  • Because of the spilt you’re doing, you are converting the string from localStorage to an array (which is type object). Using JSON.parse is the correct approach. So your issue is still you are not seeing the value? You see nothing at all? Or something like [object Object]? If so use {{productCookie | json}} in your template.. – MikeOne Mar 08 '21 at 18:18
  • Correct, still no value being displayed (which I'm only using for testing) End goal is to use the localStorage 'productFilter' value to set the default selections for my button-toggle-group, thus [(value)]="productCookie" I tried using {{productCookie|json}} just to see if that'd work, but its still showing as an empty value `testing: []` – Martin Abbott Mar 08 '21 at 18:31
  • Weird..from the code you’ve shown this should work fine unless I’m missing something obvious? iIs your component set to onPush by any chance? – MikeOne Mar 08 '21 at 18:34
  • Yeah I haven't been able to find any reason as to why I can print productCookie to console, but not the template. I'm not familiar with onPush, but I didn't find ChangeDetectionStrategy.OnPush in my component. – Martin Abbott Mar 08 '21 at 19:09
  • From the updates it sounds it is displaying now..? Right? – MikeOne Mar 08 '21 at 19:20
  • Unfortunately not, there are 2 screenshots at the end (on load, and after I select an option from my button list) On page load: `testing: []` On selecting options: `testing: [ "Wii", "Xbox", "Playstation3" ]` reload page and its back to being empty – Martin Abbott Mar 08 '21 at 19:30
  • Not sure what is going on. Maybe create a stackblitz to reproduce? – MikeOne Mar 08 '21 at 19:35
  • Still don't understand why but it's working now. Here's a working example for anyone else that might have issues https://stackblitz.com/edit/working-example-localstorage-default-buttons?file=src/main.ts – Martin Abbott Mar 09 '21 at 04:38

1 Answers1

0

The code above is correct, I was having issues with my local environment.

Check out https://stackblitz.com/edit/working-example-localstorage-default-buttons?file=src/app/button-toggle-appearance-example.ts

Martin Abbott
  • 11
  • 4