One of the Best Possible Ways to Learn Angular NgRx
By: Sai Dharmendra Kanneganti
Tags: Angular, Web Development, Ngrx, Material Design, State Management

From the above picture, you can see how I am splitting each feature into a separate module. When I was working on this project, I wondered if I want to create a clone for building Tesla Model S in the future. If so, It is good approach to have a separate base module for each car model. And I created “model3” module as my base module for model3 clone process. Rest all modules will go as feature modules inside model3.

Using the same approach, I split functionality into components within each module. Again, there is no one-size-fits-all solution for splitting features into components/modules.

Project structure after created all modules

Once I have all the modules & components created, It’s time to think about routing. As of now, we don’t have any routes other than “model3”. So, we will redirect users to the “model3” page immediately.

App module routing structure

Once we redirect to the “model3” module, we have to route our users to the “car” module which is inside the model3 module.

Model3 routing structure

In ngOnInit of Model3 component, we redirect users to the car module which has the first step of building model3.

Navigating to the car module on load

I’ll briefly go over some of our modules to give you an overview.

Car Module:

Below is the structure of the Car module. As you can see, I divided the module into four components.

Car component as our base for this module Drive component allows the user to select a drive option for their model3 Look component pretty much displays the custom model3 while they are selecting drive options. Stats component displays the range, top speed, and 0–60 mph.

Flow of events:

Brief view of events occurring in Car Module

As you see, the flow above is pretty straightforward. We just have one event in this module which is “Drive Selection”. Whenever a drive is selected/updated by the user, we dispatch an action called “toggleDriveType”. Find the code snippets below:

Drive Component triggering “toggleDriveType” action

Car Drive Customization Actions

Next step, All the reducer functions which are listening to this particular action will get executed and our app state is updated accordingly. In this case, we have a reducer function called “carReducer” which listens to “toggleDriveType” action and returns new drive state. Look at the code below.

Car Drive Customization Reducer

Exterior Module:

This takes care of car’s external paint color and wheels type. Below is the module structure. There are four components over here.

Exterior Component as our base for this module Wheels component to customize the wheels. (Selecting different wheel sizes and types) Paint Component to select your paint Exterior Look Component to display you final changes

This module should provide users the ability to select different paint colors and different types of wheels. And Show them how their car looks after applying these changes.

Flow of events:

Exterior module flow of events

Based on the diagram, It’s clear that we got two actionable events in this module. 1) toggleExteriorColor to change the vehicle’s exterior paint, and 2) toggleWheelType to change the vehicle’s wheel type.

Exterior module actions

Exterior paint component code

Our ExteriorPaint component is pretty simple as you can see above. We are subscribed to changes in car exterior and drive by using “getExteriorandDrive” selector which notifies every time when a change happens either in exterior or drive feature of our custom car. And we are dispatching “toggleExteriorColor” action whenever user selects a paint color.

Wheels component code triggering toggleWheelType action when user selects a wheel type

Exterior reducer file

Interior Module:

This is designed to take care of car’s interior. Below is the structure and we got four components inside this module.

Interior component as our base component for this module InteriorCustomization component where user can select a choice of interior InteriorFeatures component where we describe the interior features selected by the user InteriorLook where we show how the selected interior looks

Flow of events:

Interior module flow of events

This module has only one action which is being dispatched called “toggleInteriorAction” which pretty much does what is says, changing interior in our custom built model3. Code snippets for this module is straightforward. so, I’ll leave this to you guys to checkout the entire source code.

Autopilot module:

This takes care of your car’s autopilot option. Below is the structure and we have four components in this module.

Autopilot component as our base component to this module AutopilotVideo component to show the fancy video of Tesla’s autopilot feature AutopilotSelection component which enables users to choose the autopilot option AutopilotDetails component simply displays the features of autopilot

Flow of events:

Autopilot module flow of events

Payment module:

This module enables users to provide their information which activates “Place order” in bottom-nav module.

Payment component as our base component for this module PurchaseOptions component displays a tab view with Cash, Lease and Loan options. FinalCarLook component displays your car final look CarSummary component shows your features summary Account Component enables user to enter their details

Flow of events:

The flow here is simple. In Account component we will initialize the account details form and subscribe to its valueChanges event on load. Whenever their is change in account details we will update the store by calling “updateAccountDetails” action. And, “togglePlaceOrderActivation” action which either activates/deactivates “Place order” button based on the account form validity.

This article doesn’t cover the explanation of Bottom-Nav and top-nav module as they are quite straightforward.