Material: Tabs: should have lazy-load option

Created on 2 Nov 2015 · 20Comments · Source: angular/material

Right now all tabs content is getting loaded when tabs are compiled,
we should add lazyload option to support tab content load only on request.

Source

EladBezalel

👍8

Most helpful comment

You can use NavBar for lazy loading or the ngIf option

EladBezalel on 8 May 2017

👍2

All 20 comments

RichOren on 3 Nov 2015

+1
We're in the process of migrating from bootstrap to material and after changing all our tab panes to material we noticed this. I can't believe more people aren't complaining about this. Having lazy load is critical when your tabs make frequent callbacks to the server for updated content on web socket messages. Once a tab is no longer active the controller should be destroyed and only reinitialized when the tab is selected again. I'm going to try playing with the disconnect scope option and see how it works.

ajones-miovision on 14 Jan 2016

Looks like the disconnect option is not working out too well for us. We lose information when scope is 'reconnected'. Would be nice if the entire widget (controller and everything) was reinitialized and destroyed when switching tabs.

ajones-miovision on 18 Jan 2016

+1
Any update on this issue please?
Thanks

vijquick on 3 Feb 2016

+1
As with @vijquick, any update on this issue?

matthewpull on 15 Feb 2016

@matthewpull , I have a temporary solution if you really want to use md-tabs, and want to load the content lazy. The main thing is we will be using ng-if to load the content. Below is the sample code.
<md-tabs> <md-tab data-ng-repeat="tab in tabs" active="selected==tab.id" label="{{::tab.name}}" data-ng-click="changeTab(tab.id)"> <div data-ng-if="selected==tab.id"> <data-ng-include src="'partialView.html'"></data-ng-include> </div> </md-tab> </md-tabs>

vijquick on 15 Feb 2016

👍2

@vijquick What is this solution?

matthewpull on 15 Feb 2016

@matthewpull , I have edited my previous post. Sorry by mistake I have submitted and I edited the same

vijquick on 15 Feb 2016

@vijquick Ah I see. Nice solution, but what I really need the ability to execute code _after_ the content is loaded. I'll wait and see what the official solution provides. Thanks for your help, though!

matthewpull on 15 Feb 2016

@matthewpull If you have a controller bound to the partialview.html then that code will be executed when the view content is rendered. In my project I have a case where the tabs are generated dynamically and each tab has lots of data. So what I have done is I created a partial view and a controller for that partial view. Using ng-if I am lazy loading the view.

vijquick on 15 Feb 2016

+1
I had some success with the new transclude lazy loading feature in angular 1.5 in combination with ng-if, md-selected and a directive inside each tab that wraps the content with transclusion.

// the wrapper component
angular.module("app").component("contentWrapper", {
        template: "<ng-transclude></ng-transclude>",
        transclude: true
});


// in template
<md-tab>
  <content-wrapper ng-if="$ctrl.selectedTab == 0">
      ... complex content...
  </content-wrapper>
</md-tab>

With that the transcluded tab content is only compiled when the related tab gets active and this greatly improves performance.
Unfortunately the dynamic height animation is a bit jumpy right now .

EDIT: Because the content was recompiled when switching tabs, I ended up with a helper flag that is set after the related tab is loaded (can be combined with one-time-binding).

<md-tab>
  <content-wrapper ng-if=":: $ctrl.selectedTab == 0 || $ctrl.tab0IsLoaded">

   /* somewhere set the flag...  */ 
   <... ng-init="$ctrl.tab0IsLoaded = true">

  </content-wrapper>
</md-tab>

r0b- on 22 Feb 2016

👍1

Thank you so much @matthewpull ...this code is working for me

nikitadmx on 6 Apr 2016

@ThomasBurleson why was this deprecated? Is there no longer a plan to support lazy loading tabs?

jsr6720 on 2 May 2016

Hi @jsr6720 , Here is the link to the spring cleaning rules:
https://groups.google.com/forum/#!topic/ngmaterial/3Ip9nd68bfk

david-gang on 3 May 2016

I am having this same issue. It takes more time for my _DOM_ to load if I have two dynamic tabs with dynamic contents. It take 2sec struck (if loading then I can use some loading image but it strucks). Is there any solution for this?