CODEWITHSUNDEEP
javascripthtmlangular
user1787764
user1787764

Reputation: 31

Angular2: progress/loading overlay directive

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 grey out the div and show a spinning indicator, and disappear again after the property changes back.

I got a working solution: 

@Component({
  selector: 'loading-overlay',
  styleUrls: ['...'],
  template: `
        <div class="bg-loading" *ngIf="isLoading">
          <h3><span class="glyphicon glyphicon-refresh spinning"></span></h3>
        </div>`
})
export class LoadingOverlay {
  @Input()    
  isLoading: boolean;
}

And usage:

<div> <!-- container for whatever -->
  <loading-overlay [isLoading]="dynamicProp"></loading-overlay>
  <!-- ... other content -->
</div>

So far so good, but this is hard to get right with styling for different use cases, mostly to make the margins/paddings look good in different containers.

So I want to make this whole thing into an attribute directive like so:

<div loading-overlay="dynamicProp"> <!-- container for whatever -->
  <!-- content ... -->
</div>

I'm pretty sure this should be easy, but I can't find anything useful in the docs or via googling. It feels like I should dynamically add/remove the overlay div, but I'm not sure if this is the right approach, or even how to do it.

Upvotes: 3

Views: 4698

Answers (1)

NoUsername
NoUsername

Reputation: 733

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.

Upvotes: 2

Related Questions