angular material animations and ui-router

Question

I'm using angular-material and ui-router within an angular-meteor project. I managed to successfully use ui-router with angular-material and everything's working except for one thing: if you notice, angular material tabs have a tiny animation making each tab's content slide from left or right when clicking on the tab. Using ui-router this animation is lost. Is there any way to keep it using ui-router? Thanks beforehand.

Can you show how do you use your tabs in the views and ui-routes config($stateProvider i mean)? — rkalita
– rkalita, Commented Jan 21, 2016 at 14:25
pastebin.com/jERT29BR here. And this is how I link ui-router to each md-tab: pastebin.com/x4MJLfBE I also made my meteor project work in local so you can see: pokerstrazzk.duckdns.org white tabs are using ui-router so animations don't work. Green tabs aren't linked to ui-router so they work. — skjorrface
– skjorrface, Commented Jan 21, 2016 at 14:41
Ok, now my tabs look like this: pastebin.com/s0hfACsj nothing changed though. — skjorrface
– skjorrface, Commented Jan 21, 2016 at 14:53

rkalita · Accepted Answer · 2016-01-21 14:58:59Z

1

First of all you need to use 'ui-sref' attribute with states in your tabs instead of this pastebin.com/x4MJLfBE 'ui-view' to display your templates from the states.

<md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect>
    <md-tab label="Configuration" ui-sref="admin.configurations"></md-tab>
    <md-tab label="Users" ui-sref="admin.users.list"></md-tab>
    <md-tab label="Songs" ui-sref="admin.songs"></md-tab>
</md-tabs>
<div ui-view></div>

ui-sref it's your states

.state('admin.configurations', {
            url: '/configurations',
            templateUrl: 'app/admin/configurations/configurations.tmpl.html',
            controller: 'ConfigurationsController as ctrl',
        })
.state('admin.users.list', {
            url: '/list',
            templateUrl: 'app/admin/users/users.tmpl.html',
            controller: 'UsersListController as ctrl'
        })

Plus your parent state must be abstract. It means that now you in admin state where you have template with your tabs

.state('admin', {
            url: '/admin',
            templateUrl: 'app/admin/admin.tmpl.html',
            controller: 'AdminController as ctrl'
        })

edited Jan 21, 2016 at 14:58

answered Jan 21, 2016 at 14:50

rkalita

5754 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

skjorrface Over a year ago

Ok, now my tabs look like this: pastebin.com/s0hfACsj nothing changed though.

rkalita Over a year ago

plus you should always dysplay examples of your code in your questions, because your links, can be lost if someone has the same problem

skjorrface Over a year ago

I used that workaround with $scope.watch, because ui-router doesn't seem to work on md-tab using ui-sref (see here: github.com/angular/material/issues/2344). Plus, it would be even more convenient then if code was tested and working before being posted as an answer

skjorrface · Accepted Answer · 2016-01-24 02:29:36Z

0

Ok I solved this way: it is sufficient avoiding "template" or "templateUrl" inside the router state definition and embed each content inside md-tab itself. Let the router state definition just change the url and everything will work.

answered Jan 24, 2016 at 2:29

skjorrface

1612 silver badges17 bronze badges

1 Comment

joerno Over a year ago

I have no idea, how to solve the problem with your solution. Maybe you can give an example?

Collectives™ on Stack Overflow

angular material animations and ui-router

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related