Fundamentals of Angular Directives - Three Types of Directives in Angular

Declaring Directives in an NgModule



An NgModule is simply a class that is decorated with the @NgModule() decorator. The decorator is simply a function that accepts a single argument that is an object containing the metadata for the Angular module. Modules in Angular provide many benefits. For now, let's focus on the ability to declare a directive in a module using the declarations property of the metadata; that value of which is an array of classes that are the directives that we are using in the module.

By declaring the directive in the NgModule we are instructing the Angular framework that we have defined a new directive that can be used in any of the templates contained in the module. Without declaring the directives the Angular framework would simply be unaware of these new directives that we have created to enhance our application.

An example of an NgModule that declares a new HelloWorldDirective directive is:

  declarations: [HelloWorldDirective]
export class AppModule { }

It is important to note that the HelloWorldDirective is important from a separate file and is included in the declarations array.


I finished! On to the next chapter