With the Angular Material 7 release, an exciting feature we've been waiting for — drag and drop is available with the component dev kit. In my previous article, I explained how to create a reusable confirm dialog with Angular Material. Today, we’ll learn how to make the dialog draggable. We will…
In this post, you'll learn how to implement select all option for mat-select from Angular Material. Our solution will involve creating a custom component that will be embedded inside a select dropdown. It will also support indeterminate mode of checkbox, meaning our new option will show a different icon based…
Implement routing in Angular to enable navigation from one view to another. Users click buttons, anchor links and select options in drop-downs to perform tasks in web applications. Routing plays a key role in any modern web application and Angular makes it very easy to implement routing with router outlet.…
In this post, I will show you how to download a file in Angular from a remote web API. CSV files, Excel spreadsheets, Word documents, PDF reports and images are common types of files that a functional Angular web app may need to download. In most cases, back-end APIs return…
In this post, we'll look at how to validate autocomplete component from Angular Material. Working with reactive forms, we'll write a custom validator to force selection only from the list of options. The autocomplete component is an input with a dropdown of suggested options. It allows the user to type…
In this post, you'll learn how to use Angular Material calendar component without date picker input. The calendar component allows date selection in a month view, which could be useful for a wide range of use cases such as booking forms. In addition to displaying a calendar, we will validate…
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…
It is a common requirement for any Angular application to prompt the user for a confirmation dialog. For instance, you may want to show a message when the user wants to delete a record or send an email. In this post, we will look at how we can implement a…
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…
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…
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…
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…