 Resources from Juri Strumpflohner in 2021

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

We all know this. You’re working on some new feature and you have lots of “work in progress”. Then an urgent issue comes in, you have to jump onto the master and apply a hotfix. In this lesson we will learn how to temporarily store your current changes s.t. you can switch the current branch and come back later to resume your work again.

Temporarily store some work in progress because I have to jump to another branch

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

Subscribing to RxJS Observables is a common operation in Angular components. However, we need to pay attention at also cleaning up our subscriptions when our component gets destroyed. This especially holds for those type of Observables that do not immediately complete (like the ones returned from Angular's HttpClient).
In this lesson we're going to take a look at different approaches for unsubscribing and how the `async` pipe can take away a lot of this burden.
Also make sure to check out [this article on "RxJS: Avoid takeUntil leaks"](https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef)

Avoid memory leaks when subscribing to RxJS Observables in Angular Components

One of the most common patterns is to read some kind of ID from a URL parameter and invoke an Angular Service which in turn fetches the data based  on the parameters. In this lesson we’ll take a look how we can get the data from the URL and forward it to the Angular service. We will also learn how to leverage RxJS operators to make our code more readable.

Forward URL parameters to an Angular Service to retrieve the desired data

Sometimes in big applications, it might simply not be feasible to have the user download it entirely at startup. After all, not all of the application modules might be used with the same frequency, or even not be accessible at all based on user rights. In this lesson we will therefore explore how to lazy load application modules with the Angular router and hence optimize the time to interactive of our application

Lazy load a route with the Angular router

Lazy loading your Angular modules has some substantial performance benefits at application startup. However, when the user then activates a lazy loaded route, there’s the cost of having to wait for that Angular module to be fetched and fully loaded. To mitigate this issue, the Angular router gives us the possibility to preload a lazy loaded route at runtime.

Avoid delays for lazy modules by applying a preloading strategy with the Angular router

While Angular's built-in `PreloadAllModules` strategy works well, in a larger application you might want to get a bit more fine-grained control over which route to preload and which to only load once the user clicks the corresponding link. In this lesson we're creating a custom preloading strategy to exactly do that.

Define a custom preloading strategy for the Angular router

Security has to be done at the API level on the server side. However, for a better user experience we may want to prevent the user from entering areas of our application he’s not authorized to access. By using the `CanActivate` route guard we make this happen.

Prevent a route activation based on user permissions with the Angular router

What if we have a lazy loaded application module behind some route and we want to prevent an unauthorized user from accessing it? We can directly implement a `CanLoad` route guard to even prevent the lazy loaded module from being downloaded. That’s what we are going to do in this lesson.

Prevent a route from being lazy loaded based on user permissions with the Angular router

Sometimes we want to be able to prevent the user from navigating away from a given screen. Especially if some data has been modified but not yet saved. The `CanDeactivate` guard allows us to do exactly this. In this lesson we will take a closer look by implementing one by ourselves.

Notify user about unsaved data when leaving a component using the Angular Router

Fetching data over the network can be costly which is why you might want to introduce caching to prevent unnecessary network calls from happening. In this lesson you will learn how to implement a simple caching strategy combining Angular's `HttpClient` and RxJS operators.

_(Note, this video lesson is highly inspired by Thoughtram's article on [Advanced caching with RxJS](https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html))_

Cache data in Angular services using RxJS 

Did it ever happen to you that you had to make sure certain user events are processed in order? Maybe some of those events were even async. Guaranteeing ordering can be quite tricky, unless you know some RxJS magic. In this lesson I'll briefly show you how to use RxJS's `concatMap` and `switchMap` operators to make sure events are processed in the right ordering and thus to prevent our UI from getting out of sync.

Guarantee Ordering of Events with RxJS

In Angular we have different kind of validators. Client-side and client-side async validators which call a function on the server. Often however, after satisfying all client-side validators, you may want to send the form to the server for validation. In case of an error, the server needs to be able to communicate that back to the client where we want to display it directly on the single form fields again.
In this lesson I'll show you a possible approach of implementing such scenario, returning a `422` status code, processing the response format we specify in the lesson and display it on the Angular form field again

Display a Server Side Validation Error Response onto an Angular Form

The main use case for compiling Angular Components into standalone Angular Elements and bundle them into a single JS file, is to use them within other environments. Such might include server side CMS systems or micro frontends. In such scenarios, an Angular Element or web component should be isolated, fulfil a single functionality and communicate with the outside world using inputs & outputs.
You can however also compile multiple Angular Elements out of a single Angular app, use them separately inside some `index.html` file and even have them share the state over Angular services! Let's learn how!

Create multiple root components in Angular with Angular Elements

You know about the `finally` instruction in the `try-catch`? What if you wanted to have the same when using RxJS Observables? Surprise, there's actually an RxJS operator :wink: called `finalize` which can be used for exactly that. Let's explore in more details.

Execute code when the RxJS Observable terminates with the finalize operator

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

It surely depends on how verbose your programming language is, but there are always again things we have to repetitively type over and over again. As good web developers are lazy :wink: we automate our work, right? In this lesson I'm quickly showing you how easy it is to create code snippets for Visual Studio Code.

Create code snippets in Visual Studio Code

Ever had the need for multiple "app themes", or even to completely dynamically load CSS based on which customer logs into your application? You could of course bundle all of the various themes into a single CSS entry file, but your application size would suffer a lot. Therefore, in this lesson we're going to have a look how to define multiple entry-level CSS files and how to "lazy load" them at runtime.

Lazy Load CSS at runtime with the Angular CLI

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

As shown in a [previous lesson](https://egghead.io/lessons/egghead-apply-route-level-code-splitting-and-lazy-loading-with-the-angular-cli), we can easily code split and lazy load a route in Angular. However when the user then clicks that lazy loaded route, it make some time to actually fetch and run the JavaScript bundle. In this lesson we'll see how we can implement a loading indicator for such lazy loaded routes.

Show a Loading Indicator for Lazy Routes in Angular

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.

Topics

Instructors

Content Type

Free or Pro