CODEWITHSUNDEEP
javascriptangularjstabslazy-loadingangular-material
php123
php123

Reputation: 155

Angular Material Tabs Lazy Load

I have recently started using AngularJS but I have run into a problem when using md-tabs (https://material.angularjs.org/latest/demo/tabs).

On my page, I have several tabs and there are approaximately 30 images placed in each tab via ng-repeat. The problem is that all of the images in all of the tabs are loading when the page is opened which is taking a long time. I would prefer if only the content of the first (active) tab was loaded when the page is opened and that the content of all the other tabs is only loaded as they become active.

Here is my code for the tabs:

<md-content>
    <md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
        <md-tab label="Tab One">
            <md-content class="md-padding">
                <div ng-repeat="fruit in Fruits">
                    <img ng-src="images/{{ fruit.FruitId }}.png">
                    <h4>{{ fruit.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Two">
            <md-content class="md-padding">
                <div ng-repeat="veg in Vegetable">
                    <img ng-src="images/{{ veg.VegId }}.png">
                    <h4>{{ veg.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Three">
            <md-content class="md-padding">
                <div ng-repeat="animal in Animals">
                    <img ng-src="images/{{ animal.AnimalId }}.png">
                    <h4>{{ animal.Name }}</h4>
                </div>
            </md-content>
        </md-tab>
    </md-tabs>
</md-content>

So essentially what i want to do is 'lazy load' the content of each tab so that the content is only loaded when the relevant tab is selected.

As I am quite new to Angular, I am unsure of how to approach this. I notice that it has been highlighted as an issue (https://github.com/angular/material/issues/5500) but a solution has yet to be provided.

I was thinking of using a combination of ng-if and ng-include to add the content to the chosen tab dynamically but I don't really know where to start with this approach.

Any help would be greatly appreciated

Upvotes: 3

Views: 3961

Answers (2)

Waruyama
Waruyama

Reputation: 3533

A simple way of doing it would be setting a flag to true the first time a tab gets selected and waiting with building the content DOM until the flag is true. You would have to do it like this:

  • Use md-on-select="::tabXXDisplayed=true" on the tab to set a variable to true on first display (the :: make the expression a one-time-expression)
  • Use ng-if="tabXXDisplayed" on the tab content

Here is an example snipplet:

<md-tab md-on-select="::tabXXDisplayed = true">
    <md-tab-label>tabXX</md-tab-label>' +
    <md-tab-body>
      <div ng-if="tabXXDisplayed">
        // your content for tabXX here
      </div>
    </md-tab-body>
  </md-tab>

Upvotes: 3

Maxim Shoustin
Maxim Shoustin

Reputation: 77910

md-tabs has property md-selected

For example:

<md-tabs
        md-selected="selectedIndex" 
        md-center-tabs="true"
        md-stretch-tabs="always"
        md-dynamic-height 
        md-border-bottom="">

You can create watcher that will be triggered when user selects new tab, like:

 $scope.$watch(function () {
      return $scope.selectedIndex;
  },
   function (newVal, oldVal) {

    if (newVal !== undefined && newVal !== oldVal){
          // load other images
    }
 });

Upvotes: 1

Related Questions