Angular Button Routing Bug

Question

in my angular app I have a mat-card component with a list of buttons. Code as followed:

<mat-card class="side-card">
    <mat-card-title>Images</mat-card-title>
    <mat-card-subtitle>Choose to start explanation</mat-card-subtitle>
    <p></p>
    <mat-divider inset></mat-divider>
    <p></p>
    <mat-card-content [style.overflow]="'auto'" [style.height.px]="'720'">
        <mat-selection-list #image [multiple]="false">
            <mat-list-option class="list" *ngFor="let image of images" [value]="image">
              <button [routerLink]="['/images', image._id]" routerLinkActive="active" class="transparent-button">{{image.imagePath.split("/").slice(-1)}}</button>
            </mat-list-option>
          </mat-selection-list>
    </mat-card-content>
</mat-card>

I got two problems here:

1. If I click on a button directly after they loaded the button routing is not working. I need to wait a few moments until I can click on a button with a successful routing.
2. After I already clicked on a button and it redirected me to /images/id, I cannot click on any button with a successful redirecting to another id. That means in the browser url I can see the different id, but it´s not loading the page of it.

Does anyone know anything about this and can help me? That would be very helpful, thank you in advance.

Answer 1

For your second problem you have to subscribe to the activated route - params property to get notified to the changes in the route.