Topic: mdb-tabset change Tab on router.navigate
Expected behavior
When I use this.router.navigate([ROUTE_URL.overview]); in an Component where I have a md-tabset, the md-tabset should not change to the last tab, while my route transition is processing. I use default angular route animation
Actual behavior
After router.navigate, the angular animation starts, but the the md.tabset change to the last defined tab. In DOM you can see that there is set the "active" class to the last tab.
Code, just a simple tabset.
<!-- Nav Tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
<!--Panel 1-->
<mdb-tab heading="Profile">
<div class="row">
<div class="col-12">
<br>
<p>
1111111111
</p>
</div>
</div>
</mdb-tab>
<!--Panel 2-->
<mdb-tab heading="Follow">
<div class="row">
<div class="col-12">
<br>
<p>
22222222222
</p>
</div>
</div>
</mdb-tab>
<!--Panel 3-->
<mdb-tab heading="Contact">
<div class="row">
<div class="col-12">
<br>
<p>
333333333333333
</p>
</div>
</div>
</mdb-tab>
</mdb-tabset>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.0.0
- Device: pc
- Browser: google chrome
- OS: win10
- Provided sample code: No
- Provided link: No
Related topics
Arkadiusz Idzikowski staff commented 5 years ago
We will try to reproduce that on our end. We use tabs in application with router navigation and we didn't encounter such problems during tests.
Do you use any public methods/inputs of mdb-tabset to change active tab programatically?
Kloew commented 5 years ago
I have the simples tabset as i posted in my first message. You should activate default angular animation to route so you can see it before the page changes.
https://angular.io/guide/route-animations
Its the same when you use simple navbar navigation.
Maybe the tabset have a behaviour for look to #hash in url to switch to any tab ?
Arkadiusz Idzikowski staff commented 5 years ago
Thank you for the details, they will be very useful in the debugging process.