[Tabs] Tabs are loaded eagerly

[RoxKilly]

Bug, feature request, or proposal:

Bug or possibly poor design

What is the expected behavior?

When a tab is never opened, its contents should never be added to the DOM. This is how things worked with alpha 9 on Angular 2.0.1

What is the current behavior?

Even if a tab is never opened, its content is added to the DOM before being removed.

What are the steps to reproduce?

This plunk shows the old behavior , from alpha 9. If you run the application while looking at network requests for images, you will see that only the image from the first tab is downloaded. To download another image, you need to open its tab.

This plunk shows the new behavior, from alpha 10. In this case, all images are downloaded immediately, then removed from the DOM.

What is the use-case or motivation for changing an existing behavior?

In my use case, I have a menu on the first tab and a video on each of several other tabs. Since I upgraded to alpha 10, the browser fetches all the videos at once instead of waiting for the user to open a tab. This results in excessive bandwidth usage.

The same problem would occur for an app that has different image galleries organized by tab

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.1.2, Material 2 alpha 10 on Firefox 49

[jelbourn]

@andrewseguin I think this might be a bug in Angular based on the way we're doing tabs.

[RoxKilly]

A dirty workaround: I listen to (selectChange) and I wrap the tab contents in an *ngIf that adds to the DOM only if the tab is currently selected.

See this plunk

[elvirdolic]

It shouldn't load the content until the user click the tab.

I think the best approach is to load the content when the click event is fired and the loaded content is not destroyed anymore if the user switch to another tab and switch back again

[esbeto]

Might be related: after upgrading to alpha.10

Tabs that have an *ngIf are breaking for me:

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'appendChild' of null

[RoxKilly]

@esbeto my last demo (see my most recent post above) uses a working *ngIf within a tab

[esbeto]

@RoxKilly There's something going on with Angular 2.2.0 and material tabs, that you can't use *ngIf in a tab, like so:

<md-tab *ngIf="expression">
</md-tab>

[RoxKilly]

@esbeto Oh I see. I thought you meant:

<md-tab>
   <div *ngIf="expression"> ... </div>
</md-tab>

Now I understand. It sounds like a separate issue from all tabs loading eagerly. In your shoes I would open a new issue and link to a demo of the problem.

[jeffreyhofstede]

The same error occurs when using *ngIf in a md-menu-item in combination with webpack.

<md-menu x-position="before" #menu="mdMenu">
            <button *ngIf="expression" md-menu-item>Bewerken</button>
</md-menu>

EXCEPTION: Cannot read property 'appendChild' of null

[benelliott]

@jelbourn did you have any more thoughts on this? As far as I can tell this bug was introduced with the Tabs API simplification in PR #1645. I have my own version of the tabs component(s) and just applied this change myself to try to fix the issue described in #573. It must be something to do with unwrapping the tab content from the <template> tags.

[benelliott]

I reintroduced my equivalent of the md-tab-content directive to fix the issue in my own version.

[mateuszwitkowski]

Anyone knows when this will be fixed? In my case upgrading from alpha 9 is just impossible know. Every tab in my app contain a component that contains more nested components and it takes ages to render. Furthermore if I change tab every component in every tab is created and immediatelly destroyed. Components are using services to fetch data when initialized so for example: if I have 6 tabs and movefrom one to another I have 6 requests in network.