Possible to target single node?

[ghost]

I'm just starting to use the ngBusy directive and really like it, but my use case requires the ability to set any given element "busy", instead of setting one entire Angular component busy.

For instance, we have a stateful component that handles async activity - it contains a form and a table as child components. From within that parent component I'd like to apply the ngBusy directive to one child component:

<div class="parent">
  <form class="user-form">
    ...
  </form>

  <table class="user-table" [ngBusy]="loadingPromise">
    ...
  </table>
</div>

Or, as a more simple example - in the demo app, if you modify demo file table.component.html to contain two identical tables (just for demo purposes, obviously not a great component name), would it be possible to just apply the ngBusy directive to one of the two tables?

table.component.html

<!-- original table, without busy -->
<table class="table">
    <thead class="thead-default">
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Species</th>
            <th>Occupation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
</table>
  ...
</table>

<!-- new second table, with busy -->
<table class="table" [ngBusy]="loading">
  ...
</table>

[KarlPurk]

I really need this feature too. Blocking the whole UI while one component loads data isn't a viable solution. @devyumao can you please comment on whether this is a planned enhancement?

[KarlPurk]

@giannico I've got this working using a relative positioned container as mentioned in the FAQ.

To get this working with the example you gave just wrap the second table in a relative positioned element:

<!-- original table, without busy -->
<table class="table">
    <thead class="thead-default">
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Species</th>
            <th>Occupation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
</table>
  ...
</table>

<!-- new second table, with busy -->
<div style="position: relative">
   <table class="table" [ngBusy]="loading">
      ...
   </table>
</div>