The previous two chapters on Angular (Chapter 10, Angular ASP.NET Core Project Template, and Chapter 11, Input and Interactions) already showed most of Angular's predefined attribute directives, such as ngModel, ngForm, ngSubmit, ngReset, ngClass, and ngStyle, and all routing-related attributes (Chapter 10, Angular ASP.NET Core Project Template): routerLink, which accepts and follows a router URL, and routerLinkActive, which adds a CSS class when the routerLink of the <a> tag contained in the element matches the current router URL. In general, an attribute directive somehow modifies the behavior of the HTML element or component it is attached to. This section shows how to define custom attribute directives.
Attribute directives are TypeScript classes decorated with the @Directive decorator. They receive a reference to the element they are attached...