Angular 7/8/9 How to Use Directives in other Modules on Child Components

In this tutorial, we will learn how to create custom Directive in Angular Application and re-use them in different components and at different levels of module hierarchy.

Sometimes in large Angular applications, we may have a more complex structure of components where some of them may have their own modules and sub-modules or components.

In that case, it becomes a little tricky to use some reusables at different levels at parent-child structures. Here we will create a new Angular project with a similar type of component structure with a parent-child structure to teach how we can use directive with a simple trick

How to use a custom Directive in multiple modules and it’s components?

To make a directive available at all places, we need to create its own module to import and export it.

Sounds weird?

Let’s create a  simple directive which will add an asterisk(*) sign to required fields:

requiredsign.directive.ts 

In addition to the above code for the directive, we will also add its own module with export and import properties having this directive:

So now our complete directive will look like this:

 

Where and How to use this Directive?

Now if we create a simple custom directive, it is added in declarations array of the app.module.ts file, but as we have a complex modular structure of the project as shown below:

So instead of adding RequiredsignDirective in declarations array, we will add RequiredsignDirectiveModule in imports array as shown below:

That’s it now your directive will work as expected as its class is available for import and export using its own module anywhere in the project.

So here we got to know how we can convert a simple custom Directive into a module to be added anywhere in the project by simply adding its own @NgModule decorator.

 

Leave a Reply

avatar
  Subscribe  
Notify of