NgRx, is an Angular library that is used for reactive state management for Angular app. NgRx implements the pattern of Redux with the use of the popular Angular 2 RxJs observable. It provides several advantages for Angular development via simplifying the app state into plain objects and enforcement of unidirectional data flow among others. By triggering side effects, the Effects library enables an app to communicate with the outside world.
Why you should use NgRx?
If you have many external factors that could change an app, such as dashboard monitoring, for instance, NgRx will shine. It is difficult in those instances to manage all incoming data that’s pushed towards an app. Stat management as well becomes difficult.
The Pros of Using NgRx
For Angular web development, using NgRx provides several advantages, such as the following:
Add Swiping to an Angular App using NgRx
A common case scenario is swiping from left to right, and up and down. Thus, for an Angular developer, it’s critical to add this to his toolbox. The concentration of the content is on adding left/right swiping using NgRx to an Angular app. The use of NgRx here is not important, but makes for it easier for several components.
Consider writing a simple recipe app with three awful recipes for pieces, to enable swiping between them.
Dependencies
For swiping, the only dependency to install is HammerJS, which as of now is the 2.0.8 version. Still, it must be added to add config file to get left/right or horizontal swiping.
Let’s call the custom config file as my-hammer.config.ts:
Take note of these:
Add this config file into app.module in the providers, like this:
How to handle Swiping Events
HammerJS adds these events for swiping:
You add them simply to the main content section as shown in app.component.html:
Take note of these:
*Without this, swiping would not happen in this space
*this is critical to keep in mind as users of phone or tablet don’t expect the blank area to work.
The swiping methods called simply are dispatching actions of NgRx:
Listen to the NgRx Swiping Actions
So far, we have added HammerJS swiping on the application. But it’s not doing anything to the events, so let’s fix it.
There are two components of the app and they are:
The CurrentRecipeComponent listens to the swiping actions of NgRx. This is because it could alter the current index, which his based on swiping either left or right. It additionally listens for the actions on NgRx ActionSubject. For every action dispatched in NgRx, the subject is notified. We only subscribe to the actions on a given component that we care about.
This is the code:
Check the code:
We move to the first recipe when a user tries to swipe left. On the last recipe, the nextRecipe called is used. We move further to the last recipe when a user attempts to swipe right. On the first recipe, the previousRecipe called is used.
Test this via Stackblitz. You could on the mouse, and as you swipe right or left, hold it and then let it go at the end of the swipe. It must be able to cycle through the recipes beautifully.
NgRx for Angular Apps Swiping
It seems like the use of NgRx in our example is overkill, but it isn’t so actually.
A few things to take into account:
It’s clear that you need not re-invent the wheel every time app swiping is required. You only have to simply listen to the swiping actions of NgRx.
Wrapping Up
With an Angular application, adding swiping is relatively easy with HammerJS. By dispatching only a bit of NgRx actions to handle swiperight and swipleft, any app component could seamlessly handle swiping. Be like a pro in handling swiping and bring your web app to speed with mobile devices.
Author Bio
Shira Gray is working as a Business Development Executive at Angular Development Company — eTatvaSoft.com. She writes about emerging technologies. Being a tech geek, she keeps a close watch over the industry focusing on the latest technology news and gadgets.
☞ Angular Tutorial - Learn Angular from Scratch
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero