fxHide or fxShow do not work in <ng-container>

Bug Report

When using te directives fxHide or fxShow in a <ng-container> element inside a body template of a PrimeNG Table like this:

<table>
  <tr *pTemplate="'body'" ...>
    <td>...</td>
   ...
  <ng-container fxHide.lt-md>
     <td>...</td>
    ....
     <td>...</td>
  </ng-container>   
</table>

The following error is shown:

ERROR TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at DefaultShowHideDirective.ngAfterViewInit (show-hide.ts:70)

What is the expected behavior?

No error shown.

What is the current behavior?

The error is shown.

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

@angular/core: 9.1.7 @angular/cdk: 9.2.4 @angular/flex-layout: 9.0.0-beta.31

[mrmokwa]

I’m not quite sure how flex-layout works under the hood, but it probably takes the directive and apply HTML markup based of it.

In the case of fxHide, it takes the element and sets display:none. ng-container in the other hand, as you said, don’t add a element to the DOM. There’s no element to add the style display:none from fxHide.

Take a look at the example below, the same principe will be applyed.

<div style="background-color: green">
   <ng-container style="background-color: red">
      Foo
   </ng-container>
</div>

[mrmokwa]

IMO it’s not a bug, ng-container doesn’t get renderered in the html, so the directives won’t apply. Changing ng-container to a div will solve your problems. Obs: Same thing will happen if you specify a class or style in the ng-container.