DEV Community: Daniel Kreider

How to improve Angular load performance?

Daniel Kreider — Tue, 27 Apr 2021 16:04:33 +0000

Here's how to fix Angular performance issues and optimize your Angular load time. 💡

Angular performance is a common issue.

It's probably Angular greatest weakness. 😩

How do I know?

I recently surveyed several dozen Angular developers, asking them their biggest frustration with Angular. Here's what they told me.

Not to mention an article I recently read that was written by Angular consultant where he explained how he optimized an Angular application that took almost an entire minute to load. Yup! One. Whole. Minute.

Just think about it... you spend all this time building an Angular app, but as soon as it hits production people start complaining that it's waaaaay tooooo turtle-slooooooow.

Now that's obviously an exaggerated example, but the Angular performance questions is real.

Not to mention the frustrated Angular developers that don't know where to start when their boss demands a better performing Angular application.

How do you avoid this kind of situation?

How do you optimize your Angular application?

What can you do to improve the performance of your Angular application? And fix Angular performance issues?

Aside from hiring an Angular consultant to help you, here's the in-depth-guide to improve and optimize your Angular performance and making sure it loads blazingly fast. Every. Single. Time.

What is loading performance versus runtime performance?
Getting started: Here's why you must profile Angular load time.
How to decrease the Angular bundle size?
Speedy hosting options for your Angular app?
Rolling our own Nginx server with Brotli support
Conclusion

What is loading performance versus runtime performance?

When we talk about fixing Angular performance and making our Angular app faster, there are two distinct areas to wrestle with and improve. There's a difference between making your Angular app load fast and making it run fast. This is known as the difference between the loading performance and runtime performance.

This guide focuses on how to make your Angular app load fast.

But if you need to optimize your runtime performance and make your Angular app run fast there are all kinds of Angular optimizations that you can consider like using a trackBy function to improve ngFor performance.

Or building a fast-performing Angular pipe.

As well as tweaking Angular's change detection settings to avoid un-necessary change detection cycles.

And if your suspicious that API calls could be choking your Angular runtime performance then here's how to monitor the slowness of your HTTP calls.

Now that we understand the difference between loading performance and runtime performance, how do we improve it?

Getting started: Here's why you must profile Angular load time.

The first step in improving the performance of your Angular app is to measure how long it takes to load and bootstrap inside the browser.

Why?

Some developers know that they need to optimize their Angular app but they have no idea how much or where exactly to start. And so they make these wild stabs at the code or build configuration and then refresh the app to see if it appears to load faster than it did before. This kind of optimization approach is nothing but a clown show and deserves every kind of criticism it can get. It's like trying to bake a cake without the necessary measuring cups. Or re-arranging the chairs on the deck of the Titanic before it sank.

So what's the smarter approach?

Measure. Measure. Measure.

Somehow we as developers don't always notice the extra second or two that will bother the users. At least that's been my experience.

For example, one of my developer buddies is a Django developer. He kept insisting that his Django application was faster than my Angular app. When we were together he'd pull out a browser and show me just how much faster it was... and how sluggish my Angular app was... until we started actually counting the milliseconds by using the browser's developer tool. After profiling the performance of my Angular app vs his we discovered that they were averaging about the same load time.

Which one was faster? I don't remember. 😁

Obviously my friends internal timer wasn't properly counting and proves why a developer MUST carefully profile the performance of his Angular app and know EXACTLY how many milliseconds it takes to load the thing. By counting the milliseconds that it takes to load your Angular app you will be able to know exactly how much you're improving load speed and performance as you attempt to optimize. Yup, count the milliseconds.

How to decrease the Angular bundle size?

There are all kinds of tweaks and wildly-optimizing tree-shaking stuff floating around on the web about how to decrease the size of your Angular compiled app.

Some of the suggested performance tweaks are impressive, like this one about using the Google Closure Compiler to decrease the size of your Angular app by 2.5x, and I'm glad for the effort that others have made to shave a few KB's. But I find that a lot of the suggestions is like kicking a dead donkey - especially if your Angular app has been poorly engineered.

So how do you design your Angular app to perform faster?

Unless I miss my guess, for every 8 out of 10 Angular projects the quickest and easiest way to shave the size of your Angular app and make it load faster is by splitting your main AppModule into smaller modules and lazy loading the other modules when you choose to.

In other words, make sure the size of your AppModule is as small as possible. Modularize everything you don't need right away and then lazy load them later because lazy loading helps keep the initial size of your Angular app smaller and makes for a speedier Angular load performance.

Speedy hosting options for your Angular app?

And after you've got your Angular app properly split into lazy-loaded modules, what's the next best step?

Deploy to a fast, global CDN.

And what are the fastest Angular hosting options? Where can you host your Angular app to guarantee the fastest load speed?

Here's a list of 3 different hosting options that specifically support Angular. This isn't a comprehensive list but each one of these Angular hosting options...

Has a free tier that allows you to get started and grow.
Uses a global CDN that your Angular app is deployed too.
Is a hosting solution that I've had success with. In other words, I know what I'm recommending.

Roast.io

If you want to start roasting an Angular application on Roast.io then here's the getting started guide for Angular applications.

Netlify

Want to deploy your Angular app on Netlify? Here's how to get started.

Firebase Hosting

Firebase Hosting is a hosting service that was created by Google. If you want to know more then here's how to deploy an Angular app to Firebase Hosting in 2021.

Rolling our own Nginx server with Brotli support

But what if you have your own server with a VPS like Digital Ocean? And would rather not deploy to a CDN?

Then Brotli is here to help you.

Brotli is a compression algorithm developed by Google and considered the successor to gzip. I've seen it cut an entire 1000ms and more off of the load time for Angular apps.

If you're using a pre-backed hosting solution like Firebase Hosting, Microsoft Azure Hosting or another option that I mentioned above then you're outta luck. But if you have your own server that you can tweak and customize then you can compile Nginx from source with Brotli support.

Why compile it from source?

Because Nginx doesn't come built with Brotli support. You have to use Google's Nginx Brotli module.

But the good news is I have a script that will do the job for you. 😉

Here it is.

#Install deps
sudo apt install unzip zlib1g-dev libpcre3-dev libssl-dev brotli -Y

# Pull nginx
mkdir /tmp/nginx-brotli
cd /tmp/nginx-brotli
wget http://nginx.org/download/nginx-1.18.0.tar.gz
tar -xvf nginx-1.18.0.tar.gz 

# Pull brotli module
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init

# Build nginx
cd ../nginx-1.18.0
./configure --add-module=../ngx_brotli

./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.conf --pid-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-http_v2_module  --add-module=../ngx_brotli 
make
sudo make install

Conclusion

Angular is fast evolving framework - which is one of the reasons I enjoy Angular - and it's built by a great group of people that want to know the frustrations Angular developers have. The Angular team has already shed a lot of sweat to to improve the size of Angular applications and Angular's performance and I expect that they'll continue to do so.

Daniel Kreider

How to install and use the Angular CLI?

Daniel Kreider — Tue, 20 Apr 2021 17:34:44 +0000

What is the Angular CLI?

Here's the step-by-step guide to install the Angular CLI and build your first Angular application

The Angular CLI.

Just exactly what is it? And what is its purpose?

Maybe a better question is what can you do with the Angular CLI?

This Angular CLI guide will teach you everything you need to know about the Angular CLI. We're going to cover how to install the Angular CLI, the different Angular CLI versions, how to use the Angular CLI to create components and the whole bang.

Yes buddy! I'm going to show you how to grab the Angular CLI by the horns and make it obey your orders. 🥳

What is the Angular CLI?
Do I have to use the Angular CLI?
Angular CLI versions
How to install the Angular CLI
How to use the Angular CLI
How to create an Angular application with the CLI
How to start the Angular application with the CLI
How to create modules with the Angular CLI
How to create components with the Angular CLI
How to create custom pipes with the Angular CLI
How to create a service with the Angular CLI
Cool Angular CLI commands worth remembering
Conclusion

What is the Angular CLI?

The Angular CLI is a tool that was created by the Angular team to manage, build, maintain and test your Angular projects.

You can think of it as the swiss-army knife for the Angular framework.

The Angular CLI is a command-line tool, and maybe that makes you grumble because you want something that's "easy to use". 😋

Actually, there is a Visual Studio Code extension available to download and install. It adds a GUI interface that you can then use instead of the terminal.

However, this guide focuses specifically on using the Angular CLI via the command line because that is the best way to use this powerful tool.

Do I have to use the Angular CLI?

And now that we know what the Angular CLI is maybe you're wondering if you have to use it to be an Angular developer?

The answer is actually no, you don't have to use the Angular CLI. But you'd be a... um... foolish Angular developer if you didn't use it. 🙀

Why?

Because the Angular CLI was created to turn you into a productive Angular-cranking-code-machine and automate all the time-consuming tasks. It generates starter Angular applications, complete with a .gitignore file. And generates all the core pieces of your application like skeleton modules, components, etc... as well as handling the testing, building and other common operations.

Yes, buddy! You had better use the Angular CLI even if you don't necessarily have to.

Angular CLI versions

The first beta version of the Angular CLI was released in 2017. And since more then 450 versions have showed up.

A new Angular CLI version is released with every new release of the Angular framework. So if you're using Angular 12, then there will be an Angular CLI 12 as well. This doesn't mean that Angular CLI version has to be the same as your Angular project version. More times they're not. You can use Angular CLI version that's different from your Angular project version.

How to install the Angular CLI

Before installing the Angular CLI, you'll need to install Node.js.

If you're using a Windows or Mac download it here. And for the amazing Linux guys, here's the best way to install Node.js.

And now that you've got Node.js installed, open a command prompt or terminal and type this command.

npm install -g @angular/cli

And that is how you globally install the Angular CLI.

Of course you'll need to update the Angular CLI to the late version. How do you do that?

npm update -g @angular/cli

We've installed the Angular CLI globally, meaning it's installed as a tool that you can use anywhere on your machine. Interestingly, when we create a new Angular application the CLI will also be installed locally, meaning that the Angular CLI is installed and available in the node_modules/ folder of the Angular application.

How to use the Angular CLI

So now that we've installed the Angular CLI, how do you use it?

Open a terminal or command prompt and run this command to see the basic options and available commands for the Angular CLI.

ng help

For more details about a specific command you can type in the command name followed by --help. For example...

ng new --help

...will give you all the command flags, details and options for creating a new Angular application.

How to create an Angular application with the CLI

Creating a bare-bones Angular application from scratch, generate all the files, install all the dependencies, etc... would take a loooong-wong time. Probably days.

With the Angular CLI, it's one simple-pimple command. Enough to make you swallow your gum.

ng new MyApplicationName

This will create all the needed files and download all the dependencies for us, while we kick back in our chair and sip some coffee. 😎

Yes buddy, ya better be using the Angular CLI. 😃

How to start the Angular application with the CLI

Now that we've created our Angular CLI, how do we start it?

The first step is to enter the new directory via the command line. In my case this is the command I need.

cd MyApplicationName

And now that I've entered the directory where my application is stored, here's how I start my Angular application.

ng serve

This command will compile my Angular application, setup live-reloading and launch it in a browser.

Yes buddy, ya better be using the Angular CLI. 😃

How to create modules with the Angular CLI

Angular modules are used to modularize your Angular application. In otherwords, Angular modules are used to divide your Angular application into specified pieces. You can read more about Angular modules here.

Here's the Angular CLI command to create a basic Angular module.

ng generate module MyModuleName

Depending on the case, you might want more then just a basic Angular module. Maybe you want an Angular module with its own routing module? Then here's how you make the Angular CLI do it for you.

ng generate module MyModuleName --routing

Yes buddy, ya better be using the Angular CLI. 😃

How to create components with the Angular CLI

Here's the Angular CLI command to create a new Angular component.

ng generate component MyComponentName

And if for some strange reason you need to specify the module for this specific component, then here's how to do it.

ng generate component MyComponentName --module MyModuleName

Yes buddy, ya better be using the Angular CLI. 😃

How to create custom pipes with the Angular CLI

Here's the Angular CLI command to create an Angular pipe.

ng generate pipe MyPipeName

Yes buddy, ya better be using the Angular CLI. 😃

How to create a services with the Angular CLI

Here's the Angular CLI command to create an Angular service.

ng generate service MyServiceName

Yes buddy, ya better be using the Angular CLI. 😃

Cool Angular CLI commands worth memorizing

Want to turn your Angular app into a PWA (progressive web app)? Here's how to do it.

ng add @angular/pwa

Have some question about an Angular feature? Maybe a question about Angular pipes? Then use this command.

ng docs pipe

This will query the Angular docs for whatever keyword you choose. And the best thing is that it reads your local Angular version and does the documentation lookup for that specific version of Angular. If you're using Angular 8, it will check the docs for Angular 8 even if the latest Angular release is version 12.

Here's how to check your Angular version. This will display local (if exists) and global versions.

ng --version

To generate a route guard that you can use to protect your routes.

ng generate guard your-guard

Yes buddy, ya better be using the Angular CLI. 😃

Conclusion

In this article we've covered what the Angular CLI is, what it is useful for and how to use it.

The Angular CLI is the most important tool as an Angular developer. Without it, building Angular apps would be like chewing on glass.

Yup! Buddy! Ya better be using the Angular CLI. 😃

Questions? Comments? Don't hesitate to reach out.

How to build a super-duper-fast Angular pipe ⚡️

Daniel Kreider — Mon, 05 Apr 2021 20:03:35 +0000

Looking to make your Angular pipes perform like a dashing cheetah?

Then here's how to create a fast, highly-performant Angular pipe. ✨✨✨

Angular pipes hardly ever cause performance problems worth bating an eye at.

And just to make sure you're aware, it's much more common that an Angular application's performance can be drastically improved by tweaking change detection options or making sure that ngFor is using a trackBy function.

But in any case, if you're looking to shave a few milli-seconds and squeeze everything you can and pull all the levers you got to make your Angular application perform, then this is how to make your Angular pipes run really fast. 💥

Before we dive to deep let's clarify a few things.

None of what I'm going to teach you in this article will be worthwhile if your Angular pipes are not pure functions. This means that your Angular pipes always return the same value when given the same input. And if you're a smart Angular developer, which I'm sure you are, then you're Angular pipes already use pure functions.

Yes buddy, I want to make you a smart Angular developer!

The second requirement is this. The Angular application should not be binding template data with getter functions. This is a bad choice and is likely to turn around and bite you someday.

And with the basics out of our way, let's take an example Angular pipe and make it perform faster.

Our example pipe

We'll swipe the custom pipe example from the Angular docs. It's a pipe that raises any given value exponentially.

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

Not bad. But how do we make this thing perform better?

Using Lodash to make the Angular pipe perform faster

Whip up a terminal and install the lodash library and it's Typescript buddy. Here's the command you'll need.

npm install lodash @types/lodash --save

And then we'll harness the memoize caching function to cache the results of previous computations.

import { Pipe, PipeTransform } from '@angular/core';
import { memoize } from 'lodash';

@Pipe({
  name: 'exponentialStrength'
})
export class ExponentialStrengthPipe implements PipeTransform {

  exponentializer = memoize(this.getExponential, (...args) => this.getExponential(args[0], args[1]));

  transform(value: number, exponent?: number): number {
    return this.exponentializer(value, exponent);
  }

  getExponential(value, exponent): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }

}

BOOM! 💥💥💥 That's how we cache pipe results.

Again, in most cases this isn't a huge performance gain for Angular applications. But if your pipe performs a costly computation then I highly recommend this approach.

Conclusion

And that, my friend, is how you build a fast, highly-performant Angular pipe. 🤓

Questions? Comments? Don't hesitate to reach out.

Use trackBy to improve Angular application performance

Daniel Kreider — Mon, 22 Mar 2021 21:45:58 +0000

Looking to make your Angular application perform better? 🏋🏼‍♂️

Then here's how to take advantage of Angular's trackBy function. And make your Angular application perform like a boss.

Angular has this cool thing called Zone.js that triggers change detection anytime a DOM event occurs.

And in case you weren't aware, Zone.js is the engine that powers an Angular application. If you want to learn more about how it works, I explain that in this article.

Angular also has another thumpin-cool feature known as ngFor. Just hand it an array of information to render and watch it whiz! 😏

I mean... it's a nifty Angular feature... that was built to make you coooooh and aaaaah... until you start abusing it. And then it SNAPS and POPS and blows up in your face! 🤯

What is the problem with ngFor?

Because Zone.js triggers a re-render every time a DOM event occurs that means your list is being re-rendered when a button is clicked, etc... and of course you never see it because the list's data hasn't changed.

This might be fine if your component is only rendering 5 items or less. But small lists tend to become large lists, and large lists will generate performance issues unless you're a wise Angular developer. And buddy, that's what I intend to make outta ya - a shrewd and wise Angular developer that knows how to make your Angular apps perform!

So how do we solve this problem?

The trackByFn

To describe the Angular trackBy function in a nutshell, it is an optional function that can be used with Angular's ngFor. Angular trackBy is used to define how to track changes for an item in an iterable and Angular uses the specified trackBy function to tracks changes by the return value of the function.

Buddy, are you still with me?

Great! How about we dive into some code. What does it take to create our own trackBy function? And avoid expensive re-rendering operations?

Below is a basic example of the Angular trackBy function. The first step is to add a trackBy function to our components Typescript file, like this.

trackByItems(index: number, item: Item): number { 
    return item.id; 
}

And then, we'll modify our ngFor to use the new trackBy function.

<ul>
    <li *ngFor="let item of items; index as i; trackBy: trackByFn">
        {{ item.value }}
    </li>
</ul>

So what have we just done?

Basically, we've told the Angular2 framework how to handle our list data in a more performant way by giving it a function that returns the unique id for every item in our iterable. By using this function, Angular will know what list items need to be re-rendered, without having to tear down the entire DOM and rebuilt it.

Conclusion

And that, my friend, is how you use Angular's trackBy function feature to improve your Angular application's performance.

If you enjoyed this article and found it useful please be sure to show it some love and follow me for more cool articles like this one.

Follow Me: GitHub, Personal Blog

Angular Consultant

How do you craft a honking powerful Angular application? 🚀

Daniel Kreider — Mon, 08 Mar 2021 20:49:31 +0000

Will your Angular app smoothly scale to millions of users?

Here's a guide with 5 tips on how to build an Angular application that won't cave in and crash. 🔥 🔥 🔥

Need some tricks and tips you can use to punch up a large scale Angular application?

What are some good practices that you can use to make your Angular app will whiz along even under pressure?

Here's how to give it a few steroids.

1. Break a big Angular app into smaller Angular apps.

Consider the basic example of an eCommerce store. We have different moving pieces like...

Storefront & Products
Login & Register
Checkout
Administration Panel

You should consider separating each one of these pieces into it's own Angular app.

Why?

One benefit you'll receive is that if one of these apps goes down or has a serious bug, the others will remain unaffected. When engineered properly, it'll make it impossible for one app to crash your entire website.

This also gives you the benefit of making it easier to assign developers or teams specific responsibilities.

When you're building an Angular application at scale there are so many pieces to juggle. Yes buster! You've got all kinds of hairy things to look after like...

3rd party libraries and plugins.
Design changes.
Feature toggles.
Changes to the web copy.
Marketing tests.
and then oodles more...

In summary, this type of model helps ensure that issues are contained. And makes it easy for better ownership and maintenance.

2. Use a headless CMS

Scalable Angular apps need to designed in a way that the marketing department can carry on with all their fancy web copy, image and other content without harrassing the development team. And the development team should be able to focus on what they do best without bugging the marketing team.

How you separate these responsibilites will vary but a good rule of thumb is that the marketing team be responsible for the images and copy. And the developers manage the presentation and design stuff.

This is where a Headless CMS is valuable. Enabling you to separate the presentation layer from the content layer. Developers can manage the presentation, design system, etc... while marketing has the full control of images and copy.

Another obvious benefit you will gain is that no new deployments will have to be made push the latest marketing changes.

This also gives you the ability to build multiple UI's with the same content data.

Last but not least you gain a performance benefit. You can deploy the marketing content to a global CDN where it is effectively cached and available everywhere and all the time.

3. How do you handle bugs at scale?

It begins by preventing bugs at scale. And making sure they never sneak through your QA department and slip out into the wild.

Prevent bugs

Knowing what to test and getting the best ROI is the first step in the right direction.

Not sure what parts of your Angular apps you should be testing? Check out this article.

Besides all the common and normal testing practices don't forget that your Angular application is being used across all kinds of devices, browsers and networks. You can't go wrong pressure testing from every angle.

A great tool for this is BrowserStack.

Track bugs

Often developers don't see what the live user sees. Or experiences what the live user experiences.

Building a client side error logger is worth considering. One example of this is monitoring HTTP calls for slowness and logging an error to a log server if it's taking too long. I've written an entire article about this here.

Monitoring

And last of all, you should be monitoring your Angular application to make sure it's rock solid. Dynatrace is a great monitoring tool for large Angular applications.

4. Feature Toggling

When done wrong, features kill scalability. But when done properly, they fuel scalability.

With millions or billions of users depending on your app releasing a shiny new feature to 100% with no kill switch to flick it off in case it's buggy is... well... dangerous.

Launch new features with on and off features. That way the new features can be turned out if they're proven to be buggy. This can also be used for A/B testing for different markets.
Track usage/behaviour by rolling out new features to 1-5% of new users. And then 5%-20%. And so on. Learn and improve before 100% rollout.

Check out this article for more details about feature toggling.

5. Consider using Bazel

A lot of small, medium and even many large Angular web application don't necessarily need Bazel.

So should you even consider using it?

Stephen Fluin in his NgConf talk onAngular Enterprise recommended that when your application grows to include more then 50 libraries and applications you need to give Bazel some eyeballs.

Bazel has some tremendous power that lets build a subset of your entire application which can make build times much faster. It does come with a steep learning curve and takes lots of configuration to make your builds fly, so consider the obvious trade offs before making the jump.

Conclusion

Yes buddy! These are the tricks and tips you can use to punch up a large scale Angular application that will whiz along even under pressure.

Questions or comments? Don't hesitate to reach out.

How to retry an HTTP request in Angular (with plenty of code examples)

Daniel Kreider — Mon, 07 Dec 2020 15:32:19 +0000

How do you gracefully deal with a failed HTTP request?

Here's the few lines of Angular code you can use to manage HTTP failures.

Some Angular apps can be as clumsy as a soccer-playing elephant. When they fail they fall HARD.

And others are as nimble as a head-bonking rock star.

Interested in knowing how you can make your Angular web app more nimble and tough by gracefully handing HTTP failures? Read on.

It starts with an HTTP interceptor

Open a terminal in your Angular project and whip it up with the Angular CLI like so.

ng generate interceptor monitor

And then we'll import it into our module file by adding it to the providers array.

providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: MonitorInterceptor, 
      multi: true
    }
]

Wield the interceptor to retry failed requests

Next we'll open the new monitor.interceptor.ts file. It should look something like this.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}

As you probably already know this interceptor can be used to modify any incoming or outgoing HTTP requests.

How do we get the benefits of an Angular interceptor? The answer is simple.

To add the retry capability we'll use the retry function that triggers a retry when the Observable fails.

Here's how you do it buster.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { retry } from 'rxjs/operators';

export const retryCount = 3;

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      retry(retryCount)
    )
  }
}

Now if any HTTP request fails it will retry that request another 3 times.

How do you retry on certain response status codes?

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { concatMap, delay, retryWhen } from 'rxjs/operators';

export const retryCount = 3;
export const retryWaitMilliSeconds = 1000;

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      retryWhen(error => 
        error.pipe(
          concatMap((error, count) => {
            if (count <= retryCount && error.status == 503) {
              return of(error);
            }
            return throwError(error);
          }),
          delay(retryWaitMilliSeconds)
        )
      )
    )
  }
}

How do you resend request after a reauthentication proceedure like a token refresh?

How do a handle a scenario when the server responds with a 401? And you need to do some sort of login or token refresh?

Here's the code.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';

export const retryCount = 3;

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(catchError(error => {
        if (error.status === 401) {
          return this.reAuthenticate().pipe(
            switchMap(() => next.handle(request))
          )
        }
        return throwError(error);
      })
    )
  }

  reAuthenticate(): Observable<any> {
    // Do your auth call here
  }
}

You can find a more elaborate example here.

Conclusion

In this guide we've looked at different ways to gracefully handle a failed HTTP request.

Failing gracefully might seem like a small detail that's not worth batting an eye-lid at but when done properly your users will be appreciative.

Questions or comments? Please don't hesitate to poke me.

How to monitor the slowness of your Angular web app's HTTP requests and API calls

Daniel Kreider — Tue, 01 Dec 2020 10:57:06 +0000

The simple-pimple guide to expose slow HTTP requests that are frustrating users and no doubt causing revenue loss.

Without installing moment.js and bloating your Angular app

Some web apps act like a dying cow.

And would you believe it? These silly-jiggy-jaggy-dancing spinners seem to think they'll hypnotize us into patiently waiting those extra 6.8 seconds!

It's like waiting on a turtle for a horse ride.

Say, can't we do better?

How can we find the HTTP requests in our Angular application that are slowing the show? Once we've uncovered the bottle-necks we can fix them and make your HTTP requests zip.

We could then connect our Angular app to a monitoring service like Application Insights and get alerts for turtle-performance.

Why just imagine it! About the time your boss shows up saying that users are complaining of slowness you'd tell him "I just got done fixing it!" and he'd be so surprised he'd swallow his gum.

Nope, I'm not selling you snake oil. Read on to learn this stuff for yourself my friend.

Create an interceptor

We'll begin by adding a good ole HTTP Intercepter to our Angular project.

Open a terminal in your Angular project and whip it up with the Angular CLI like so.

ng generate interceptor monitor

And then we'll import it into our module file by adding it to the providers array.

providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: LoadingInterceptor, 
      multi: true
    }
]

Harness the interceptor

Next we'll open the new monitor.interceptor.ts file. It should look something like this.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request);
  }
}

And we'll want to modify it to look like this.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoadingService } from '../services/loading.service';

@Injectable()
export class MonitorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const begin = performance.now();
    return next.handle(request).pipe(
      finalize(() => {
        this.logRequestTime(begin, request.url, request.method);
      })
    );
  }

  private logRequestTime(startTime: number, url: string, method: string) {
    const requestDuration = `${performance.now() - startTime}`;
    console.log(`HTTP ${method} ${url} - ${requestDuration} milliseconds`);
  }
}

Parting thoughts...

And that's it! We've built an HTTP interceptor that will monitor every outgoing HTTP request and tell us how long it took.

Over to you buster. Now you can take that logRequestTime function and jazz it up with whatever kind of functionality you want.

Simple pimple? Well... I told you so.

Questions or comments? Please don't hesitate to contact me.

Angular Dynamic Form - The complete guide to building an advanced dynamic form

Daniel Kreider — Sat, 21 Nov 2020 13:19:45 +0000

Need an advanced guide to creating a dynamic Angular form?

Why is it such a common scenario?

The project you're sweating over is becoming a smashing success...

And you're ready to be done...

But all of a sudden at the last minute there's this change to that form that must happen NOW!

Sigh.

These kinds of scenarios are way too common. So how about a proactive approach that will allow us to dynamically render an Angular form? And make our form roll with the punches?

How about we build a dynamic Angular form so that we can throw it a blob of JSON or some other common schema that it can render?

Great idea eh?

But... Umm... let me see. What might we need to render dynamically? We've got all kinds of things to handle like...

Input text
Textarea
Radio buttons
Checkboxes
Form Validation
And more...

Oh sizzles! Is there any way to do this elegantly?

In this article I'll guide you step-by-step to build a dynamic form like this one. This example uses Bootstrap CSS to style the form but you get to style it however you want.

Want all the code right away? Here's the link.

Creating the data models

The first step is to create a model for our input fields. We'll create a file called form-field.ts and export our model like so.

export class FormField<T> {
  value: T;
  key: string;
  label: string;
  required: boolean;
  validator: string;
  order: number;
  controlType: string;
  type: string;
  options: { key: string; value: string }[];

  constructor(
    options: {
      value?: T;
      key?: string;
      label?: string;
      required?: boolean;
      validator?: string;
      order?: number;
      controlType?: string;
      type?: string;
      options?: { key: string; value: string }[];
    } = {}
  ) {
    this.value = options.value;
    this.key = options.key || "";
    this.label = options.label || "";
    this.required = !!options.required;
    this.validator = options.validator || "";
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || "";
    this.type = options.type || "";
    this.options = options.options || [];
  }
}

Creating the data service

The next step is to create a service that will take our data source and return a form group.

We'll whip out the Angular CLI and generate the service using the following command.

And add some dynamic form powers with the following code.

import { Injectable } from '@angular/core';
import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { of } from 'rxjs';
import { FormField } from './form-field';

@Injectable({
  providedIn: 'root'
})
export class FormfieldControlService {

  constructor() { }

  toFormGroup(inputs: FormField<string>[]): FormGroup {
    const group: any = {};
    inputs.forEach(input => {
      let validator: ValidatorFn[] = input.required ? [Validators.required] : [];
      switch (input.validator) {
        case "email":
          validator.push(Validators.email);
          break;
        default:
          break;
      }
      group[input.key] = validator.length > 0 ? new FormControl(input.value || '', validator)
                                        : new FormControl(input.value || '');
    });

    return new FormGroup(group);
  }

  getFormFields() {

    const inputs: FormField<string>[] = [

      new FormField<string>({
        controlType: "textbox",
        key: 'name',
        label: 'Name',
        required: true,
        order: 1
      }),

      new FormField<string>({
        controlType: "textbox",
        key: 'email',
        label: 'Email',
        type: 'email',
        required: true,
        validator: "email",
        order: 2
      }),

      new FormField<string>({
        controlType: "dropdown",
        key: 'country',
        label: 'Country',
        options: [
          {key: 'usa',  value: 'United States of America'},
          {key: 'br',  value: 'Brazil'},
          {key: 'other',   value: 'Other'}
        ],
        order: 3
      }),

      new FormField<string>({
        controlType: "checkbox",
        key: 'agree',
        label: 'I accept terms and services',
        type: 'checkbox',
        required: true,
        order: 4
      }),

      new FormField<string>({
        controlType: "radio",
        key: 'sex',
        label: 'Sex',
        type: 'radio',
        options: [
          {key: 'male',  value: 'Male'},
          {key: 'female',  value: 'Female'}
        ],
        order: 5
      }),

      new FormField<string>({
        controlType: "textarea",
        key: 'message',
        label: 'Mesage',
        type: 'textarea',
        order: 6
      })
    ];

    return of(inputs.sort((a, b) => a.order - b.order));
  }

}

Overwhelming? Confused?

Great. That means you're learning new things!

Notice that in this service we have two functions. One that takes a group of FormField and returns a FormGroup. And a second function that returns a group of FormField. The second function is where you get to use your imagination to pull the form data from whatever kind of source you like.

Create the form input component

The next step is to create the components that will render our dynamic form.

We'll create the first one and call it dynamic-form-input. Here's the Angular CLI command.

ng generate component dynamic-form-input

We'll edit dynamic-form-input.component.ts like to take the FormGroup and FormField<string> as an Input.

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormField } from '../form-field';

@Component({
  selector: 'app-dynamic-form-input',
  templateUrl: './dynamic-form-input.component.html',
  styleUrls: ['./dynamic-form-input.component.css']
})
export class DynamicFormInputComponent {

  @Input() input: FormField<string>;
  @Input() form: FormGroup;

  get isValid() { return this.form.controls[this.input.key].valid; }

}

And finally edit dynamic-form-input.component.html to render the form field.

<div [formGroup]="form" class="form-group">

    <div [ngSwitch]="input.controlType">

      <div *ngSwitchCase="'textbox'">
        <label [attr.for]="input.key">{{input.label}}</label>
        <input class="form-control" [formControlName]="input.key" [id]="input.key" [type]="input.type">
      </div>

      <div *ngSwitchCase="'dropdown'">
        <label [attr.for]="input.key">{{input.label}}</label>
        <select class="custom-select" [id]="input.key" [formControlName]="input.key">
          <option *ngFor="let opt of input.options" [value]="opt.key">{{opt.value}}</option>
        </select>
      </div>

      <div *ngSwitchCase="'checkbox'">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" [formControlName]="input.key" [id]="input.key">
          <label class="form-check-label" [attr.for]="input.key">{{input.label}}</label>
        </div>
      </div>

      <div *ngSwitchCase="'radio'">
        <div class="form-check form-check-inline" *ngFor="let opt of input.options">
          <input class="form-check-input" type="radio" [formControlName]="input.key" [id]="input.key" [value]="opt.value">
          <label class="form-check-label" [attr.for]="opt.key"> {{ opt.value }} </label>
        </div>
      </div>

      <div *ngSwitchCase="'textarea'">
        <label [attr.for]="input.key">{{input.label}}</label>
        <textarea class="form-control" [formControlName]="input.key" [id]="input.key" rows="5"></textarea>
      </div>

    </div>

</div>

Create the form component

And finally we'll generate our last component.

ng generate component dynamic-form

Here's the code for the .ts file.

import { FormGroup } from '@angular/forms';
import { FormField } from '../form-field';
import { FormfieldControlService } from '../formfield-control.service';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {

  @Input() formFields: FormField<string>[] = [];
  form: FormGroup;
  payLoad = '';

  constructor(private formfieldService: FormfieldControlService) { }

  ngOnInit(): void {
    this.form = this.formfieldService.toFormGroup(this.formFields);
  }

  onSubmit() {
    this.payLoad = JSON.stringify(this.form.getRawValue());
  }

}

And the HTML that will get rendered.

<div>
  <form (ngSubmit)="onSubmit()" [formGroup]="form">

    <div *ngFor="let formField of formFields" class="form-group">
      <app-dynamic-form-input [input]="formField" [form]="form"></app-dynamic-form-input>
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Save</button>
    </div>
  </form>

  <div *ngIf="payLoad" class="form-group">
    <strong>Here's the payload</strong><br>{{payLoad}}
  </div>
</div>

Populating our form

So we've got everything wired up. All we got to do is "plug it in".

In our app.component.ts file we'll fetch the data for our dynamic form.

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { FormField } from './form-field';
import { FormfieldControlService } from './formfield-control.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [FormfieldControlService]
})
export class AppComponent {
  title = 'AngularDynamicForms';
  formFields: Observable<FormField<any>[]>;
  constructor(service: FormfieldControlService) {
    this.formFields = service.getFormFields();
  }
}

And then in app.component.html we'll declare the dynamic form template and pass it the dynamic data.

<app-dynamic-form [formFields]="formFields | async "></app-dynamic-form>

BOING!!! There it is!

Conclusion

This is an advanced example and explanation of how a dynamic Angular form can be created.

We looked at building a model to model the different form fields, and then create a service to handle those form fields and finally rendering the dynamic form in a component.

Too much work you say? This is a complex solution for a simple contact form but when requirements spin wheels on a dime it's worth considering the dynamic Angular form.

Questions or comments? Anything I missed? Don't hesitate to reach out.

How to build a dynamic form with Angular - A simple example with explanation

Daniel Kreider — Sat, 14 Nov 2020 11:40:08 +0000

Need a quick intro to dynamic Angular forms?

Here's a 3-minute guide to get you started.

Dancing in your pants to build a dynamic form with Angular?

In this article we'll work with a simple example, taking a JSON blob and using it to dynamically render a reactive Angular form.

The JSON blob will keep our examples simpler but it's your project so do what you want, make an HTTP call to your API server for the JSON blob, compile the JSON file with the app, or even...

...um...

...wrap it up in a sock and hurl it into the toilet.

Wait? Toilets?

Oh!

JSON blobs and dynamic forms. Uh... let's get started.

Our JSON blob

Here's the data we'll be using to dynamically render the form.

[
    {
        "fieldName": "Name",
        "fieldType": "text",
        "required": true
    },
    {
        "fieldName": "Email",
        "fieldType": "email",
        "required": true,
        "validator": "email"
    },
    {
        "fieldName": "Message",
        "fieldType": "text",
        "required": null
    }
]

We'll use this JSON as a dynamic declaration of what our form will be like.

Why dynamic?

Because, buster, by the time we get this dynamic Angular form all wired up all we'll have to do is change the JSON blob on the fly to meet the whims of your boss and the form will change.

Want to add a field? Just add a new item to the JSON array.

Dynamic is the BUZZZZZZZZ word.

Creating a dynamic Angular form with the JSON response

First we'll generate a class used to model our form fields and deserialize it nice and sweet.

ng g class form-field

And then in the form-field.ts file we'll declare the JSON properties like so.

export class FormField {
    fieldName: string;
    fieldType: string;
    required: boolean = false;
    validator: string;
}

Next in our component's typescript file we'll use an HTTP client to load the JSON and render it.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { FormField } from '../form-field';
import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {

  formFields: FormField[];
  form = new FormGroup({});

  constructor(
    private httpClient: HttpClient
  ) { }

  ngOnInit(): void {
    this.httpClient.get<FormField[]>("/assets/form.json").subscribe((formFields) => {
      for (const formField of formFields) {
        this.form.addControl(formField.fieldName, new FormControl('',this.getValidator(formField)));
      }
      this.formFields = formFields;
    });
  }

  onSubmit(): void {
    if (this.form.valid) {
      let value = this.form.value;
    }
  }

  private getValidator(formField: FormField): ValidatorFn {
    switch(formField.validator) {
      case "email":
        return Validators.email;
      case "required":
        return Validators.required;
      default:
        return null;
    }
  }

}

And finally, here's the HTML stuff for our component.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div *ngFor="let formField of formFields" class="form-group">
        <label> {{ formField.fieldName }}</label>
        <input class="form-control" type="{{ formField.fieldType }}" value="{{ formField.fieldName }}" [required]="formField.required" formControlName="{{ formField.fieldName }}" />
        <br>
    </div>
    <button type="submit" class="btn btn-primary" [disabled]="this.form.invalid">Submit</button>
</form>

With a splash of Bootstrap CSS we get a simple form like so.

Conclusion

This is a very basic example of how a dynamic form can be created.

And since you're smart, I'm sure you noticed that this example has its limits. One area where it is lacking is validating input.

So go ahead, take it from here, and add some superpowers to make it a honking-powerful, dynamic Angular form.

Questions or comments? Don't hesitate to reach out.

Convert your .NET Core with Angular SPA app to an NX environment - Quick Guide

Daniel Kreider — Sat, 31 Oct 2020 12:31:04 +0000

Interested in joining the big guys by adding NX to your .NET Core Angular App?

Here's a complete step-by-step guide that will show you exactly how to integrate .NET Core, Angular and NX (Nrwl Extensions)

Say.

With the growing power and fame of the .NET Core framework and Angular some awesome possibilities are blooming.

One of these is .NET Core's support for Angular.

Just take the .NET Core CLI and the only thing you gotta bang into that keyboard is...

dotnet new angular -o MyNextAwesomeApp

...and BOOM! It generates a simple .NET Core API server as well as an Angular SPA with amazing server-side rendering, auth options, and more.

Hot stuff if you want to know my opinion.

But what if we want to do better? And use NX to manage our Angular app(s)?

I mean, why not? All the other big guys like...

American Airlines
Microsoft
RedHat
FedEx
Cisco
Audi

...and all kinds of other cool kids are using it.

So how do we install and use NX with a .NET Core Angular SPA app?

Pre-requisites

An ASP.Net Core project with Angular SPA.

Install NX

Assuming that the ASP.NET Core Angular app has already been created the next step is to verify our Angular version.

Open your project in a terminal and cd into the ClientApp directory.
Type ng --version to check your global Angular version.

With NX you must install the NX version that matches the major version of your global Angular CLI. So head over to package repository and find the version you want. Then type the following command.

ng add @nrwl/package@cli.version.number

Fix the imports

The installer tries it's best to update your angular.json file but I found that it really messed my config up so I had to do some manual editing.

Basically all you should need to do is update the broken imports.

Here's a fixed angular.json example.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "MyAwesomeProject": {
      "root": "apps/MyAwesomeProject",
      "sourceRoot": "apps/MyAwesomeProject/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": false,
            "extractCss": true,
            "outputPath": "dist",
            "index": "apps/MyAwesomeProject/src/index.html",
            "main": "apps/MyAwesomeProject/src/main.ts",
            "polyfills": "apps/MyAwesomeProject/src/polyfills.ts",
            "tsConfig": "apps/MyAwesomeProject/tsconfig.app.json",
            "assets": ["apps/MyAwesomeProject/src/assets"],
            "styles": [],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "apps/MyAwesomeProject/src/environments/environment.ts",
                  "with": "apps/MyAwesomeProject/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "MyAwesomeProject:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "MyAwesomeProject:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "MyAwesomeProject:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "apps/MyAwesomeProject/src/test.ts",
            "polyfills": "apps/MyAwesomeProject/src/polyfills.ts",
            "tsConfig": "apps/MyAwesomeProject/src/tsconfig.spec.json",
            "karmaConfig": "apps/MyAwesomeProject/src/karma.conf.js",
            "styles": ["apps/MyAwesomeProject/src/styles.css"],
            "scripts": [],
            "assets": ["apps/MyAwesomeProject/src/assets"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["apps/MyAwesomeProject/tsconfig.app.json", "apps/MyAwesomeProject/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "apps/MyAwesomeProject/src/main.ts",
            "tsConfig": "apps/MyAwesomeProject/tsconfig.server.json"
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false
            }
          }
        }
      }
    },
    "MyAwesomeProject-e2e": {
      "root": "apps/MyAwesomeProject-e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "apps/MyAwesomeProject-e2e/protractor.conf.js",
            "devServerTarget": "MyAwesomeProject:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "apps/MyAwesomeProject-e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "MyAwesomeProject"
}

Conclusion

Not bad! Not bad my friend! You've made a great choice by installing NX.

Interested in going further? There's a great demo app here.

Questions or comments? Don't hesitate to contact me.

How to add a loading spinner to an Angular Material button (Step-by-step Guide)

Daniel Kreider — Sat, 24 Oct 2020 11:36:32 +0000

The 2 minute complete guide to adding a loading spinner to the Angular Material Button

Err…

…wouldn't it be nice if Angular Material had a button with a loading spinner? Like the loading buttons that Semantic UI has.

Instead of ranting I decided to try to build my own solution - and succeeded!

With no further ado, I've included the code below.

Our spinner (CSS).

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  border-top-color: #000000;
  animation: spinner .8s linear infinite;
}

Our button (HTML).

<div style="text-align:center">
  <button mat-raised-button color="primary" [class.spinner]="loading" [disabled]="loading" (click)="save()">Save</button>
</div>

Our `.ts` file (the logic)

export class AppComponent{
  title = 'hello-world';
  loading = false;

  save(): void {
    this.loading = true;
  }
}

Done!

I told you this was simple. You're welcome. Hope you enjoyed it!

Questions or comments? Don't hesitate to contact me.

Add Feature Toggling to your Angular app (The Ultimate Guide 2020)

Daniel Kreider — Mon, 19 Oct 2020 11:55:22 +0000

The ultimate guide to implementing feature flag functionality in your Angular application

Let's explore 3 different ways that you can use to add simple and powerful feature toggling to an Angular app.

Getting Started

How do you add feature flag functionality to your Angular application? In this guide we'll explore 3 different ways and examine the pros and cons.

Ready? Let's dive in. 👉🏻

1. The simplest way to add feature toggling to your Angular app

This way is straightforward.

It's as simple as ABC.

And easy as pie. Here's how it works.

You can make use of the environment files to add feature flag capability to your Angular app.

Some experts might say that this is not a scalable way to tack on feature flags, and while they may be right, it's still a great way to get started without bloating your app with an initialization service. Please keep in mind that it totally depends on your scenario. If you only have one or two feature flags that you flip on or off then this is a great option for you to consider. Does it scale? Nope. Not at all.

So we can do it like this. Open src/app/environments/environment.ts and add a flag name with the value set to true or false.

Here's a simple example.

export const environment = {
  production: false,
  feature: false
};

Next we'll generate our feature component.

ng g c feature

Next we'll import the environment settings into our app.component.ts file and set a local variable to hold the feature's flag status. Like so.

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature = environment.feature;
}

And finally in the app.component.html file we use ngIf to determine if the feature component is displayed or not.

<div>
  Angular Feature Flags Application
</div>
<app-feature *ngIf="feature"></app-feature>

It boils down to a few basic steps.

Add a boolean flag to your environment file.
Import that boolean flag into your application wherever you want to and use it to flip things on or off.

Though this way is stupidly-simple it lacks a lot of functionality because every time that you want to toggle a feature you'll be required to change the environment.ts file and re-deploy. For some environments and scenarios this does not pose any problem so it's a great approach. But if you want a remote way to flip a switch somewhere and enable or disable a feature then let's explore a better option.

2. How to add feature toggling to your Angular app without needing to make a special HTTP call

So how can we avoid making a special HTTP call to check for feature toggles before bootstrapping the rest of the app?

We can add a feature-flags.json file to our src/app/assets/ folder with the feature toggles. This file can be changed at any time on a live server.

So how do we do it?

First we'll configure the Typescript compiler to resolve JSON modules (files). This will allow us to import JSON settings into any *.ts file.

Open tsconfig.json and set resolveJsonModule to equal true. Like so.

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
      ...
  }
}

Next, we'll edit app.component.ts to import feature flags from our new JSON file.

import { Component } from '@angular/core';
import * as FeatureFlags from '../assets/feature-flags.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature = FeatureFlags.feature;
}

And finally in our app.component.html file we use ngIf to hide or show the feature component based on the settings in our feature-flags.json file.

<div>
  Angular Feature Flags Application
</div>
<app-feature *ngIf="feature"></app-feature>

3. But how do you setup remote feature toggling? 🤷

The two approaches above might not be advanced enough for your project. So how do we setup remote feature toggling where we can set a feature toggle remotely? For example, make the Angular application call an API before rendering the app.

We'll begin by creating a feature flag service to manage the logic of loading a feature toggle config.

ng g s feature-flags

Next we add two functions to the service. One to load the feature flags from a remote server and the second to get a feature flag from the loaded configuration. Our service file now looks like this.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class FeatureFlagsService {

  featureFlags: JSON;

  constructor(public httpClient: HttpClient) { }

  loadFeatureFlags(): Promise<any> {
    return this.httpClient.get("https://gist.githubusercontent.com/dkreider/dbef4a890bdc143b86d0b9330dbf2381/raw/22c03d8ed2d964a4c72fc1d35ea27dcb2adc9fd8/feature-flags.json")
      .pipe(tap((response) => this.featureFlags = response as any))
      .toPromise();
  }

  getFeatureFlag(key: string): boolean {
    return this.featureFlags[key];
  }
}

The next step is to configure our Angular application to use this service when it initializes. In our app.module.ts file we declare a new provider in the provider's section and use APP_INITIALIZER to make sure our loadFeatureFlags() function gets called at startup.

providers: [
    FeatureFlagsService,
    {
      provide: APP_INITIALIZER,
      useFactory: (featureFlagsService: FeatureFlagsService) => () => featureFlagsService.loadFeatureFlags(),
      deps: [FeatureFlagsService],
      multi: true
    }
]

In our app.component.ts file we inject the FeatureFlagsService and load a feature flag setting.

import { Component } from '@angular/core';
import { FeatureFlagsService } from './feature-flags.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FeatureToggling';
  feature: boolean;

  constructor(public featureFlagService: FeatureFlagsService) {
    this.feature = featureFlagService.getFeatureFlag("feature");
  }

}

Conclusion

And there you have it. 3 different ways to add feature flag functionality to your Angular app.

Questions or comments? Don't hesitate to contact me! 🧑🏼‍💻

DEV Community: Daniel Kreider

How to improve Angular load performance?

Here's how to fix Angular performance issues and optimize your Angular load time. 💡

Table of Contents

What is loading performance versus runtime performance?

Getting started: Here's why you must profile Angular load time.

How to decrease the Angular bundle size?

Speedy hosting options for your Angular app?

Roast.io

Netlify

Firebase Hosting

Rolling our own Nginx server with Brotli support

Conclusion

How to install and use the Angular CLI?

What is the Angular CLI?

Here's the step-by-step guide to install the Angular CLI and build your first Angular application

Table of Contents

What is the Angular CLI?

Do I have to use the Angular CLI?

Angular CLI versions

How to install the Angular CLI

How to use the Angular CLI

How to create an Angular application with the CLI

How to start the Angular application with the CLI

How to create modules with the Angular CLI

How to create components with the Angular CLI

How to create custom pipes with the Angular CLI

How to create a services with the Angular CLI

Cool Angular CLI commands worth memorizing

Conclusion

How to build a super-duper-fast Angular pipe ⚡️

Looking to make your Angular pipes perform like a dashing cheetah?

Then here's how to create a fast, highly-performant Angular pipe. ✨✨✨

Before we dive to deep let's clarify a few things.

Our example pipe

Using Lodash to make the Angular pipe perform faster

Conclusion

Use trackBy to improve Angular application performance

Looking to make your Angular application perform better? 🏋🏼‍♂️

Then here's how to take advantage of Angular's trackBy function. And make your Angular application perform like a boss.

What is the problem with ngFor?

The trackByFn

Conclusion

How do you craft a honking powerful Angular application? 🚀

Will your Angular app smoothly scale to millions of users?

Here's a guide with 5 tips on how to build an Angular application that won't cave in and crash. 🔥 🔥 🔥

1. Break a big Angular app into smaller Angular apps.

2. Use a headless CMS

3. How do you handle bugs at scale?

Prevent bugs

Track bugs

Monitoring

4. Feature Toggling

5. Consider using Bazel

Conclusion

How to retry an HTTP request in Angular (with plenty of code examples)

How do you gracefully deal with a failed HTTP request?

Here's the few lines of Angular code you can use to manage HTTP failures.

It starts with an HTTP interceptor

Wield the interceptor to retry failed requests

How do you retry on certain response status codes?

How do you resend request after a reauthentication proceedure like a token refresh?

Conclusion

How to monitor the slowness of your Angular web app's HTTP requests and API calls

The simple-pimple guide to expose slow HTTP requests that are frustrating users and no doubt causing revenue loss.

Without installing moment.js and bloating your Angular app

Create an interceptor

Harness the interceptor

Parting thoughts...

Angular Dynamic Form - The complete guide to building an advanced dynamic form

Need an advanced guide to creating a dynamic Angular form?

Creating the data models

Creating the data service

Create the form input component

Create the form component

Populating our form

Conclusion

Further Reading

How to build a dynamic form with Angular - A simple example with explanation

Need a quick intro to dynamic Angular forms?

Our `.ts` file (the logic)