So I am currently creating a build-a-burger website in angular. The ingredients and inventory should update depending on the location. The user selects the location from a select menu in the nav.

I am having to hard reload my page every time to get the new locations inventory to load. How can I make it rerender immediately when the location is updated in session storage?

This is my app.component.html:

  <select id="locations" appAuthOnly [isVerified]="isVerified" [(ngModel)]="selectedLocation"  (change)="onLocationChange()">
<option value="Mystic Falls">Mystic Falls</option>
<option value="Riverdale">Riverdale</option>
<option value="Sunnydale">Sunnydale</option>

</select>

This is the app.component.ts:

  ngOnInit() {
this.isVerified = localStorage.getItem('token') ? true : false;
console.log(this.selectedLocation);
this.selectedLocation = sessionStorage.getItem('selectedLocation') || 'Mystic Falls';
  }

  onLocationChange() {
    sessionStorage.setItem('selectedLocation', this.selectedLocation);
  }

UPDATED:

onLocationChange() {
  sessionStorage.setItem('selectedLocation', this.selectedLocation);
  this.ingrediantService.getAllItems();
}
}

My ingrediants.service.ts:

  selectedLocation: string = sessionStorage.getItem('selectedLocation') ?? '';

  getAllItems(): Observable<Ingrediant[]> {
    const selectedLocation = sessionStorage.getItem('selectedLocation') ?? '';
    return this.http.get<Ingrediant[]>(this.url).pipe(
      map(ingredients => ingredients.filter(ingredient => ingredient.location === selectedLocation))     
    );

  }

And lastly - inventory-ingrediants.component.ts:

ngOnInit() {
    // Retrieve the ingredients
    this.ingrediantService.getAllItems().subscribe((data) => {
        console.log(data);
        this.breadIngrediants = data.filter(ingredient => ingredient.category === 'Bread');
        this.pattyIngrediants = data.filter(ingredient => ingredient.category === 'Patty');
        this.cheeseIngrediants = data.filter(ingredient => ingredient.category === 'Cheese');
        this.garnishIngrediants = data.filter(ingredient => ingredient.category === 'Garnish');
        this.sauceIngrediants = data.filter(ingredient => ingredient.category === 'Sauce');
    });

    this.carousel = this.elementRef.nativeElement.querySelector('.carousel-container');
    this.arrowLeft = this.elementRef.nativeElement.querySelector('.arrow-left');
    this.arrowRight = this.elementRef.nativeElement.querySelector('.arrow-right');

    // Subscribe to the watchSessionStorage method to listen for changes to the session storage
 
        
        };

Observables is reactive to changes, but you need to declare at your storage the kind of changes will be made, and need to be aware who will trigger the changes.

When you have 1-or-many components listening to changes, and some other events responsible to changes, in this example, i believe the best aproach is to use BehaviorSubject (that extends and observable), you need to store the shared observable in the ingrediants.service, like so:

ingrediants.service.ts:

items$: new BehaviorSubject<Ingrediant[]>([]);

 getAllItems(): void {
     const selectedLocation = sessionStorage.getItem('selectedLocation') ?? '';

    this.http.get<Ingrediant[]>(this.url).pipe(
        map(ingredients => ingredients.filter(
            ingredient => ingredient.location === selectedLocation
        )
    )).subscribe((res) => this.items$.next(res));
}

And in all other places in your code, you just need to refer to items$, like so:

some-file.html:

<div *ngFor="let item of (items$ | async)">{{item.name}}</div> 

or in some-file.ts:

method() {
    this.ingrediantService.items$.subscribe((items) => {
        console.log(items);
    });
}

So on your app.component.ts, on app start, you need to make the first call to ingredients, like so:

app.component.ts:

ngOnInit() {
    //... your code here

    this.ingrediantService.getAllItems();
}

And whenever you need to update the items data, just call:

this.ingrediantService.getAllItems();

And will automatically update all subscribers

When you select is change I cant see the new call for the update, pleae see the code below, of course you can manipulate as you want onLocationChange() function.
My sugestion is each time that select input change do a new request

ngOnInit() {

    // FIRST CALL
    this.getIngredients()

    this.carousel = this.elementRef.nativeElement.querySelector('.carousel-container');
    this.arrowLeft = this.elementRef.nativeElement.querySelector('.arrow-left');
    this.arrowRight = this.elementRef.nativeElement.querySelector('.arrow-right');


}
   
getIngredients() {
   this.ingrediantService.getAllItems().subscribe((data) => {
        console.log(data);
        this.breadIngrediants = data.filter(ingredient => ingredient.category === 'Bread');
        this.pattyIngrediants = data.filter(ingredient => ingredient.category === 'Patty');
        this.cheeseIngrediants = data.filter(ingredient => ingredient.category === 'Cheese');
        this.garnishIngrediants = data.filter(ingredient => ingredient.category === 'Garnish');
        this.sauceIngrediants = data.filter(ingredient => ingredient.category === 'Sauce');
    });
}

onLocationChange() {
     sessionStorage.setItem('selectedLocation', this.selectedLocation);
     // EACH TIME SELECT CHANGE NEW CALL IS EXECUTED
     this.getIngredients();

}