Angular University Blog

Angular Custom Validators: Complete Guide

The Angular Forms and Reactive Forms modules make it very simple to build large scale data-entry forms in a maintainable way. These large-scale forms typically have complex business validation rules, that might require checking the values of multiple fields at the same time or

RxJs Error Handling: Complete Practical Guide

Error handling is an essential part of RxJs, as we will need it in just about any reactive program that we write. Error handling in RxJS is likely not as well understood as other parts of the library, but it's actually quite simple to

RxJs

Comprehensive Guide to Higher-Order RxJs Mapping Operators: switchMap, mergeMap, concatMap (and exhaustMap)

Some of the most commonly used RxJs operators that we find on a daily basis are the RxJs higher-order mapping operators: switchMap, mergeMap, concatMap and exhaustMap. For example, most of the network calls in our program are going to be done using one of

NgRx

Angular NgRx Entity - Complete Practical Guide

When using NgRx to build our application, one of the first things that we have to do is to decide what is the best possible format for storing data inside the store. Handling the business data in our centralized store is something that we

NgRx

Angular Ngrx DevTools: Important Practical Tips

This post is a step-by-step guide for setting up your Ngrx Development environment, namely the Ngrx DevTools, but not only: we will also talk about some best practices for developing Ngrx applications in general. These practical tips will likely make a huge difference in

Angular Core

Angular @ViewChild: In-Depth Explanation (All Features Covered)

The Angular @ViewChild decorator is one of the first decorators that you will run into while learning Angular, as it's also one of the most commonly used decorators. This decorator has a lot of features: some of them might not be very well known

Angular Universal

Angular Universal: a Complete Practical Guide

This post will be a complete practical guide for getting started with Angular Universal. We are going to go start with an existing Angular application, and we will progressively turn it into an Angular Universal application while explaining every step along the way! We

Angular PWA

Angular Push Notifications: a Complete Step-by-Step Guide

In this post, we are going to go through a complete example of how to implement Web Push Notifications in an Angular Application using the Angular Service Worker. Note that these are the exact same native notifications that we receive for example on our

Angular Material

Angular Material Dialog: A Complete Example

In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material Dialog component. We are going to cover many of the most common use cases that revolve around the Angular Material Dialog,

Angular Core

Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)

In this post, we will cover in detail an error message that you will occasionally come across while building Angular applications: "Expression has changed after it was checked" - ExpressionChangedAfterItHasBeenCheckedError. We are going to give a complete explanation about this error. We

Angular Material

Angular Material Data Table: A Complete Example (Server Pagination, Filtering, Sorting)

In this post, we are going to go through a complete example of how to use the Angular Material Data Table. We are going to cover many of the most common use cases that revolve around the Angular Material Data Table component, such as:

Angular PWA

Angular Service Worker - Step-By-Step Guide for turning your Application into a PWA

With the Angular Service Worker and the Angular CLI built-in PWA support, it's now simpler than ever to make our web application downloadable and installable, just like a native mobile application. In this post, we will cover how we can configure the Angular CLI

Angular PWA

Angular App Shell - Boosting Application Startup Performance

One of the things that most impacts User Experience (especially on mobile) is the application startup experience, and perceived performance. In fact, studies have shown that 53% of mobile users abandon sites that take longer than 3 seconds to load! And this is true

RxJs

Angular Reactive Templates with ngIf and the Async Pipe

The ngIf template syntax is very useful in many common use cases, like for example using an else clause when we want to display a loading indicator. But it turns out that there is more to ngIf than it might seem at first sight:

Angular PWA

Service Workers - Practical Guided Introduction (several examples)

In this post, we are going to do a practical guided Tour of Service Workers, by focusing on one of its most important use cases: Application Download and Installation (including application versioning). As a learning exercise, I invite you to code along, and turn

Angular Core

Angular :host, :host-context, ::ng-deep - Angular View Encapsulation

In this post, we will learn how the default Angular styling mechanism (Emulated Encapsulation) works under the hood, and we will also cover the Sass support of the Angular CLI, and some best practices for how to leverage the many Sass features available. We

Angular Security

Angular Authentication With JSON Web Tokens (JWT): The Complete Guide

This post is a step-by-step guide for both designing and implementing JWT-based Authentication in an Angular Application. The goal here is to discuss JWT-based Authentication Design and Implementation in general, by going over the multiple design options and design compromises involved, and then apply

Angular Security

JWT: The Complete Guide to JSON Web Tokens

This post is the first part of a two-parts step-by-step guide for implementing JWT-based Authentication in an Angular application (also applicable to enterprise applications). The goal in this post is to first start by learning how JSON Web Tokens (or JWTs) work in detail,

Angular Core

Angular ng-template, ng-container and ngTemplateOutlet - The Complete Guide To Angular Templates

In this post, we are going to dive into some of the more advanced features of Angular Core! You have probably already come across with the ng-template Angular core directive, such as for example while using ngIf/else, or ngSwitch. The ng-template directive and

Angular Core

Angular HTTP Client - Quickstart Guide

This post will be a quick practical guide for the Angular HTTP Client module. We will cover how to do HTTP in Angular in general. We will be using the new @angular/common/http module, but a good part of this post is also

Angular Core

Angular ngClass and ngStyle: The Complete Guide

In this post, we are going to learn the most commonly used options that we have available for styling our Angular components using the ngClass and ngStyle core directives. This is the first post of a two-part series in Angular Component Styling, if you

Angular Core

Angular Advanced - A Video List About Several Advanced Angular Topics

In this post, we are going to go over a few videos on some more advanced Angular topics that we tend to find frequently - for example when writing our own third-party library. Table Of Contents Here is the list of topics covered in

Angular Core

Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve Component API Design

One of the Angular features that help us the most in building reusable components is Content Projection and ng-content. In this post, we are going to learn how to use this feature to design components that have a very simple but still powerful API

Typescript

Typescript Tutorial: A Video List Covering ES6 Features, Debugging, Typings and Some Of The Most Useful Type System Features

In this post, we are going to present a series of video tutorials that cover some very commonly used Typescript features. This video list will help you get a good overview of the language, because some of the features presented here solve several long-term

Angular For Beginners

Angular For Beginners Guide - Components vs Directives

Summary: In this article, you will learn how to extend the browser and build your own custom HTML Input tag, as a means of learning the main functionality provided by Angular Components and Directives. This post is part of the ongoing Angular for Beginners