Reusing repeating template behavior with directives

In the previous section, we implemented a mat-error element for every validation error for every field part of the name object. This quickly adds up to seven elements for three fields. In Chapter 5, Designing Authentication and Authorization, we implemented common/validations.ts to reuse validation rules. We can reuse the behavior we implement within mat-error, or any other div for that matter, using an attribute directive.

Attribute directives

In Chapter 1, Angular’s Architecture and Concepts, I mentioned that Angular components represent the most basic unit of an Angular app. With components, we define custom HTML elements that can reuse features and functionality represented by a template and some TypeScript code. Conversely, a directive augments the capabilities of an existing element or component. In a sense, a component is a super directive that augments basic HTML capabilities.

With this view in mind, we...