ng-container display issue

[etovian]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Nesting ng-container in a transclusion results in the following error:

TypeError: Cannot read property 'display' of undefined
at BaseFxDirectiveAdapter.BaseFxDirective._getDisplayStyle
...

Expected behavior

The ng-container would render its contents.

Minimal reproduction of the problem with instructions
Nest ng-container in a component that supports transclusion, like so:

<user-form [user]="user" (submitted)="submitted($event)"> <ng-container class="additional-actions"> <button md-raised-button> Button One </button> <button md-raised-button> Button Two </button> </ng-container> </user-form>

It should be noted that the individual buttons can implement the "additional-actions" class directly, and the html will render without error:

<user-form [user]="user" (submitted)="submitted($event)"> <button class="additional-actions" md-raised-button> Button One </button> <button class="additional-actions" md-raised-button> Button Two </button> </user-form>

What is the motivation / use case for changing the behavior?
Allow ng-container to render child content in a transclusion.

Please tell us about your environment:
@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

• Browser:
  Chrome, Version 57.0.2987.133 (64-bit)

• Language:
  Typescript 2.2.0

[tbosch]

Hello, we need a reproduction for this...

[etovian]

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'repro-error',
  template: `
    <div>
      <parent>
        <ng-container class="nested-content">
          <button>Click Me</button>
        </ng-container>
      </parent>
    </div>
  `
})
export class ReproErrorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@Component({
  selector: 'parent',
  template: `
    <div>
        <ng-content select=".nested-content"></ng-content>
    </div>
  `
})
export class ParentComponent {

}

[etovian]

Those components will reproduce the problem. If you move the button out of the ng-container, remove the ng-container from the component, and add the nested-content class to the button, it should work as expected.

[vicb]

can not reproduce https://plnkr.co/edit/w8FdYIINi5W0l4i24HnI?p=preview

Please link a plunker next time you report an issue. Thanks.

[LastDragon-ru]

can not reproduce

If you put <tr> inside ng-container it will not work :(

https://plnkr.co/edit/xRuoiILaPtSliQ8KEGCB

PS: Seems related to #18314?

[BenevidesLecontes]

I'm having this issue on ie11. And it work on all other browsers.

[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.}