Load and call content of md-tab when it's clicked or selected from md-tabs (angular 1.5)

Question

I'm using following HTML structure in parent.html page (and have corresponding Controller for this parent HTML Page)

<md-tabs md-dynamic-height class="report-tabs" layout-align="center stretch" md-no-pagination="true">
<md-tab>
    <md-tab-label>
        <span class="tab-label">Tab 1</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-include="tab1-page-URL"></div>
    </md-tab-body>
</md-tab>
<md-tab>
    <md-tab-label>
        <span class="tab-label">Tab 2</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-include="tab2-page-URL"></div>
    </md-tab-body>
</md-tab>

Currently when I load this parent.html page, All contents of all tabs are getting loaded at beginning.

Don't we have lazy loading where contents of tab are loaded when it's active (when selected/clicked upon) ?
If we don't have such provision, How can I call function of child tab's controller, when particular tab is selected ? Currently all functions of all child tab's controllers are getting called - which is time consuming and not needed where user will see first tab only when page completes compiling and rendering ?

I've tried calling Child-tab controller functions on parent.html page, but unless all md-tab contents are not loaded, nothing from child-controller is accessible. Only accessible part in this page will be parent.html's own controller functions.

Let me know if any other way I can proceed, Or am I missing completely something here ? Thank you.

score 6 · Accepted Answer · answered Jul 17 '17 at 09:43

6

From the official doc, for using md-tab , there are no lazy loading contents.

If we don't have such provision, How can I call function of child tab's controller, when particular tab is selected ? Currently all functions of all child tab's controllers are getting called - which is time consuming and not needed where user will see first tab only when page completes compiling and rendering ?

My method is by using the button only tabs, then using dynamic ng-include, and setting the reladed view during selecting the tab, by md-on-select

something like:

<md-tabs>
  <md-tab label="Tab #1" md-on-select="onTabSelected(1)"></md-tab>
  <md-tab label="Tab #2" md-on-select="onTabSelected(2)"></md-tab>
  <md-tab label="Tab #3" md-on-select="onTabSelected(3)"></md-tab>
</md-tabs>
<md-content class="md-padding">
    <ng-include src="'templates/tabs/'+ tabId +'.html'"></ng-include>
</md-content>

controller :

$scope.tabId = 1; //default template loaded

$scope.onTabSelected = function(tabId) {
    //you can add some loading before rendering
    $scope.tabId = tabId;
};

templates directory:

templates/
    tabs/
       1.html
       2.html
       3.html

answered Jul 17 '17 at 09:43

Fetrarij

7,176
3
27
35

Let me try this approach but this looks very raw workaround. – Enigma Jul 17 '17 at 10:44
I think this is the only way if you want to load the template only when selecting a tab. – Fetrarij Jul 17 '17 at 11:04
I accept your suggestion as it's working good. Thanks @Fetra R. – Enigma Jul 18 '17 at 06:54
@Fetrarij, I am using Angular4, is there an example you could do (or direct me to) on how to do this in other version (2 to 4). Thanks – Maddy Jun 20 '18 at 21:21
@Maddy with angular 2+, you can use router-outlet and routerLink, check this: https://material.angular.io/components/tabs/overview#tabs-and-navigation – Fetrarij Jun 21 '18 at 05:38

Claudio Alberti · Answer 2 · 2018-07-04T16:14:26.733

You could try something like:

<md-tabs md-dynamic-height class="report-tabs" layout-align="center stretch" md-no-pagination="true">
<md-tab md-on-select="onSelect(tab)" ng-repeat="tab in tabs">
    <md-tab-label>
        <span class="{{tab.class}}">{{tab.label}}</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-if="selectedTab === tab.id" ng-include="{{tab.url}}"></div>
    </md-tab-body>
</md-tab>

and in controller:

$scope.tabs = [
    {id: 1, label: "label for tab 1", url: "url-tab-1.html"},
    {id: 2, label: "label for tab 2", url: "url-tab-2.html"}
];

$scope.onSelect = function(tab) {
    $scope.selectedTab = tab.id;
};
$scope.onSelect(1);

Load and call content of md-tab when it's clicked or selected from md-tabs (angular 1.5)

2 Answers2