Creating Custom Module in Angular

Today we will learn how to create our own Angular Module. If you are not aware of Angular Modules I would recommend you to go through this post

In order to create a module we will be using the below CLI command
ng generate module <module_name>
or the shorthand
ng g m <module_name>

Lets open a command prompt from the project root and type in the below code -
ng g m payroll

In the command prompt you will see like below -

Lets see how the project looks like -

So here we can see a folder with the module name has been created and a file called payroll.module.ts file has been created.

Lets open the file and see -

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';@NgModule({  declarations: [],  imports: [    CommonModule  ]})export class PayrollModule { }

Here in the above code we can see the similar structure as we saw in the module provided by Angular the app.module.ts file.
One more thing you have noticed the declaration array is empty as we dont have any component/ pipe/ directive associated with this module yet. If we want to put any of the component/ pipe/ directive inside this directive we need to add in this list.

Lets see how to do that. For that lets open the prompt again (from the project root folder) and type in the CLI command to create a component.

Lets run the below command: ng g c PayrollDashboard

But wait , you might ask a question if I run the above command in which module my component will get added???
In the above case still the new component will be added to the app.module.
To specify the module also we need to add some extra flag to the above CLI command.

ng g component PayrollDashboard
--module=payroll/payroll.module.ts

Here you can see that the very similar output we saw earlier when creating custom component, But one minor difference is there the last line where you can see the UPDATE has happened to the
payroll.module.ts file and not app.module.ts

Now if you open the payroll.module.ts file you will see that the declarations array has been added with the newly created component.
But still you might not be so happy as the component has been created outside the payroll folder (marked with yellow arrow)-

If you see closely the payroll-dashboard was created outside the payroll folder. But I need all the payroll features under the payroll folder itself right?
For that we need to do a minor tweak in the earlier CLI command used to create the component -
ng g component payroll/PayrollDashboard --module=payroll/payroll.module.ts

If you see we just added the folder name before the Component name while creating the component. Cool right!!!

So we added the Component.
But how to use?
Is it the same thing like earlier?

Take the component selector and add it in app.component.html file like below?

The answer is NO!!!
2 more steps (I say VERY IMPORTANT steps you need to take care of)

1 Since the payroll.component is part of a separate module (payroll module) you need to import the payroll module in the module where you will be using (app.module).
In this case we will be using the payroll.component (present in payroll module) inside app.component.html file, which is present inside the app.module.ts

See how we added the newly created module?
In the imports array we added the name of the payroll.module. We discussed earlier right?

2 Just adding the module is not enough. We need to add the component (we are using outside) in the exports array of the module where it has been declared.
So in our case, we need to add the name of the component to the exports array of the payroll.module

That's it...
If you open the browser you must see the below output -

Hope you enjoyed the post.
Coming up next the different types of modules we can have in Angular. Stay tuned!!!
If you liked the post please do like share and comment.

I will be tweeting more on Angular JavaScript TypeScript CSS
So hope to see you there too

Cheers!!!
Happy Coding