How to create a Directive in Angular 9

In this article we will learn how to create a directive and use it in Angular 9.

It has been said that directives are perhaps the most important bit of an Angular application. As a matter of a fact one of the most-used Angular unit, the component, is actually a directive.

According to Angular 9 documentation on attribute directive there are three kinds of directives in Angular:

1. Components — directives with a template.
2. Structural directives — change the DOM layout by adding and removing DOM elements.
3. Attribute directives — change the appearance or behavior of an element, component, or another directive.

In this article I will focus on how to create and use a structural directive.

Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.

This article will show you how to create a directive that gets applied to an HTML table that does not have a footer and if the table has a <tbody> with rows the directive will automatically add a footer section that displays the number of rows present in the table.

While this might seem a silly example it will however demonstrate the following:

• How to create a directive
• How to use the newly created directive
• Gives you a good foundation that will help…