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

[beleta]

Bug Report

When using te directives fxHide or fxShow in a 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

[CaerusKaru]

@beleta Can you provide a StackBlitz or minimal GitHub repo to demo this? Preferably without PrimeNG but if it must have it then that's fine.

[beleta]

I found that the problem does not depend on PrimeNg but simply on <ng-container>.

This is the StackBlitz project that shows the error: https://stackblitz.com/edit/angular-ivy-ecgfwk.

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

[beleta]

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.

I don't agree at all, ng-container is used for this kind of things because they don't add a DOM element as div do, for example ngIf works with no problem in this case, the following line works perfectly:

<ng-container *ngIf="!mediaObserver.isActive('lt-md')">

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

[CaerusKaru]

@MRMokwa is correct, and thank you for that explanation! Closing as working as intended.

[angular-automatic-lock-bot[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._}