mat-tab inside ng-container failed to display in ivy

[felix-halim]

🐞 bug report

Is this a regression?

Yes, disabling ivy works.

Description

When ivy is enabled, this mat-tab failed to render:

<mat-tab-group>
  <ng-container *ngIf="title$ | async as title">
    <mat-tab label="Title">{{ title }}</mat-tab>
  </ng-container>
</mat-tab-group>

🔬 Minimal Reproduction

https://github.com/felix-halim/ng-container-ivy-bug

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.5
Node: 10.16.3
OS: darwin x64
Angular: 8.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.5
@angular-devkit/build-angular     0.803.5
@angular-devkit/build-optimizer   0.803.5
@angular-devkit/build-webpack     0.803.5
@angular-devkit/core              8.3.5
@angular-devkit/schematics        8.3.5
@angular/cdk                      8.2.0
@angular/cli                      8.3.5
@angular/material                 8.2.0
@ngtools/webpack                  8.3.5
@schematics/angular               8.3.5
@schematics/update                0.803.5
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

[SerkanSipahi]

I have the same issue! It works in Ivy but in a different Version!
When Ivy is enabled with angular/material v8.0.1 and angular/core v8.0.3 it works
but not with Iyv enabled in angular/material v8.2.1 and angular/core v8.2.8

@jelbourn Is this issue maybe related to angular/material?

[jelbourn]

Potentially, we're still in the process of working out issues with the components under ivy

[SerkanSipahi]

@jelbourn Should we open a new issue ticket in angular/material or its ok when the issue is located here?

[jelbourn]

Probably leave it here since if it worked in v8 it's probably a bug in ivy

[SerkanSipahi]

@jelbourn maybe this helps. Everything inside of ng-container will be ignored!

<mat-tab-group>
  {{title$ | json}} // will log
  <ng-container *ngIf="title$ | async as title">
    {{title$ | json}} // is not logged
    <mat-tab label="Title">{{ title }}</mat-tab>
  </ng-container>
</mat-tab-group>

[kara]

I suspect that this is because MatTabGroup uses a ContentChildren query to access the tabs, and descendants defaults to false.

One of the expected breaking changes in Ivy is:

By default, @ContentChildren queries will only search direct child nodes in the DOM hierarchy (previously, they would search any nesting level in the DOM as long as another directive wasn't matched above it).

Seems like this is something that needs to be fixed in the Material repo if Material tabs wants to support non-direct descendants for tabs.