Angular maintaining current Name on refresh

Issue

I have a dropdown which works when I use it however it has two issues:

• If I refresh then the value from the dropdown is blank
• If I visit the link via URI the dropdown is empty

I essentially want to maintain the name depending on the Order I am on. Think multiple orders in a dropdown and selecting one goes to that page.

// Topbar:

export class AppTopbarComponent implements OnInit {
  items?: MenuItem[];
  orders: Order[] = [];
  filteredOrders: any[] = [];
  selectedOrder: any[] = [];
  displayRoutes: string[] = ['/order'];

  constructor(
    public appMain: AppMainComponent,
    private ordersService: OrderService,
    private router: Router,
    private orderSelectionService: OrderSelectionService
  ) {}

  ngOnInit(): void {
    this.ordersService.getAllOrders().subscribe((orders) => {
      this.orders = orders;
    });

    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        const shouldDisplayDropdown = this.displayRoutes.some((route) => event.url.startsWith(route));
        this.selectedOrder = shouldDisplayDropdown ? this.selectedOrder : [];
      }
    });

    this.orderSelectionService.selectedOrderName$.subscribe((selectedOrderName) => {
      this.selectedOrder = selectedOrderName;
    });
  }

  onOrderSelect(event: any) {
    const selectedOrderId = event.Id;
    this.orderSelectionService.setSelectedOrderName(event || []);
    this.router.navigate(['/order', selectedOrderId, 'home']);
  }
}

// Service:

@Injectable({
  providedIn: 'root',
})
export class OrderSelectionService {
  private selectedOrderSource = new BehaviorSubject<any[]>([]);

  selectedOrderName$: Observable<any[]> = this.selectedOrderSource.asObservable();

  setSelectedOrderName(orderName: any[]) {
    this.selectedOrderSource.next(orderName);
  }
}

So far I have tried to get the route e.g.

this.activatedRoute.params.subscribe((params) => {
  console.log('Route Params:', params);
  const selectedOrderId = params['id'];
  this.selectedOrder = this.orders.find((order) => order.Id === selectedOrderId) || [];
});

but it returns undefined.

Just need some help figuring out the best approach to doing this. displayRoutes and the method for that is just to reset the dropdown when not in a certain route.

Solution

When you refresh the screen the service resets so get rid of the service maintaining the state and rely on the url params, so the subject will not have any value, so you can adjust the code like below.

If you still face issues you can share back a stackblitz with the issue replicated!

// Topbar:

export class AppTopbarComponent implements OnInit {
  items?: MenuItem[];
  orders: Order[] = [];
  filteredOrders: any[] = [];
  selectedOrder: any[] = [];
  displayRoutes: string[] = ['/order'];

  constructor(
    public appMain: AppMainComponent,
    private ordersService: OrderService,
    private router: Router,
    private orderSelectionService: OrderSelectionService
  ) {}

  ngOnInit(): void {
    this.ordersService.getAllOrders().subscribe((orders) => {
      this.orders = orders;
    });

    this.activatedRoute.params.subscribe((params) => {
        console.log('Route Params:', params);
        const selectedOrderId = params['id'];
        this.selectedOrder = this.orders.find((order) => order.Id ===  
            selectedOrderId) || [];
        // const shouldDisplayDropdown = this.displayRoutes.some((route) => event.url.startsWith(route)); // <-- this condition seems to be wrong, require stackblitz to debug
        const shouldDisplayDropdown = this.displayRoutes.some((route) => this.router.url.includes(route)) // get any route that matches the url
        this.selectedOrder = shouldDisplayDropdown ? [this.selectedOrder] : 
            [];
    });

  onOrderSelect(event: any) {
    const selectedOrderId = event.Id;
    this.router.navigate(['/order', selectedOrderId, 'home']);
  }
}

Answered By - Naren Murali