15 Creating structural directives

 

This chapter covers

  • Creating and applying structural directives
  • Creating directives that iterate over data values
  • Understanding the concise directive syntax
  • Responding to changes in a structural directive
  • Querying child content in a structural directive

Structural directives change the layout of the HTML document by adding and removing elements. They build on the core features available for attribute directives, described in chapter 14, with additional support for micro-templates, which are small fragments of contents defined within the templates used by components. You can recognize when a structural directive is being used because its name will be prefixed with an asterisk, such as *ngIf or *ngFor. In this chapter, I explain how structural directives are defined and applied, how they work, and how they respond to changes in the data model. Table 15.1 puts structural directives in context.

15.1 Preparing the example project

15.2 Creating a simple structural directive

15.2.1 Implementing the structural directive class

15.2.2 Enabling the structural directive

15.2.3 Using the concise structural directive syntax

15.3 Creating iterating structural directives

15.3.1 Providing additional context data

15.3.2 Using the concise structure syntax

15.3.3 Dealing with property-level data changes

15.3.4 Dealing with collection-level data changes

15.4 Querying the host element content

15.4.1 Querying multiple content children

15.4.2 Receiving query change notifications

15.5 Summary