loading different values into select angular

Hi I have a problem with loading data from localStorage into a select component. I would like each select after selecting different options to be saved in localStorage and after refreshing the page, the value from the select will be remembered, currently the last option is remembered and loaded to all

app.component.html

<div class="columns">
  <div class="column">
    <app-select></app-select>
  </div>
  <div class="column">
    <app-select></app-select>
  </div>
  <div class="column">
    <app-select></app-select>
  </div>
</div>

select.component.html

<select 
    name="brewers" 
    [(ngModel)]="selectedOption" 
    (ngModelChange)="selectOption()"
    (click)="saveData($event)"
>
    <option selected>Choose your profile</option>
    <option *ngFor="let brewer of brewers$ | async" value="{{brewer}}" >{{ brewer }}</option>
</select>

select.component.ts

ngOnInit(): void {
    this.brewers$ = this.beersService.createBrewers().pipe(
      map((res : any) => [...new Set(res)].sort())
    );

    this.selectedOption = localStorage.getItem('latestSelect') ? localStorage.getItem('latestSelect') : '';
    this.selectOption();
  }

  selectOption() {
    this.beers$ = this.beersService.getBeers().pipe(
      map((res : any) => res.filter(beer => beer.brewer === this.selectedOption))
    );

    this.amountBeers = this.nextBeers;

    // localStorage.setItem('latestSelect', this.selectedOption);
  }

  loadMore() {
    this.amountBeers += this.nextBeers;
  }

  get getAmountOfNextBeers() {
    return this.amountBeers;
  }
  
  beerPlaceholder(e) {
    e.target.src = 'assets/DefaultBeer.png';
  }

  saveData(e) {
    if ('beer-left' === e.target.id) {
      localStorage.setItem('left-column', this.selectedOption);
    } else if ('beer-right' === e.target.id) {
      localStorage.setItem('right-column', this.selectedOption);
    } else {
      localStorage.setItem('center-column', this.selectedOption);
    }
  }

Answer

It will be much easier if you add an input parameter.

My solution:

1. Add @Input() side: 'left' | 'right' | 'center'; at your custom select component.

2. Change the saveData function as:

   saveData(e) {

       if (this.side === "left") {
           localStorage.setItem('left-column', this.selectedOption);
       } else if (this.side === "right") {
           localStorage.setItem('right-column', this.selectedOption);
       } else {
           localStorage.setItem('center-column', this.selectedOption);
       }
   }
   

3. Change app.component.html as:

<div class="columns">
  <div class="column">
    <app-select [side]="'left'"></app-select>
  </div>
  <div class="column">
    <app-select [side]="'center'"></app-select>
  </div>
  <div class="column">
    <app-select [side]="'right'"></app-select>
  </div>
</div>

Edit:

4. Now, to set stored data from localStorage, add these lines at select component’s ngOnInit hook:

if (this.side === "left" && localStorage.getItem("left-column")) {
  this.selectedOption = localStorage.getItem("left-column");
} else if (this.side === "right" && localStorage.getItem("right-column")) {
  this.selectedOption = localStorage.getItem("right-column");
} else if (this.side === "center" && localStorage.getItem("center-column")) {
  this.selectedOption = localStorage.getItem("center-column");
}

Note: I’ve added an extra Save button after each select for test purposes.

Result:

I’ve demonstrated a broken(!) but working solution at Stackblitz.