Simplifying Angular Components with Route Resolvers →

I often come across Angular components that retrieve data from a remote API inside the ngOnInit lifecycle hook. While this is an easy way to load data into the component, it can can increase the size of the component and lead to duplication. A better approach is to use route…

  • Post author:

How to Set Focus on Form Control in Angular →

In this post, I will show you how to programmatically set focus on a form control in Angular. Instead of the popular ElementRef solution, we will use Renderer2 to set focus on a form input. This approach is secure, easier to test and compatible with reactive forms. Here's a live…

  • Post author:

Easily Decode JSON Web Token (JWT) in Your SPA →

JSON Web Tokens (JWT) are commonly used in single page application frameworks like Angular for authentication and authorisation. In situations where you want grab the details of the user from the token, you need a way to decode it yourself. In this post, I will be using jwt-decode, which is…

  • Post author:

How to Add Angular Material Components Correctly →

In this post, I will show you how to add Angular Material components in an Angular application. Importing UI components directly in the app.module increases the size of the module. The root module should be easy to maintain. Importing a button is not a great idea here. For example, consider…

  • Post author:

Creating a Scalable Angular Project Structure →

In this post, we create a scalable Angular project structure that is ideal for medium to large applications. Introduction Although Angular CLI does a great job at generating a new project, it does not force you to use a specific folder structure. Your initial project contains a single module, which…

  • Post author:

Angular Logging Made Simple with ngx-logger →

In my previous post, I talked about catching all errors in Angular with a global error handler. If you want to keep the errors you capture, you need to implement a reliable logging mechanism. Today, I want to explain how to enable Angular logging in your applications with ngx logger…

  • Post author:

Global Error Handling in Angular – Step by Step Tutorial →

In this post, we will implement global error handling in Angular. Global error handling is one of the first things I implement in a new project. It helps avoid repetitive try/catch blocks in Angular components, services or directives. It gives me confidence that all errors will be captured consistently. Create…

  • Post author: