Add docs for AbpLoadingDirective

pull/12663/head
Mahmut Gundogdu 3 years ago
parent 883a0b1211
commit b9f6b095f7

@ -0,0 +1,44 @@
# Loading Directive
You may want to block a part of UI and show a spinner for a while; the `LoadingDirective` directive is making this for you. `LoadingDirective` has been exposed by the `@abp/ng.theme.shared` package.
## Getting Started
In order to use the `LoadingDirective` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this:
```js
// ...
import { ThemeSharedModule } from '@abp/ng.theme.shared';
@NgModule({
//...
imports: [..., ThemeSharedModule],
})
export class MyFeatureModule {}
```
## Usage
The `LoadingDirective` is easy to use. The directive's selector is **`abpLoading`**. By adding the `abpLoading` attribute to an HTML element , you can activate the `LoadingDirectiveective` for the HTML element when value is true.
See an example usage:
```html
<div [abpLoading]="true">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur,
corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum
cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus
architecto.
</div>
```
The `abpLoading` attribute has been added to the `<div>` element that containing very long text inside to activate the `LoadingDirective`.
See the result:
![Loading directive result](./images/abp-loading.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

@ -1028,6 +1028,10 @@
"text": "Confirmation Popup",
"path": "UI/Angular/Confirmation-Service.md"
},
{
"text": "Loading Directive",
"path": "UI/Angular/Loading-Directive.md"
},
{
"text": "Toast Overlay",
"path": "UI/Angular/Toaster-Service.md"

Loading…
Cancel
Save