You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add to your project via [npm](https://www.npmjs.com/package/ng-block-ui)
11
12
12
13
```bash
@@ -27,7 +28,9 @@ import { BlockUIModule } from 'ng-block-ui';
27
28
})
28
29
exportclassAppModule { }
29
30
```
31
+
30
32
## Quick Start
33
+
31
34
Wrap your main components in your app root template with a `block-ui` component.
32
35
33
36
Import the `BlockUI` decorator into your component and declare a property with the decorator.
@@ -65,16 +68,19 @@ export class AppComponent {
65
68
```
66
69
67
70
## Settings
71
+
68
72
Settings can be changed on the module level and component/directive level. Also, in some cases settings can be overwritten via the method level.
69
73
70
74
### Default Message
75
+
71
76
A default message can be configured to be shown instead of passing a message each time to the `start` method. The default message will be shown any time blocking is activated.
| `template` | <code>Component | TemplateRef</code> | Custom template to be used when blocking |
156
169
157
170
#### Component Custom Template
171
+
158
172
Create a component and declare it in your app module.
159
173
The component also will need to be added to the `entryComponents` property of the module.
160
174
161
-
*Example Component:*
175
+
_Example Component:_
162
176
163
-
*Note: When providing a `Component` as a template just add the `{{message}}`
164
-
interpolation to your template and it will display your default message or the message passed to the `start` method.*
177
+
_Note: When providing a `Component` as a template just add the `{{message}}`
178
+
interpolation to your template and it will display your default message or the message passed to the `start` method._
165
179
166
180
```js
167
181
// Template component
@@ -170,14 +184,15 @@ interpolation to your template and it will display your default message or the m
170
184
template:`
171
185
<div class="block-ui-template">
172
186
<img src="logo.png" />
173
-
<p>{{message}}</p>
187
+
<p>{{message}}</p>
174
188
</div>
175
-
`
189
+
`,
176
190
})
177
191
exportclassBlockTemplateCmp {}
178
192
```
179
193
180
194
##### Module Level
195
+
181
196
```js
182
197
@NgModule({
183
198
imports: [
@@ -195,14 +210,15 @@ export class AppModule { }
195
210
```
196
211
197
212
##### Component Level
213
+
198
214
```js
199
215
@Component({
200
-
selector:'app-root',
216
+
selector:"app-root",
201
217
template:`
202
218
<block-ui [template]="blockTemplate">
203
219
<!-- Your markup here -->
204
220
</block-ui>
205
-
`
221
+
`,
206
222
})
207
223
exportclassAppComponent {
208
224
// Declare template component
@@ -211,15 +227,16 @@ export class AppComponent {
211
227
```
212
228
213
229
#### TemplateRef Custom Template
214
-
Add a `<ng-template>` with a template reference variable to the view. Then pass the template reference variable to the `blockUI` component using the `[template]` property.
215
230
216
-
*Note: TemplateRef templates can only be set on a Component level.*
231
+
Add a `<ng-template>` with a template reference variable to the view. Then pass the template reference variable to the `blockUI` component using the `[template]` property.
217
232
233
+
_Note: TemplateRef templates can only be set on a Component level._
218
234
219
235
##### Component Level
236
+
220
237
```js
221
238
@Component({
222
-
selector:'cmp',
239
+
selector:"cmp",
223
240
template:`
224
241
<ng-template #blockTemplate>
225
242
<div class="block-ui-template">
@@ -230,12 +247,13 @@ Add a `<ng-template>` with a template reference variable to the view. Then pass
230
247
<block-ui [template]="blockTemplate">
231
248
<!-- Your app markup here -->
232
249
</block-ui>
233
-
`
250
+
`,
234
251
})
235
252
exportclassCmp {}
236
253
```
237
254
238
255
## Block UI Directive
256
+
239
257
Sometimes you want to only apply blocking to a certain element in your app.
240
258
The Block UI directive can be added to an element to apply blocking only to that specific element.
241
259
@@ -266,59 +284,75 @@ export class AppComponent {
266
284
```
267
285
268
286
### Directive Settings
287
+
269
288
Angular has a specific syntax for passing properties to structural directives. Properties are passed in `key: value;` pair. To pass settings to a Block UI directive they must be passed as shown below.
| `name` | Name of the targeted instance (defaults to main instance). |
284
-
| `isActive` | Indicates if the targeted instance is blocking. |
285
-
| `start` | Starts blocking for instance, can be passed an optional message. |
286
-
| `stop` | Stops blocking for instance. |
287
-
| `reset` | Stops blocking for all currently blocking instances app wide regardless of the `delayStop` option. |
288
-
| `update` | Updates current instances blocking message with the passed message. |
289
-
| `unsubscribe` | Unsubscribe an instance so it no longer can be blocked. All BlockUI components/directives unsubscribe by default during `onDestroy`. |
| `name` | Name of the targeted instance (defaults to main instance). |
305
+
| `isActive` | Indicates if the targeted instance is blocking. |
306
+
| `start` | Starts blocking for instance, can be passed an optional message. |
307
+
| `stop` | Stops blocking for instance. |
308
+
| `reset` | Stops blocking for all targeted instances regardless of the `delayStop` option. |
309
+
| `resetGlobal` | Stops blocking app wide for all instances regardless of the `delayStop` option. |
310
+
| `update` | Updates current instances blocking message with the passed message. |
311
+
| `unsubscribe` | Unsubscribe an instance so it no longer can be blocked. All BlockUI components/directives unsubscribe by default during `onDestroy`. |
290
312
291
313
### NgBlockUI Instance Settings
314
+
292
315
Below are all the settings that can be passed as a second argument to the `@BlockUI()` decorator (`@BlockUI(<name>, <settings>)`).
| `scopeToInstance` | When set to `true` a unique `name` will be given to the blockUI instance which will "scope" it to the parent component instance. |
| `scopeToInstance` | When set to `true` a unique `name` will be given to the blockUI instance which will "scope" it to the parent component instance. |
297
320
298
321
## BlockUIService
322
+
299
323
In some cases you may want to have more control over all the instances in you app.
300
324
Instead of declaring separate instances with the `@BlockUI()` decorator you can use the `BlockUIService`. This service allows you to easily target multiple instance across your app.
| `isActive` | <code>target: string | string[]</code> | Indicates if the targeted instance(s) is blocking. |
305
329
| `start` | <code>target: string | string[], message?: any</code> | Starts blocking for a single instance or multiple instances by passing instance name(s). |
306
330
| `stop` | <code>target: string | string[]</code> | Stops blocking for a single instance or multiple instances by passing instance name(s). |
307
331
| `update` | <code>target: string | string[], message: any</code> | Updates message for a single instance or multiple instances by passing instance name(s). |
308
332
| `reset` | <code>target: string | string[]</code> | Resets blocking for a single instance or multiple instances by passing instance name(s). |
333
+
| `resetGlobal` | <code>N/A</code> | Resets blocking app wide for all instances. |
309
334
| `unsubscribe` | <code>target: string | string[]</code> | Unsubscribes a single instance or multiple instances by passing instance name(s). |
310
335
311
336
## Other Modules
337
+
312
338
### [Http Module](docs/http-module.md) - Automatically block during http requests
339
+
313
340
### [Router Module](docs/router-module.md) - Prevent route changes while blocking
0 commit comments