Features Module in Angular

Introduction

Features modules are powerful Angular concept which is designed for modularity. To organize our code in a better way, these modules are introduced. For bigger applications, we can have many feature modules that specify a particular code and functionality each. This makes our application modular. The logic for one functionality will be segregated completely from another using feature modules. Feature module is not the root module of the application. There are many advantages of maintaining features modules:
  • Modularity in our app.
  • Helps to manage the size of the root module.
  • Dedicated template and logic for separate functionality.
  • Teams collaborate well with feature modules.

How to create a feature module

We can create a feature module using Angular CLI command. We are creating the module name "Admin" for our application as below:
ng generate module Admin
By writing the above command, the following code snippet will be generated. First two lines of the code are NgModule and CommonModule import respectively. NgModule provides us the @ngModule decorator. CommonModule gives us information about commonly used directives such as ngIf and ngFor. In the root module, we have BrwoserModule instead of CommonModule. BrowserModule configures the application to open in the browser which is needed per application. Every feature module will have an export statement as export class AdminModule here. So that other module can get or import it.

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

Importing 

The feature module can be imported in the application, we need to make an entry in the root module file which is app.module.ts. We need to declare it in imports array after importing it in app.module.ts file.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// import the feature module here so you can add it to the imports array below
import { AdminModule } from './admin/admin.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AdminModule // Feature module in imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Rendering Component

We will create a component for feature modules and add it in declarations array in admin.module.ts file. To create a component using CLI, write as below. The below command will update the declarations array in the admin.module.ts file.
ng generate component Admin/AdminCustomerTree

The below is the declarations array in admin.module.ts file:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
   AdminCustomerTree // Component is added in declarations array
] 
})
export class AdminModule { }

Exporting this component 

To render this component in the App.component, we have to declare it in exports array in admin.module.ts file. 
exports: [
  AdminTreeComponent
]
We can use it in App.Component.html file using the selector value of the component in admin.component.ts file

<app-admin-customer-tree></app-admin-customer-tree>

Now our component template also renders on the page.

Comments