Aim of this library is to reduce complexity in NGRX State Management and development time and keep the focus of the developer more on Business Logic and also to make the Application intuitive and declarative in nature by reducing excessive boilerplate.
Support for Angular V13+
This Library is built using NRWL/NX. Install Using : npm i --legacy-peer-deps angular-usestate in case Using incompatible versions.
- @ngrx/store
- @ngrx/effects
- @ngrx/entity
- @ngrx/router-store
- StoreModule.forRoot({})
- EffectsModule.forRoot({})
- RouterModule.forRoot([])
- HttpClientModule
Create Simple Variable State
<ng-container useState="mymessage" [value]="'Hello World!!'" >
Output : {{ 'mymessage'|readState|async }}
</ng-container>
Create NGRX Form State
<form useFormState="biodataform" #form=useFormState >
<use-form-field name="firstname" label="First Name" ></use-form-field>
<use-form-field name="lastname" label="Last Name" ></use-form-field>
<use-form-field name="birthdate" fieldType="date" label="Birth Date" ></use-form-field>
<use-form-field #description name="description" fieldType="any" label="Birth Date" >
<textarea [formControl]="description.formControl" >
</textarea>
</use-form-field>
<button doPostAPIAction="savedata" [postData]="{someOtherParam:'YES'}" (actionComplete)="alert('Saved..');" >SAVE</button>
<button doPutAPIAction="updatedata" [postData]="{someOtherParam:'NO'}" (actionComplete)="alert('Updated..');" >UPDATE</button>
<button (click)="form.reset()" >RESET</button>
<hr>
*** This will Post Data inside Form State + [postData] attribute payload to API : Amazing Ya ..
</form>
FormState Output : {{'biodataform'|readState|async|json }}
Create NGRX State from fetching API
<ng-container useAPIState="activitydata" useEndpoint="https://www.boredapi.com/api/activity" >
Multiple API can be Nested
<ng-container useAPIState="masters" contextName="admin" processName="getmasters" (onapiError)="myErrorHandler()" >
<!-- This will call > API_ENDPOINT/admin/getmasters -->
API Data Example :
{{'activitydata'|readState|async|json}}
<hr>
Masters :
{{'masters'|readState|async|json}}
</ng-container>
To Update Any State Variable You can do this
<button setSetAction="masters" [value]="SomeNewValue" ></button>
</ng-container>
- sumOf
- filterArray
- filterLikeArray
- groupBy
- assignObject
- mapTo
- mapToObject
- resolve
- resolveArray
- extendArray
- typeOf
- timeout
- integers
- addSysdate
- mergeArrayOfArray
You can specify the API-ENDPOINT in providers array :
[providers]=[ {provide:API_ENDPOINT,useValue:'https://SOME-APIENDPOINT'} ]