Improving the user experience using the defer command

The main intention behind the new HTML template flow control syntax was to have a new basis for building new possibilities in the framework’s templates. The first new feature made possible by the syntax is the defer instruction, with which it is possible to lazy load components directly from the HTML template.

We learned in Chapter 2, Organizing Your Application, that the best practice is to separate your application into functionality modules and configure Angular to load these modules in a lazy way. This means that the module and its components would only be loaded if the user accessed a certain route, resulting in smaller bundles and better performance of your application, especially if your user does not have a good internet connection (such as 3G).

The defer command has the same purpose but instead of working for modules, it works for standalone components. We studied standalone components in Chapter 11, Micro...