Skip to content

Implementing NGRX in Angular version 17, working specifically with ngrx-store(action, reducer), and also handling side effects with NGRX effects for (CRUD).

Notifications You must be signed in to change notification settings

danielikechukwu/NgRx-in-Angular17

Repository files navigation

Implement of NgRx in Angular 17

image

Above is the pictures showing a simple application and how NgRx was used to implement CRUD operator using the Angular-in-memory-web-api to fake a backend, since we want to focus only on the FrontEnd of the application.

Actions carried out

There are basically five(core) action carried out, leveraging the benefit of NgRx and they are all working seemlessly

  1. Toggle product code.
  2. Set current product.
  3. Clear current product.
  4. Initialise current product
  5. Create product

Toggle product code

image image

From the above image, if we carefully observe product code is missing from the second image and below the "Display Product Code" checkbox was unchecked

Set current product

image image

Carefully observing the image above, we see the "No available record" that is because no record has been set by clicking on any of the listed product on the List Component, but on the Second image the selected image is the highlighted on, and it's details are showing on the left hand of the second image

Clear current product

When we click the delete button we don't neccessary delete from the in-memory database(not yet implemented) but we just set current product to null, and we move back to the first image from the two image directly above.

Initialise current product

image

When we click on the Add button a new form(Reactive) in populated requesting us to input a value.

Create product

After we fill out the form and click on the Save button we add the detail to the in-memory database.

image image

If we observe the images above, you will notice that the Cutlass was not added but on the second image it was created.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Tools

Angular NgRx

About

Implementing NGRX in Angular version 17, working specifically with ngrx-store(action, reducer), and also handling side effects with NGRX effects for (CRUD).

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published