 Resources from Juri Strumpflohner in 2021

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

When our Angular web app grows, the initial bundle size increases and so does the [Time to Interactive](https://web.dev/interactive). One of the countermeasures we can apply to improve that is to apply code-splitting to our app and consequently to lazy load those bundles only when they are needed. In this lesson we will learn how to apply route-level code splitting via the Angular CLI.

Article: https://web.dev/route-level-code-splitting-in-angular/

Apply Route-level Code Splitting and Lazy Loading with the Angular CLI

When you lazy load a module (see [according lesson on the topic](https://egghead.io/lessons/egghead-apply-route-level-code-splitting-and-lazy-loading-with-the-angular-cli)) the user gets the benefit of faster loading of the application. However this comes at the cost of a delay when the module gets loaded at runtime. To mitigate this issue, we can apply some preloading strategy. Angular comes with a default one, that preloads all lazy modules. Let's see how to implement that.

Preload All Lazy Loaded Modules with Angular

[Preloading all modules](https://egghead.io/lessons/egghead-preload-all-lazy-loaded-modules-with-angular) is quite an extreme approach and might not always be desirable. For instance, you don't want to preload lazy routes a user might not even have access to. Therefore, in this lesson we're going to have a look at how to define a custom preloading strategy in Angular.

Implement a Custom Preloading Strategy with Angular

In a [previous lesson we learned about implementing a custom preloading strategy](https://egghead.io/lessons/egghead-implement-a-custom-preloading-strategy-with-angular). That gives you a lot of control over which route to preload and which not, whether it is based on the user's permissions or some runtime app config. In this lesson we're using [ngx-quicklink](https://github.com/mgechev/ngx-quicklink), a library that drastically simplifies the custom preloading, by automatically loading all visible links on the page.

Custom Route Preloading with ngx-quicklink and Angular

Measuring is extremely important, without numbers we don’t know about potential problems and we don’t have a base we can improve upon. [Performance Budgets](https://web.dev/performance-budgets-101) are a way to impose limits on metrics that may affect our app’s performance. In this lesson we’ll learn how to configure the Angular CLI to configure performance budgets, to monitor them and to alert us when we violate them.


Calculate and Measure Performance budgets with the Angular CLI

Browsers become faster every day, but still, DOM updates are costly. If we have large lists, the browser needs to render them upfront, creating hundreds if not thousands of DOM nodes, even though the user might not even scroll that far in the list. Not only does this slow down the scrolling itself, but even the page load of our app. To optimize this experience, we can use virtual scrolling, in particular, in this lesson we’re using Angular’s CDK to implement that.

Apply Virtual Scrolling to large lists with the Angular CDK

To further speed up our app and to provide a more pleasant experience in flaky network conditions, we may want to use a service worker that allows us to apply precaching mechanisms. Luckily the Angular team already offers a service worker module that is well integrated with the framework. Let’s have a look at how to apply that to our application.

Apply Precaching with the Angular Service Worker

Bite-size video tutorials for badass web developers.

egghead

Optimizing images is key. There's no point in serving a multiple megabyte sized high resolution images when the consumer always just sees them scaled down and embedded within your app. At that point, you might want to compress your image. In this lesson I'm quickly showcasing how you can use the squoosh.app web application to quickly compress an image.

Compress images easily with Squoosh.app

Ever had to disable a form control based on the value of another form control? If your city dropdown field is filtered based on the current nation dropdown value, it does not make sense to allow the user to select a city if the nation has not been chosen yet. Right? Let's see how to implement that with Formly.

Dynamically disable a Form field with Angular Formly

[Formly](https://formly.dev) has a nice mechanism called "expression properties". These are expressions in the form of a function callback or string expression that are evaluated at runtime. In this video we're going to explore how to leverage these expressions to set values on our data model.

Dynamically set Model Properties with Angular Formly Expressions

Assume we want to add a `data-cy` attribute to all of our form controls. We need this as a hook to later be able to easily grab our input fields from within our [Cypress](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements) integration tests. Of course we could manually add these `data-` attributes to each of our formly field configuration. But there's a much more elegant approach: extensions. In this lesson we're going to see how they work.

Implement cross-cutting functionality with Angular Formly Extensions

In this lesson we're going to take a look on how to install and setup [Angular Formly](https://formly.dev). We will walk through the difference between the "core" part of Formly and the various UI themes it comes with and how to configure them.

Install and Setup Angular Formly

In this lesson we're going to create a component that uses Formly's `<formly-form>` component and create a first simple input field that automatically databinds to our data model.

Create a Simple Form in Angular with Formly

In a [previous lesson](/lessons/egghead-create-a-simple-form-in-angular-with-formly) we've seen how to create a simple input form control. In this lesson we're further looking into customizing the input type, such as rendering HTML form controls of type `<input type="number">` with Formly.

Customize the form control's input type with Angular Formly

Your data model might have some property like `nationId: 3`. This number is usually a pointer to some other data model, those of the nations in this case. On the UI such fields are often represented as dropdown fields. In this lesson we're going to learn how to implement dropdown fields with [Formly](https://formly.dev). We will also learn how Formly handles async data binding (such as the list of nations for the dropdown field) and how you can even directly bind RxJS Observables.

Render Dropdown fields and bind Observables streams with Angular Formly

In order to be able to further interact with Formly controls at runtime, each field configuration has a `hooks` property. We're not talking about "React hooks" but rather about a way to "hook into the lifecycle" of a formly field. We have methods such as `onInit`, `onChange` etc.

Add functionality to Angular Formly controls with Formly Lifecycle Hooks

Every serious form in large apps has some dependent fields. For instance a dropdown field containing all nations and another dropdown field displaying the cities based on the currently selected nation. In this less we're looking into how we can dynamically load and filer our city dropdown based on the changes on our nation dropdown field.

Implement cascading Dropdown fields with Angular Formly

Sometimes you may have the scenario where the server exposes the configuration for your form. It might be because the user has the possibility to configure which fields are on the UI, or whether you just want to quickly generate forms for your application masterdata out of the database structure.
In this lesson we're exploring how Formly allows us to consume a server-side generated JSON version of a Formly configuration.

Dynamic JSON Forms with Angular Formly

In this lesson we're going to learn how to dynamically hide a form control with Formly's `hideExpressions`. These expressions are evaluated automatically at runtime whenever a change on our form happens. As a result we can easily hide - say - the city dropdown field when no nation value has been selected yet.

Dynamically hide Form Controls with Angular Formly

Sometimes you need add values to your form without having a visible UI form control. A typical example is the `id` property of your data model. With Formly you actually have multiple choices. By default Formly has a 2-way databinding between the form and the data model. As a result you can directly use the model and send it back to the server as it will be always in sync with the form. If you decide to still use the form value, check out this lesson to see how to implement "hidden fields".

Add hidden fields to a Form with Angular Formly

Every serious form has some field validation. In this lesson we're implementing some form validation with Formly and we'll learn different ways to specify and customize the validation error message.

Topics

Instructors

Content Type