4 New capabilities of Angular building blocks

 

This chapter covers

  • Supercharging input properties to make them required, transform their values, or bind them to routing parameters
  • Using host directives to compose new directives from existing ones
  • Switching to type-safe reactive forms to ensure the best interaction with TypeScript and improved developer experience, coupled with other improvements to forms
  • Improving image load time by using the new NgOptimizedImage directive
  • Using fetch-based backend instead of XHR in HTTP requests

Previously we covered some changes in Angular that could be deemed quite revolutionary—changes that affected entire applications and their structure and even changed the nature of some building blocks (like functional route guards, which we covered in the previous chapter). Now it is time we go a level deeper and familiarize ourselves with some improvements that aim at reducing boilerplate and improving performance, as well as bettering our code quality on a more local magnitude.

4.1 Powerful inputs

4.1.1 Required inputs

4.1.2 Transforming input values

4.1.3 Binding routing parameters to input properties

4.1.4 Inputs for dynamic components

4.2 Host directives

4.2.1 Extending existing directives

4.2.2 Using multiple directives and adding inputs

4.2.3 Things to know when using host directives

4.3 Type-safe reactive forms

4.3.1 Downsides of using untyped forms

4.3.2 Introducing type-safe forms

4.3.3 Common pitfalls when working with type-safe forms

4.3.4 Migrating to type-safe forms

4.3.5 Form events

4.4 NgOptimizedImage

4.4.1 Adding lazy loading and remembering to set width/height

4.4.2 Prioritizing image loading

4.4.3 Srcsets and image loaders

4.5 Other improvements

4.5.1 Self-closing component tags

Summary