Empty list is shown after adding a record

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: `
<form [formGroup]="form">
<mat-selection-list #bikeTypesSelectionList [formControl]="bikeTypesControl" name="bikeTypesList" [multiple]="false">
@for (bikeType of bikeTypesList; track bikeType) {
<mat-list-option [value]="bikeType.id">{{bikeType.name}}</mat-list-option>
}
</mat-selection-list>
</form>
`
})
export class BikeTypesComponent {
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.bikeTypeService.getAll()
.subscribe({
next: (data) => {
this.bikeTypesList = data;
},
error: (err) => {}
});
this.form = new FormGroup({
bikeTypesList: this.bikeTypesControl
});
}
navigateToRoute(route: string) {
this.router.navigate([route]);
}
}


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');


or:

this.router.navigate(['bike-types']);


With the same result: 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">

Continue reading...