I have a page showing a list of items retrieved with an http service, and a button to add a new one. After adding a new one, I navigate programmatically to the first page, but now the service is not invoked and the list is empty.
BikeTypesComponent
@Component({
selector: 'app-bike-types',
imports: [
MatListModule,
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule
],
template: `
<mat-selection-list #bikeTypesSelectionList [multiple]="false">
@for (bikeType of bikeTypesList; track bikeType.id) {
<mat-list-option [value]="bikeType.id">{{bikeType.name}}</mat-list-option>
}
</mat-selection-list>
`
})
export class BikeTypesComponent {
auth = inject(Auth);
private router = inject(Router);
bikeTypesList: BikeType[] = [];
bikeTypeService: BikeTypeService = inject(BikeTypeService);
loadBikeTypes(): void {
this.bikeTypeService.getAll()
.subscribe({
next: (data) => {
this.bikeTypesList = data;
},
error: (err) => {}
});
}
constructor() {
this.loadBikeTypes();
}
}
And, after saving the new BikeType, in the addBike‘s component code, I use this for navigating back to the bike-types page:
this.router.navigateByUrl('bike-types');
But the bike-types list is not loaded. The only way to have it loaded and displayed is to navigate to the page using the main menu, which ultimately is using this template code:
<a mat-list-item [routerLink]="bike-types">
0
Can you try below code:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { Router, NavigationEnd } from '@angular/router';
import { BikeTypeService } from './bike-type.service';
import { BikeType } from './bike-type.model';
import { Auth } from './auth.service';
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-bike-types',
imports: [
MatListModule,
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatIconModule
],
template: `
<form [formGroup]="form">
<mat-selection-list #bikeTypesSelectionList [formControl]="bikeTypesControl" name="bikeTypesList" [multiple]="false">
<mat-list-option *ngFor="let bikeType of bikeTypesList" [value]="bikeType.id">{{bikeType.name}}</mat-list-option>
</mat-selection-list>
</form>
`
})
export class BikeTypesComponent implements OnInit {
auth = inject(Auth);
private router = inject(Router);
bikeTypesList: BikeType[] = [];
bikeTypeService: BikeTypeService = inject(BikeTypeService);
form: FormGroup;
bikeTypesControl = new FormControl();
constructor() {
this.form = new FormGroup({});
}
ngOnInit() {
this.loadBikeTypes();
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
if (event.urlAfterRedirects === '/bike-types') {
this.loadBikeTypes();
}
});
this.form = new FormGroup({
bikeTypesList: this.bikeTypesControl
});
}
loadBikeTypes() {
this.bikeTypeService.getAll()
.subscribe({
next: (data) => {
this.bikeTypesList = data;
},
error: (err) => {}
});
}
navigateToRoute(route: string) {
this.router.navigate([route]);
}
}When a NavigationEnd event occurs, check if the URL is /bike-types. After checking, call the loadBikeTypes method to reload the data. I have moved the data loading logic into a separate loadBikeTypes method so that it can be called both in ngOnInit and when the route is re-entered without duplicating the code. This ensures that the list is reloaded when you navigate back to the /bike-types route regardless of programmatically or through the main menu.
2