Adding Swiping to an Angular Application with NgRx
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:
- No need for rigidly coupled components, making adding new features seamless.
- Resolved issue on state management.
- State immutability at the component level eliminates a lot of bugs.
- Since the modification logic has been delegated to effects and reducers, the components are simpler.
- The @ngrx/router-store provides the availability of the current angular router state.
- Reducers, actions, and effects could be divided into multiple modules and files.
- Debugging is easy.
- Together with a component-based architecture, the flux architecture could be used, enabling the making of presentational as well as container components.
- @ngrx/entity helps in simplifying the state selection and reducer logic for records.
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:
- HammerGesture Config is a class of Angular, but is pretty much tied to HammerJS still.
- To get left/right swiping, hammer.DIRECTION_HORIZONTAL is used.
- Ignore vertical or up/down swiping since there could be a need for scrolling and it will remove it.
- Disable rotate and pitch.
Add this config file into app.module in the providers, like this:
How to handle Swiping Events
HammerJS adds these events for swiping:
- Swipeleft
- Swiperight
- Swipeup
- Swipedown
You add them simply to the main content section as shown in app.component.html:
Take note of these:
- Swipeup/swipedown will not be handled here because the config does not include vertical swiping.
- The CSS main-content class enables a user to wipe a ‘blank’ content area and still have the swiping events.
*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:
- This is performed so components that care about swiping will be able to respond in whatever way that they want.
- Instead of on the effect or reducer, Actions are handled on the component.
- Moreover, it’s optional to use NgRx. You could take care of swiping events in the way you want to.
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:
- CurrentRecipeComponent. It has the recipes list and maintains the present index into the list to showcase it so we see only one recipe at a time.
- RecipeComponent. It shows recipe details.
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:
- Call the nextRecipe9) if a user swipes to the left.
- Call the previousRecipe() if a user swipes to the right.
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:
- The requirements change, thus we like instructions now to be an array of strings. Consider also seeing instruction one at a time.
- Show the present instruction then enable swiping right or left to see the next/previous instruction. Now the current instruction could listen to a same ActionsSubject actions handled and dispatched, which shows the next or previous instruction.
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.
Suggest:
☞ Angular Tutorial - Learn Angular from Scratch
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero