fxLayoutGap should consider hidden elements (fixed for fxHide but not when using css display: none)

[BenDevelopment]

Bug Report

What is the expected behavior?

fxLayoutGap should consider hidden elements. That means that no gap should be added between empty elements. It works when elements are hidden with fxHide, but it doesn't works when element are hidden with css display: none

What is the current behavior?

When a child element is hidden by css display: none, there is still a gap added.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-fxhidegap-jskf7r
You can have a look at the working version with fxHide here:
https://stackblitz.com/edit/angular-fxhidegap

What is the use-case or motivation for changing an existing behavior?

The existing behavior can be considerated as a "bug".

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

 "@angular/animations": "^8.2.12",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "8.2.12",
    "@angular/compiler": "8.2.12",
    "@angular/core": "8.2.12",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "8.2.12",
    "@angular/material": "^8.2.3",

Is there anything else we should know?

I wanted to add this to this existing issue, but it's closed by the new smart bot ^^ :
#136

Another thing, I think that the gap should not either be added depending on the descendant children visibility.

Example:

<div fxLayoutGap="10px">
	<div #divA>
		Content A
	</div>	
	<div #divB>
		<div style="display: none;">
			Content B
		</div>
	</div>	
	<div #divC>
		Content C
	</div>	
</div>

#divB has no visible content, only one gap should be added between #divA and #divD because technically #divB is not visible. I know it's tricky because #divB can be visible depending of his own css, maybe min-height or something else. Maybe this point should not be considerated.

[CaerusKaru]

The issue here is that fxShow/fxHide triggers change detection in fxLayoutGap directly. Direct style manipulation on the element itself does not have a similar effect. Is there a specific reason you can't use fxShow/fxHide?

[CaerusKaru]

Closing as stale. We incorporated something similar to this feature request as #1385, but I was hesitant to even add that. In some ways the RFC #1185 covers this, but in the existing library I don't see a place for this.

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