Is possible to reload component when url param changes in Angular?

Question

I have route called 'partners' and when path is hitting 'partners/:slug' i'm listening for activatedRoute changes to update translated title.

When i first enter PartnerComponent page title is translated and displayed correct. But when i'm going to the bottom of that component and changing to other partner my page title goes to 'partners' without correct page title.

HINTS

• after page refresh title is changing for the good one
• if i change url directly then page title is also correct

What did i miss?

My routing file:

import { PartnerComponent } from './container/partner.component';

const routes: Routes = [
    {
        path: ':slug',
        component: PartnerComponent,
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class PartnersRoutingModule {}

And my PartnerComponent

@Component({
    selector: 'app-partner',
    templateUrl: './partner.component.html',
    styleUrls: ['./partner.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [HttpService],
})
export class PartnerComponent implements OnInit, OnDestroy {
    partner$ = new BehaviorSubject<Partner>(null);
    private subscriptions = new Subscription();

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute,
        private httpService: HttpService,
        private windowService: WindowService,
        private routingTabTitleService: RoutingTabTitleService,
    ) {}

    ngOnInit(): void {
        this.subscriptions.add(
            this.activatedRoute.params
                .pipe(
                    map((params) => params.slug as string),
                    mergeMap((slug) => {
                        return this.httpService.getPartner(slug);
                    }),
                    tap((partner) => {
                        this.partner$.next(partner);
                        this.displayTranslatedProduct(partner.name);
                        this.windowService.scrollTop();
                    }),
                    catchError(() => {
                        void this.router.navigate(['pl', 'not-found'], { skipLocationChange: true });
                        return of(null);
                    }),
                )
                .subscribe(),
        );
    }

    displayTranslatedProduct(partnerName: string): void {
        const translatedTitle = this.routingTabTitleService.translateTitle('PAGE.TITLE', 'partner');
        this.routingTabTitleService.setTitle(`${translatedTitle}: ${partnerName}`);
       
    }

    ngOnDestroy(): void {
        this.subscriptions.unsubscribe();
    }
}

and on other component with routerLinks i'm navigating like this:

 <a
        *ngFor="let partner of partners"
        [routerLink]="'/partners/' + partner.slug | localize"
        class="partner-logo d-flex align-items-center justify-content-center pointer flex-wrap"
    >

Answer 1

Working solution:

ngOnInit(): void {
    this.activatedRoute.params.pipe(tap(() =>  {
        void this.router.navigate([this.router.url], { relativeTo: this.activatedRoute, skipLocationChange: false });
    })).subscribe();        
}

Answer 2

Add this to the ngOnInit() of the component (PartnerComponent) that is subscribing to the param:

ngOnInit(): void {
  // ... subscription to param
  this.router.routeReuseStrategy.shouldReuseRoute = () => false
}