Drawer is not recognizing a change of route by router links

[Backe]

Hi!

I try to use drawer component as a menu. So I configured the items as in example https://stackblitz.com/run/?file=app%2Fproducts.component.ts .

If I try to use a link like <a [routerLink]="['/']">to home</a> in product.component.ts it redirect me to home page. But in drawer component the active item isn't change. It stays at Products.

Shouldn't the Home item be active? Are my expectations wrong?

Thank you in advance.

[Martin]

Hi Backe,

Unfortunately, the provided StackBlitz does not run on my side.

However, I created an example where the reported behavior is reproduced. You are right that the selected item should be changed according to the content. In order to do that, we need to listen for every route change and manually select the first item (in ngAfterViewInit). To trigger the change detection I updated the bound items and now the first item of the Drawer is selected correctly.

Please check the following example where the approach is demonstrated:

https://stackblitz.com/edit/angular-9tkxyo?file=app%2Fapp.component.ts

I hope this helps. Let me know if I can provide any further assistance with this case.

Regards,
Martin
Progress Telerik

[Jose Wilson]

I am facing a similar problem and here are the steps to repro,

Go to kendo-angular-ui/components/layout/drawer/routing/

Click on edit in stackblitz.

In the stackblitz url, paste <Url>/products and press enter.

Only the Home page is loaded and not the Products page as expected.

Any ideas?

Thanks,

Jose