The product application

Now that you understand what NGRX is, let us see some NGRX action in a simple Angular application.

The Application structure

There are 3 components

The AppComponent, the ProductListComponent, and The ProductDetailsComponent

The AppComponent contains the router-outlet

The ProductListComponent which is also the home route that shows all the products with the option to open or delete

Clicking on a product's view button should go to the details page of the selected product with the update product button, clicking on add new should go to a blank product page with the add product button

The ProductDetailsComponent shows details of a selected product or blank details.

There is a service ProductService for Products with complete CRUD operations using a node package called json-server, it also implements RXJS subjects for dynamic product values

 

Link to starting project: https://github.com/olawalemayor/product-app