Software Development

Creating a Redux Like Store

Published on

In this post we will take the state store created in the previous post make more redux like. The first thing we need to answer is what is redux?. According the to offical redux website: Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.& In simple terms, redux is a pattern to follow to manage global application data which can be shared across multiple components.

Creating an Extendable Basic State Store

Published on

Managing State in Angular with Rxjs Managing state can be a challenage in many applications. For larger Angular projects there are libraries to solve this problem that you may have used before to manage your state; NGRX, NGSG, and a few others. These libraries are great options for larger project but can be a little time consuming to use when building small applications. One thing I’ve been looking for is a more simplified pattern for managing state in smaller Angular projects.

NestJS Dependency Injection - Decoupling Services With Interfaces

Published on

I recently answered a question on StackOverflow pertaining to decoupling services from controllers in NestJS with interfaces. I’ve seen this accomplished with both interfaces and abstract classes but will be focusing on interface for this post. If you’ve worked with in .NET or Java/Spring, you’ll know this has become very common practice when building systems while some might consider it over engineering. Regardless we’ll demonstrate how to register your services with the NestJS dependency injector to allow for injection to interface types.

Crud Api w/ Server Side Pagination with NestJS & Angular - Angular Generic Service

Published on

In a previous post we created generic crud service that we could extend from in order to provide basic crud operations to an Angluar service. I had received a comment and was ask how I would apply this pattern with pagination. Pagination can be either client side or server side so this is really dependant on how the pagination is implemented. Since we just created server side pagination, I figured I’d provide an update to the generic crud service and modify it to work with a paginated findAll method.

Crud Api w/ Server Side Pagination with NestJS & Angular - Pagination

Published on

In our previous post we create a basic Crud API with an endpoint to pull all users from the database. Pulling all users may not not be the best solution especially if millions of rows exist in the users table. A common approach to solving this to use pagination. You can think of pagination as only getting the page of a book that you need rather than getting the whole book.

Crud Api w/ Server Side Pagination with NestJS & Angular - Crud Endpoints

Published on

Prerquisites The following dependencies are required for this project. NodeJS Angular CLI NestJS CLI  Setup This post builds upon our previous post here. You can also clone this Github repository if you prefer to skip the first part. Creating Our CRUD Endpoints We are going to quickly create endpoints to create, read, update and delete users from our SQLite database. We will also create a “find all” endpoint which will return all users in the database.

Crud Api w/ Server Side Pagination with NestJS & Angular - Initial Setup

Published on

One of the new technologies I’ve been very interested in has been the Nest.JS framework. Nest.JS is a wrapper around Express (or Fastify) that provides a ton build in features that would otherwise require some configuration/boilerplate code. In the next few blog post I’m going to build out a very simple CRUD api with support for pagination. We’re also going to use Angular to build a simple table showing our paginated endpoint in use.

Angular - Creating a Debounce Directive(s)

Published on

A very common and useful directive that we can create is a simple debounce directive. If you’re not familiar with debouncing, it essentially will discard events or values until a specified time has ellapsed between the emission of those events/values. This is commonly used to prevent spam button clicks or spamming an API call from a autocomplete/search input. We’re going to create two debounce directives, one to debounce key up events that will be used on input elements and another to debounce button clicks.

Creating an Angular Component Library - Checkbox Component

Published on

We can use the same process as we did with the toggle to create other form controls as well. We’ll create a similar control to the toggle but it will visually resemble a checkbox. A full screen demo of we’re going to build  Prerequisites Install Node Install Angular CLI Creating an Angular Component Library - Workspace Setup OR Clone this github repository  Generating Our Checkbox For our checkbox we will need to generate a module, component and several enum values which we will use to provide different values to customize our checkbox based on size, shape, color and label position.

Creating an Angular Component Library - Toggle Switch Component

Published on

A common recurring component that is used quite often are toggle switches. A toggle switch functions similar to a checkbox, where we essentially have two state, on/of, checked/unchecked, etc. This will be one of many form controls we will create for our library. We are also going to learn about Angular’s ControlValueAccessor interface and see how we can create custom form controls to work with both template driven and reactive forms.