fxLayoutGap not being updated after removing element from DOM

[solkaz]

Plunker
Gif

I have some components that are utilizing fxHide/fxShow; when these components are made visible, the fxLayoutGap isn't being correctly applied, as you can see in the GIF/Plunker. Looking at the HTML, I can see that the margin-right property isn't being applied to the newly-visible component, and only happens to a component that was previously hidden at first, e.g. in the Plunker, you should notice that the desktop tile will still retain its margin-right property even after it is hidden, whilst the mobile-only tile will never have it.

[bcoutch]

I see a similar problem just using *ngIf:
Plunker

After the fxLayoutGap has set the margin-right property, it won't recompute if the last child in the flex layout disappears.

[aldo-roman]

Confirming this. I saw the issue on a column layout using *ngIf:
https://plnkr.co/edit/HI3gRMHlSS10RTSkERwv?p=preview

Notice:

1. The gap is not there when the app starts.
2. Gap is added after a node is added to DOM.
3. Gap is not removed after a node is removed from DOM.

BTW, I would rename the issue as fxLayoutGap not being updated after removing element from DOM

[aldo-roman]

Update: the issue only seems to appear when there are 2 nodes, and remove 1.

When there are 4 nodes, remove 1, 3 child lefts, the issue does not reproduce.
https://plnkr.co/edit/ClQx0ld1Dm1PYtesTq6M?p=preview

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