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
Copy file name to clipboardExpand all lines: README.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -97,19 +97,19 @@ class SomeComponent {
97
97
98
98
### Inputs
99
99
* asyncWithStatus: Binds an observable value to the directive for tracking its state.
100
-
*
100
+
101
101
## Structural Directives
102
102
The following structural directives are used within the asyncWithStatus directive to conditionally render content based on the state of the observable.
103
103
104
-
* isLoading: Renders the content when the observable is loading. Use this directive to display loading indicators or messages.
104
+
***isLoading**: Renders the content when the observable is loading. Use this directive to display loading indicators or messages.
105
105
106
-
* isLoaded: Renders the content when the observable is successfully loaded. Use this directive to display the main content that should be shown when the data is available.
106
+
***isLoaded**: Renders the content when the observable is successfully loaded. Use this directive to display the main content that should be shown when the data is available.
107
107
108
-
* error: Renders the content when an error occurs while loading the observable. Use this directive to display error messages or error handling UI.
108
+
***error**: Renders the content when an error occurs while loading the observable. Use this directive to display error messages or error handling UI.
109
109
110
-
* isLoadedWithData: Renders the content when the observable is loaded with data. Use this directive to display content that requires access to the loaded data. You can access the data using the let-data directive syntax.
110
+
***isLoadedWithData**: Renders the content when the observable is loaded with data. Use this directive to display content that requires access to the loaded data. You can access the data using the let-data directive syntax.
111
111
112
-
* isLoadedWithoutData: Renders the content when the observable is loaded without data. Use this
112
+
***isLoadedWithoutData**: Renders the content when the observable is loaded without data. Use this
113
113
114
114
## AsyncWithStatusPipe
115
115
The `AsyncWithStatusPipe` is an Angular pipe that provides additional functionality over the built-in async pipe.
Copy file name to clipboardExpand all lines: projects/ngx-async-with-status/README.md
+20-20Lines changed: 20 additions & 20 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
# ngx-async-with-status
2
2
3
-
The `ngx-async-with-status` library provides two powerful tools for handling and displaying the status of asynchronous data in Angular applications:
4
-
the `asyncWithStatus` directive and the `AsyncWithStatusPipe`.
3
+
The `ngx-async-with-status` library provides two powerful tools for handling and displaying the status of asynchronous data in Angular applications:
4
+
the `asyncWithStatus` directive and the `AsyncWithStatusPipe`.
5
5
These tools enable you to provide visual feedback to users during data loading and error states, and simplify error handling and state management in your templates.
6
6
7
7
## Features
@@ -46,11 +46,11 @@ export class YourModule { }
46
46
````
47
47
48
48
## asyncWithStatus Directive
49
-
The `asyncWithStatus` directive is an Angular directive that tracks the state of an observable value and renders different structural directives based on its state.
49
+
The `asyncWithStatus` directive is an Angular directive that tracks the state of an observable value and renders different structural directives based on its state.
50
50
It provides a convenient way to handle asynchronous operations and display loading indicators, success messages, error messages, and other relevant UI components.
51
51
52
52
## Usage
53
-
To use the asyncWithStatus directive, add it as an attribute directive on an HTML element and bind an observable value to it.
53
+
To use the asyncWithStatus directive, add it as an attribute directive on an HTML element and bind an observable value to it.
54
54
Then, use the structural directives provided by the asyncWithStatus directive to conditionally render content based on the state of the observable.
55
55
56
56
````ts
@@ -97,19 +97,19 @@ class SomeComponent {
97
97
98
98
### Inputs
99
99
* asyncWithStatus: Binds an observable value to the directive for tracking its state.
100
-
*
100
+
101
101
## Structural Directives
102
102
The following structural directives are used within the asyncWithStatus directive to conditionally render content based on the state of the observable.
103
103
104
-
* isLoading: Renders the content when the observable is loading. Use this directive to display loading indicators or messages.
104
+
***isLoading**: Renders the content when the observable is loading. Use this directive to display loading indicators or messages.
105
105
106
-
* isLoaded: Renders the content when the observable is successfully loaded. Use this directive to display the main content that should be shown when the data is available.
106
+
***isLoaded**: Renders the content when the observable is successfully loaded. Use this directive to display the main content that should be shown when the data is available.
107
107
108
-
* error: Renders the content when an error occurs while loading the observable. Use this directive to display error messages or error handling UI.
108
+
***error**: Renders the content when an error occurs while loading the observable. Use this directive to display error messages or error handling UI.
109
109
110
-
* isLoadedWithData: Renders the content when the observable is loaded with data. Use this directive to display content that requires access to the loaded data. You can access the data using the let-data directive syntax.
110
+
***isLoadedWithData**: Renders the content when the observable is loaded with data. Use this directive to display content that requires access to the loaded data. You can access the data using the let-data directive syntax.
111
111
112
-
* isLoadedWithoutData: Renders the content when the observable is loaded without data. Use this
112
+
***isLoadedWithoutData**: Renders the content when the observable is loaded without data. Use this
113
113
114
114
## AsyncWithStatusPipe
115
115
The `AsyncWithStatusPipe` is an Angular pipe that provides additional functionality over the built-in async pipe.
@@ -118,25 +118,25 @@ It allows you to handle and display the status of asynchronous data loading, suc
118
118
## Usage
119
119
120
120
Use the asyncWithStatus pipe in your template to handle and display the status of asynchronous data:
121
-
The `AsyncWithStatusPipe` is an Angular pipe that provides additional functionality over the built-in `async` pipe.
121
+
The `AsyncWithStatusPipe` is an Angular pipe that provides additional functionality over the built-in `async` pipe.
122
122
It allows you to handle and display the status of asynchronous data loading, such as loading state, error state, and loaded state, all within the template.
123
123
````ts
124
124
@Component({
125
-
selector: 'some-component',
126
-
templateUrl: './some-component.component.html',
125
+
selector: 'some-component',
126
+
templateUrl: './some-component.component.html',
127
127
})
128
128
class SomeComponent {
129
-
public data$ = of({ title: 'test' }).pipe(delay(1000));
130
-
public emptyData$ = of([]).pipe(delay(1000));
129
+
public data$ = of({ title: 'test' }).pipe(delay(1000));
0 commit comments