feat(tabs): adds ability for lazy loaded tabs

[amcdnl]

This adds the ability for users to lazy load the contents of a tab.

The API for this is adding a new <ng-template mdTabContent> in the content of your tab with the tab's contents inside this tag.

<md-tab-group>
  <md-tab label="First">
    <ng-template mdTabContent>
      <counter></counter>
    </ng-template>
  </md-tab>
  <md-tab label="Second">
    <ng-template mdTabContent>
      <counter></counter>
    </ng-template>
  </md-tab>
</md-tab-group>

This addresses: #1854 and #5222
References: angular/angular#18691

[jelbourn]

Need unit tests for this change

[jelbourn]

Can we attach it in ngDoCheck instead? It would be better to avoid the extra change detection pass.

[amcdnl]

Note: After this change I had to update the unit test that checked tab body contents.

[jelbourn]

Why use ngTemplateOutlet here instead of just creating a TemplatePortal directly from the TemplateRef from mdTabContent?

[amcdnl]

You need the original outlet for the projection, once projected then your able to read the template out and attach. I could replace the original outlet once projected but I'd have to attach/detach/attach. Is that what your suggesting?

[jelbourn]

I don't really follow what you mean.

I was thinking something like

export class MdTab {
  @ContentChild(MdTabContent, {read: TemplateRef}) _explicitContent: TemplateRef<any>; 
  @ViewChild(TemplateRef) _implicitContent: TemplateRef<any>;
}

Then use _explicitContent if it is defined, otherwise use _implicitContent (with the same code path we currently have for _content).

[amcdnl]

You are right, querying works even though its not projected. Updated per feedback.

[jelbourn]

Can you also update the documentation in this PR?

[jelbourn]

Make this comment something like

// It is important to attach the view during `DoCheck`; if an embedded view is created during
// change detection, it will either cause a changed-after-checked error or never be checked at all.

[jelbourn]

Omit spaces in braces

[jelbourn]

Why do you need done here instead of using async?

[amcdnl]

@jelbourn ready for another review.

[jelbourn]

LGTM

[josephperrott]

@amcdnl please rebase when you have a chance

[amcdnl]

@josephperrott - Merged :)

[josephperrott]

Look like this actually is causing a failure in a specific test case. Here is a minimal repro spec:

import {Component} from '@angular/core';
import {CommonModule} from '@angular/common';
import {async, ComponentFixture, TestBed, flushMicrotasks, fakeAsync} from '@angular/core/testing';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdTabsModule} from './public_api';


describe('MdTabs', () => {
  let fixture: ComponentFixture<TestTabs>;
  let element: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [CommonModule, MdTabsModule, BrowserAnimationsModule],
      declarations: [TestTabs]
    });
    TestBed.compileComponents();
  }));


  beforeEach(() => {
    fixture = TestBed.createComponent(TestTabs);
    element = fixture.nativeElement;
    fixture.detectChanges();
  });

  it('will pass after click.', () => {
    const firstTab = element.querySelectorAll('.mat-tab-label')[0] as HTMLElement;
    firstTab.click();
    fixture.detectChanges();

    expect(element.querySelectorAll('.mat-tab-body')[0].querySelectorAll('.items').length).toBe(1);
  });
  it('won\'t pass without click.', () => {
    expect(element.querySelectorAll('.mat-tab-body')[0].querySelectorAll('.items').length).toBe(1);
  });
});


@Component({
  template: `
    <md-tab-group>
      <md-tab label="tab 1">
        <p class="items"> content for tab 1</p>
      </md-tab>
      <md-tab label="tab 2">
        <p class="items"> content for tab 2</p>
      </md-tab>
    </md-tab-group>
  `
})
class TestTabs {}

I am fairly confident this is because on initial load, the DoCheck lifecycle hits before the view is initialized which causes it not attach the portalHost on the first round of change detection.

[amcdnl]

Waiting on @josephperrott changes on #7266 to be merged before rebasing.

[jelbourn]

Downgrading this to P2 since it can go in a minor release

[josephperrott]

@amcdnl rebase whenever you have a chance :)

[amcdnl]

@josephperrott I'm going to close this PR and open a new one given all the changes. See: #8921

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}