how to refresh page when routing url changes in angular

Question

I have a sidebar where list of items are fetched from api and are displayed. When one of the item is selected from the side bar it goes to a page where another drop down is there and data of selected item is displayed on that drop down. But when i change the item from side bar, the page where data of selected item should come, does not refreshed.

my side bar component.html

<li class="nav-item" *ngFor="let data of getItemList">
  <a href="javascript:void(0)" 
     class="nav-link text-white p-3 sidebar-link" 
     (click)="list(data.Id)">
       <i class="fa fa-clipboard"></i>{{data.ItemName}}</a>
</li>

my sidebar.component.ts

   list(id) {
    this.router.navigate(["/dashboard/item/item-home/" + id]);
   }

my item-home.component.html

          <select
                type="number"
                class="form-control"
                (change)="onChangeItemData$event.target.value)"
                formControlName="GroupId"
              >
                <option hidden value="" disabled="true"
                  >Please select Item data
                </option>
                <option
                  *ngFor="let group of itemInfo"
                  type="number"
                  [ngValue]="group.Id"
                >
                  {{ group.Name }}
                </option>
          </select>

my item-home.component.ts

ngOnInit(): void {
  this.route.paramMap.subscribe(
    (routeParam) => {
      const id = parseInt(routeParam.get("id"));
      this.itemId = id;
    },
    (err) => { }
  );
  this.fetchGroupInfoByUseCases(this.itemId)
}

fetchGroupInfoByUseCases(Id) {
  this.usecaseServ
    .getGroupInfoByUseCase(Id)
    .subscribe((res: any) => {
      console.log(res);
      this.groupInfo = res;
    });
}

you should be calling this.fetchGroupInfoByUseCases(this.itemId) in route param subscription block — Nilesh Patel
– Nilesh Patel, Commented Dec 22, 2020 at 7:10

Nilesh Patel · Accepted Answer · 2020-12-22 08:45:50Z

2

Any async task(promise or subscription) needs to be resolved before you can do any further task. so, fetchGroupInfoByUseCases should be get called when route params gets resolved.

ngOnInit(): void {
  this.route.paramMap.subscribe(
    (routeParam) => {
      const id = parseInt(routeParam.get("id"));
      this.itemId = id;
      this.fetchGroupInfoByUseCases(this.itemId)
    },
    (err) => { }
  );
}

fetchGroupInfoByUseCases(Id) {
  this.usecaseServ
    .getGroupInfoByUseCase(Id)
    .subscribe((res: any) => {
      console.log(res);
      this.groupInfo = res;
    });
}

answered Dec 22, 2020 at 8:45

Nilesh Patel

3,3079 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jsdev2023 · Accepted Answer · 2020-12-22 08:06:36Z

1

You can use an event listener on the Angular Router.url. Sample code:

Initialise the Angular Router

public route: any = '';

constructor( private _router: Router ) {
    this.route = this._router.url;
  }

Add the event listener to ngOnInit

  ngOnInit(): void {
    this._router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    )
      .subscribe(event => {
        this.route = event['url'];
        console.log(this.route)
        // do something here when route changes
      });
  }

answered Dec 22, 2020 at 8:06

jsdev2023

5681 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

how to refresh page when routing url changes in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related