Angular2: progress/loading overlay directive

Question

I\'m trying to create a loading indicator/overlay in Angular2 that I can add to any container div. When a dynamic boolean property like isLoading changes, it should

Answer 1

We created a similar thing in a project, however we stuck to the element-directive approach. Not sure if/what benefits you would get by converting it to a directive. I think it would even make it harder.

Our solution was for sure no the cleanest approach, here's roughly what we did which worked well for us so far:

When the components state toggles to "is showing" the component will inspect its parent element for size information (height/width) and apply these values to itself.

for positioning we use the simple: container-element with 0x0px positionioned at pos 0/0 of the parent (relative), inside that there is the real overlay (positioned fixed, size set dynamically as described above).

For padding/margin i'm currently not sure if we had to do lots of fixes, i think it shouldn't be too difficult to get around that by querying the parent element.

We even re-called our "calculate size" method a few times after the component is shown: the reason is that the element which we wanted to overlay sometimes changed its size during the loading process. Imagine for example a table (has 3 lines), gets reloaded, expands to 6 lines but for some reason we aren't done loading so the overlay should still be shown, but we want the overlay to automatically cover these newly added lines as well.