Angular Layout

Creating an Angular Directive - Auto Focus Form Control

Published on

I was working on a side project with a lot of forms and want a simple way to set focus to a specific form control on each page/view when the page/view loads. The code snippet below is my current solution for this. import { AfterViewInit, Directive, ElementRef } from '@angular/core'; @Directive({ selector: 'input[fooAutoFocusControl],textarea[fooAutoFocusControl],select[fooAutoFocusControl]' }) export class FooAutoFocusControlDirective implements AfterViewInit { constructor( private _elementRef: ElementRef ) { } ngAfterViewInit(): void { this.

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.

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.

Creating an Angular Component Library - Button Component

Published on

The next component we going to look at building is a button component. Our button component will be an attribute component that provides styling to an existing HTML element. A full screen demo of what we’re going to build.  Prerequisites Install Node Install Angular CLI Creating an Angular Component Library - Workspace Setup OR Clone this github repository  Generate Our Button For our button we will need to generate a module, a component, a few different enums for configurations, and a few additional SCSS files for our stylings.

Creating an Angular Component Library - Overlay Side Panel Component

Published on

Another useful component that you might commonly see is a slide out side panel. Right now at my current position we’re using Monday for project/task management and communication. If you’ve ever used Monday, clicking on a task item will slide out a side panel from the right where all communication for that task is displayed. This has inpsired me to recreate this feature as an reusable Angular component. A full screen demo of what we’re going to build.

Creating an Angular Component Library - Overlay Loader Component

Published on

Another simple component we can build for our library is a overlay loader component. This is a component you might use when first loading a page or loading new data for a page and want to disable the entire screen while the page/data is loading. A full screen demo of what we’re going to build.  Prerequisites Install Node Install Angular CLI Creating an Angular Component Library - Workspace Setup OR Clone this github repository  Generate Our Overlay Loader First we will generate a new module and a component for our page loader.

Creating an Angular Component Library - Flip Card Component

Published on

In the last post we created a very basic card component. Now we’re going to expand on that card component and create a more interactive flip card. You can think of a flip card as a index/flash card where you might have some content on the front side, then can be toggled/flipped over with additional content on the back side of the card. We will make our flip card have a configuration where we can set the axis we want the card to flip around, X or Y.