 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

In this lesson we will take a look how to create a more complex but also more real-world example. We’re creating a simple person object and by iterating over its properties we dynamically create multiple `FormControl` instances using Angular’s reactive forms approach.

Dynamically Create Multiple FormControls from a Data Set in Angular

In this we will generalize our component so that it can take a generic data object which serves as the “API” for dynamically creating our form. We will also see how we can leverage that new structure to render different HTML form input types, such as “text” and “number."

Dynamically Render Different Form Input Types with Angular’s Reactive Forms

Select boxes (aka dropdown lists) are a bit different than normal text input boxes. We’re not just rendering a single value, but rather we have a list of values and according text representations which are presented to the user. 

In this lesson we extend our API object to also cope for such scenarios before we implement the dynamic rendering and databinding of our select box.

Create Dynamic Select Boxes with Angular’s Reactive Forms

Similar to select boxes, radio button lists render as a list of values and according text representations. In this lesson we learn how dynamically render and bind such radio button lists by further extending our dynamic form from the previous lessons. Again, we’ll leverage the power of Angular’s reactive forms approach for this.

Create Dynamic Radio Button Lists with Angular’s Reactive Forms

Even though we are dealing with a dynamic form, we cannot forget about input validation. Validation is an essential part in every HTML form in order to get some good quality data from our user. 

In this lesson we’ll take a look how to further extend our example of creating a dynamic form with Angular by adding some form validation.

Add Validation to Dynamic Forms in Angular

In our dynamic forms lessons we obviously didn’t account for all the various edge cases you might come across. Therefore if you need a more complex setup you might want to take a look at `ngx-formly`. Formly has been a very popular library even in AngularJS 1.x for rendering dynamic forms. 

Ngx-formly is the Angular (2+) counterpart for doing this job. In this lesson we’ll quickly give it a look at how to transform our custom dynamic form rendering to use `ngx-formly`.
For more use cases definitely [check out this Configuration based reactive Angular Forms with ngx-formly collection](https://egghead.io/playlists/configuration-based-reactive-angular-forms-with-ngx-formly-465f) and official `ngx-formly` repository on GitHub.

Create a Dynamic Angular Form with ngx-formly

When our routing configuration gets more complex it is suggested to organize routes using the so-called “Routing Module” pattern. Simply speaking, this means moving the route definitions and everything else related to routing into its own dedicated NgModule, a sub module of the feature module you’re working on. In this lesson we will take a look how to migrate a simple routing configuration to reflect the Routing Module pattern.

Organize routes using the Routing Modules pattern in Angular

An Angular URL can be structured into segments, each of which is formed by its path and series of additional information such as parameters, query parameters and fragment. Parameters are a way to provide a per segment scoped information, such as the ID of an object to be visualized by the activated component. In this lesson we learn how to define and read route parameters from within an Angular component in order to further process it.

Define and read route parameters with the Angular router

An Angular URL can be structured into segments, each of which is formed by its path and a series of additional information such as parameters, query parameters and fragment. Query parameters are a way to provide useful data to components, with the particularity that they are shared across many activated routes and therefore accessible from multiple component. In this lesson we will learn how to define and read a route’s query parameters.

Define and read query parameters with the Angular router

In this lesson we will learn about our course setup. We will briefly dive through our tabbed Angular component, which allows us to define a fixed set of static tabs. This component will serve us throughout the course as we will extend it to allow for dynamic tabs to be inserted.

Angular Tab Component Overview

In this lesson we learn about `ng-template`, an Angular component that allows us to declare some piece of Angular template. We will explore how to use `@ViewChild` to grab the template from within our Angular component and how we can then pass it along accordingly.

Declare a Template within a Template using `ng-template` in Angular

For now, our `TabComponent` which renders a single tab within our `TabsComponent` container uses an `ng-content` component to render the content defined by the developer via Angular’s content projection mechanism. In this lesson we extend the tab to be able to take some variable template defined via `ng-template` and render it inside our tab using `<ng-container>` and `ngTemplateOutlet`.

Pass a Reference of an ng-template to a Component and Render it in Angular

We’ve seen how to pass along a reference to a template to an Angular component and how to render it. Templates without actual dynamic data are boring however. Therefore in this lesson we learn how to leverage `ngTemplateOutletContext` to pass in data to an `ng-template`.

Pass Data to a Dynamic ng-template using ngTemplateOutletContext in Angular

When we dynamically instantiate a component, we obviously have to know where to place such component within another component’s template. 

For that purpose we will learn how to use a custom directive which exposes a `ViewContainerRef` and serves us as an anchor point we can then reference later. 

We also explore a second variant, using a simple template variable and a `@ViewChild` which just exposes the `ViewContainerRef`.

Define an Anchor Point Where to Render Dynamic Components in Angular

In this lesson we learn how to leverage the `ComponentFactoryResolver` as well as our anchor we defined previously, to dynamically instantiate an Angular component, in our specific case the `TabComponent`. 

We will also learn how to register our dynamic components in the `NgModule`’s `entryComponent` property.

Dynamically Instantiate an Angular Component

With our dynamic tabs we also want to give our users the possibility to close them again. As such we also need to account for destroying our dynamically created components. In this lesson we will learn how the `ViewContainerRef` can help us with that.

Destroy a Dynamically Instantiated Angular Component

An Angular service is a simple ES2015 class with a decorator on top. In this lesson we take a look at the anatomy of a service, what the `@Injectable` decorator is about and why and when it is actually required.

Define an Angular Service

Given that services are simple classes we could just import them in our component via normal ES2015 import statements and then instantiate them accordingly. 

However, a service might depend upon other services as well and we definitely don’t want to manually wire up the entire chain of such dependencies. That’s why we have the dependency injector in Angular which will do it for us. 

In this lesson we learn how to wire up our service properly by defining a provider that creates our service. We will also see how services defined on `NgModule` are globally visible because they are hooked up onto Angular’s root injector.

Register a Service to Angular’s Dependency Injection Mechanism

Aliased providers in Angular allow us to overwrite a provider with another existing provider, so basically create an alias. This is particularly useful if you either don’t have access to the provider you’re aliasing, or when you’re performing a larger refactoring and you don’t want to replace all occurrences right upfront. In this lesson we are going to look also at the key difference between aliasing a provider and simply overwriting it.

Define an Aliased Class Provider in Angular

Often it might be simply easier to create the implementation out of a simple JavaScript object rather than a full blown class. That’s where value providers come in play!





Simplify an Angular Service using a JavaScript Object as a Value Provider

Sometimes you need to have full control of how a service is instantiated at runtime. Consider for instance a logging service that gets the information of whether it is enabled or not via its constructor. Angular’s DI won’t be able to determine that value as it is something that needs to be provided explicitly. Factory providers in Angular allow to define a function which will then be called by the dependency injector to construct the given service instance.

Topics

Instructors

Content Type