How to Create a Module in Angular?

In Angular, modules are the building blocks of your application. They help you organize your code into logical units, making it easier to maintain and scale your application. To create a module in Angular, follow these steps:

1. Generate a Module

You can use the Angular CLI to generate a new module:

ng generate module my-module

This command will create a new folder named my-module containing the following files:

my-module.module.ts: The main module file.
my-module.component.spec.ts: Unit test file for the component.
my-module.component.ts: The component file.
my-module.component.html: The template file for the component.
my-module.component.css: The stylesheet file for the component.

2. Define the Module

Open the my-module.module.ts file and define the module using the @NgModule decorator:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyModuleComponent } from './my-module.component';

@NgModule({
  declarations: [
    MyModuleComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    MyModuleComponent
  ]
})
export class MyModuleModule { }

declarations: An array of components, directives, and pipes that belong to this module.
imports: An array of modules that this module depends on.
exports: An array of components, directives, and pipes that this module makes available to other modules.

3. Import the Module

Import the newly created module into your application's main module (app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyModuleModule } from './my-module/my-module.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyModuleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Use the Module

You can now use the components, directives, and pipes declared in your module within your application.

5. Example

Let's create a simple module called shared that will contain a custom directive called highlight:

// shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    HighlightDirective
  ],
  imports: [
    CommonModule
  ],
  exports: [
    HighlightDirective
  ]
})
export class SharedModule { }

Now, import the SharedModule into your app.module.ts and use the highlight directive in your components:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!-- app.component.html -->
<p [appHighlight]="'red'">This text will be highlighted in red.</p>

Conclusion

By creating modules, you can organize your Angular application into smaller, more manageable units. This makes your code easier to maintain, test, and reuse.

A2oz