Category Archives: Project Log

My collection of web development projects.

Angular 9 Task App with NgRx & Drag Drop

TLDR – A todo/task list built with Angular 9. This app utilizes Angular Material’s drag and drop out of box and with the help of NgRx, the UI can maintain its previous state on page refresh.


Features

  • Provide sorting by table columns and searching.
  • Add sorting by multiple columns and persist the sorting on refresh.
  • Add the ability to drag and drop columns to reorder them using the native Angular cdk drag and drop.
  • Add ability to manually resize the columns by dragging with the mouse.
  • Use Angular, RxJs and NgRx for state management.

Demo

Conclusions

Easy

Filtering a list of tasks leveraging a search bar was straightforward enough, thankfully. Check out the pipe and how that ties back into the ngModel on the input element for further details. My implementation is for the most part 1:1 from this Stackblitz demo.

Medium

Imagine an excel spreadsheet in which you can resize the cells (see the purple drag handles on the To Do column). It’s a similar ask here.

At the time of this writing, Angular Material does not fully support a way to resize elements. It was asked in 2019 but I didn’t find anything from the current documentation. I found this ngx-cdk-drag-resize demo to be a good starting path leveraging Angular’s ElementRef API out of box.

The other gotcha was sorting by order. AngularJS did it but Angular’s core argument for not including that feature in their current API is simply for performance. Your options are limited to creating your own custom pipe or having your component take on that responsibility. In my case, the dynamicSort() function on my home page component is what I used to sort order attributes in ascending order.

Hard

Saving the order of drag and drop. Saving the order on drag and drop and distinguishing between to do and done. Saving the order on drag and drop, distinguishing between to do and done, refresh the page and ensuring the previous state was maintained.

That. Was. Hard.

My initial thought was to save via localStorage but having localStorage fly on its own was brittle and often caused inconsistencies when ad hoc testing. I needed a strict approach that could thoughtfully manage the user interaction, namely @ngrx/store because at its core everything is immutable. Acknowledging that very rule was hard to embrace but in my opinion it’s the way to go when creating insanely stable Angular web apps.

In my case, I used a combination of reducers, actions and effects.

It took me the better of two weeks just to understand NgRx on an elementary level so here’s my tip on how to get through these dense concepts. My suggestion assumes you’ve used Angular on a consistent basis and you’re looking to add on top of your existing knowledge of that.

If you use Angular regularly then you’re familiar with the green action below called Components. You might even be communicating with a backend system which means the other green action, Services and that blue document, APIs are also part of your web app flow. An abundance of Angular tutorials are demonstrated with just these ingredients alone. So if you’re looking to spice it up with NgRx, add the following steps below.

Step 1

Review these additional actions and employ them where needed: Store, Selectors, Reducers, Actions and Effects.

Step 2

Follow the arrows. At all times, follow the arrows.

SOURCE: Adding NgRx to Your Existing Applications

Please feel free to fork this into your own creation.

And remember, when all else fails…StackOverflow. 😉

Aloha. 🤙🏾

Additional Resources

Not Everyone Has an iPhone

I’d like you to take in informal data point on your immediate social network. No, not the people you like, heart or drop cute little emoticons on, I’m talking about actual people you talk or text with. 

Now, count on 10 fingers (yourself included) on what smart phone you and your 9 other peers are on. At first pass, that’s 5 on an iPhone and 5 on an Android. This includes my immediate family members, in-laws, the boys if you will and me.

I use an iPhone and I have that bias groomed into me from the start. There’s 50% of an audience I very much overlook. 50% of an audience I don’t necessarily acknowledge when I code and it’s a thought I want to process today with you by my side.

This pondering impacts everything we do on both a business and cultural level. But bringing it back to the context of this channel, namely, web app development, it gets me to once again think. This is a challenge once again brought to my attention by my JavaScript Instructor, Thomas Powell. 

A small except from a previous conversation, he says “grab a stock Android phone or throttle your dev tools and feel the pain”.

Here’s an ad hoc test I just did right now. I have Outlook’s web app open in my Chrome browser and I’ve intentionally throttled the app at a Slow 3G connection. I’ve had the the time to write and rewrite what I’m saying to you at the moment because Load is at 1.7 minutes. Okay, I’m over it. Flipping this back to Online and it has a Load of 7.36 seconds.

Now, to be clear this is Outlook which means an abundance of emails (text and downloadable images) so for Outlook to do this over the wire is amazing in itself.

Unfortunately, I don’t find myself equipped to convince business leads that servicing these audiences are important. Except to say, it is.

Here’s some food for thought. 

And a list of challenges we as developers need answers to in order to overcome this oversight:

  • How do you convince your business that a non-iPhone lead is worth pursuing? 
  • In this case, the argument that not everyone is on the latest iPhone or a 5G connection?
  • What are the data points necessary to present which gives them the chance to make an informed decision?
  • How do you as a developer address this problem without ever being told?
  • Are solutions like caching, gzip, compression or progressive web app techniques enough to solve this problem?
  • Product, Design & Development often argue about what the MVP truly is. Those debates should continue.
  • But have we beat it with a dead horse when it’s been about the same segments since the advent of the original iPhone in 2007?
  • Are your UX and Design specs already framed with an iPhone as its exterior? What gave to that assumption?
  • It’s fair to say that other countries have completely different networking infrastructures – word of mouth has it that South Korea has one of the fastest internet speeds of any country.
  • But on our own soil I know for sure that there are regions within our 50 states that aren’t wired up like Silicon Valley. 
  • Take a look at the rust belt. 
  • Take a look at the corn belt. 
  • Take a look at your own county and reflect back on what cities had the poorest of internet connections. 
  • Tie that alongside the type of hardware your 9 other peers are on.
  • Can we develop for that?

Guidelines When Learning JavaScript

5 things my JavaScript instructor taught me that I want to share with you as well.

1.) Be realistic.
2.) Learn coding techniques.
3.) Don’t mistake complex for correct or aim to find one true way to solve things.
4.) Make sure you aren’t kidding yourself about your markup or CSS.
5.) Avoid libraries until you straight code JavaScript and DOM pretty well.