Angular Material md-tabs with ui-router does not load initial tab

Question

Use case

I have an application that uses both, angular-material (v1.0.0) and ui-router (v0.2.15) and try to have a parent state that has child states which are shown within md-tabs/md-tab.

Problem

I get it working but without the initial tab to be loaded. Only after clicking on the tabs, their state gets loaded.

Code

angular.module('demoApp', ['ui.router', 'ngMaterial'])

  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('tabs', {
      url: '/tabs',
      template: '<div>' +
                '  <h1>Tabs View</h1>' +
                '  <md-tabs>' +
                '    <md-tab label="Foo" ui-sref="tabs.foo">' +
                '    </md-tab>' +
                '    <md-tab label="Bar" ui-sref="tabs.bar">' +
                '    </md-tab>' +
                '  </md-tabs>' +
                '  <md-content ui-view></md-content>' +
                '</div>'
    });
    $stateProvider.state('tabs.foo', {
      url: '/tabs/foo',
      template: 'Hello from Foo'
    });
    $stateProvider.state('tabs.bar', {
      url: '/tabs/bar',
      template: 'Hello from Bar'
    });
    $urlRouterProvider.when('/tabs', '/tabs/foo');
    $urlRouterProvider.otherwise('/tabs');
  })

;

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v1.0.0/angular-material.css">

  <script src="//rawgit.com/angular/bower-angular/master/angular.js"></script>
  <script src="//rawgit.com/angular/bower-angular-aria/master/angular-aria.js"></script>
  <script src="//rawgit.com/angular/bower-angular-animate/master/angular-animate.js"></script>
  <script src="//rawgit.com/angular/bower-material/v1.0.0/angular-material.js"></script>
  <script src="//rawgit.com/angular-ui/ui-router/master/release/angular-ui-router.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
  
<body>
  
  <div ui-view></div>
  
</body>
</html>

See my example at jsbin.

your jsbin doesn't seem to have any code in it..

Gustav
– Gustav

2015-12-15 09:09:27 +00:00
Commented Dec 15, 2015 at 9:09 — Gustav
– Gustav, Commented Dec 15, 2015 at 9:09
@Gustav I updated the link, sorry.

fdomig
– fdomig

2015-12-15 09:39:37 +00:00
Commented Dec 15, 2015 at 9:39 — fdomig
– fdomig, Commented Dec 15, 2015 at 9:39

koox00 · Accepted Answer · 2015-12-23 10:50:14Z

If you open the jsbin output to another window, so that you can watch the url, you will see that redirect to /foo doesn't work.

You have to configure first the urlRouterProvider and afterwards the stateProvider.
Also, from the ui-router wiki:

When using url routing together with nested states the default behavior is for child states to append their url to the urls of each of its parent states.

So /tabs/foo has to become /foo, the same with /tabs/bar.

( if you want absolute urls you can use url: '^/foo', )

So your code becomes:

angular.module('demoApp', ['ui.router', 'ngMaterial'])

.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/tabs', '/tabs/foo');
    $urlRouterProvider.otherwise('/tabs');

    $stateProvider.state('tabs', {
        url: '/tabs',
        template: '<div>' +
        '  <h1>Tabs View</h1>' +
        '  <md-tabs>' +
        '    <md-tab label="Foo" ui-sref="tabs.foo">' +
        '    </md-tab>' +
        '    <md-tab label="Bar" ui-sref="tabs.bar">' +
        '    </md-tab>' +
        '  </md-tabs>' +
        '  <md-content ui-view></md-content>' +
        '</div>'
    });
    $stateProvider.state('tabs.foo', {
        url: '/foo',
        template: 'Hello from Foo'
    });
    $stateProvider.state('tabs.bar', {
        url: '/bar',
        template: 'Hello from Bar'
    });
});

Working jsbin

Gonzalo Pincheira Arancibia · Accepted Answer · 2015-12-17 15:30:43Z

For more control, use a controller function on the parent state and set a default tab in a angular.value()

angular.module('demoApp', ['ui.router', 'ngMaterial'])
  .value('home_tab', 'tabs.foo')
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('tabs', {
      url: '/tabs',
      template: '<div>' +
                '  <h1>Tabs View</h1>' +
                '  <md-tabs>' +
                '    <md-tab label="Foo" ui-sref="tabs.foo">' +
                '    </md-tab>' +
                '    <md-tab label="Bar" ui-sref="tabs.bar">' +
                '    </md-tab>' +
                '  </md-tabs>' +
                '  <md-content ui-view></md-content>' +
                '</div>',
      controller: ['$state','home_tab', function($state, home_tab){$state.go(home_tab);}]
    });
    $stateProvider.state('tabs.foo', {
      url: '/tabs/foo',
      template: 'Hello from Foo'
    });
$stateProvider.state('tabs.bar', {
  url: '/tabs/bar',
  template: 'Hello from Bar'
});
$urlRouterProvider.otherwise('/tabs');

})

ranakrunal9 · Accepted Answer · 2015-12-22 10:17:37Z

0

Check below js fiddle may be it solves your issue "https://jsfiddle.net/v8kk5fqq"

answered Dec 22, 2015 at 10:17

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

Collectives™ on Stack Overflow

Angular Material md-tabs with ui-router does not load initial tab

Use case

Problem

Code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Use case

Problem

Code

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related