Angular: Why and when to create a feature component and feature module
By: Coding In Depth
Tags: Web App Development, Modules, Components, Architectural Design, Angular

Designing Data Model

Create the product interface, check below code for the product.ts file.

export interface Product{ id: number | null; productName: string; productCode: string; productDescription?: string; }

Define a product module which is a feature module for the application. Import CommonModules for the common module used in the feature module.

import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; import { FormsModule } from ‘@angular/forms’; @NgModule({ imports: [ CommonModule, FormsModule, ], declarations: [ //Define feature component here later ], exports: [ //Define feature component here later ] }) export class ProductModule { }

Import ProductModule in the root module. In our case the root module is the default app module.

import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule } from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; import {ProductModule} from ‘./products/products.module’; @NgModule({ imports: [ BrowserModule, FormsModule, ProductModule //<=== Feature Module ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Creating Feature Components

Once our feature module is ready we can create two feature components. So why we are creating two-component instead of one. We can display both product form and product list in the same component. However keeping all functionality in one component as the application grows will become less maintainable. So split the product list and product form component. Once the feature component is created import to the product module. Yes you heard right do not need to import to root component anymore. Imagine this in large application. What will happen when we have tons of feature component. Our root component is clean and all feature components will be imported to the feature module.

import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; import { ProductListComponent } from ‘../products/product-list/product-list.component’; import {ProductFormComponent} from ‘../products/product-form/product-form.component’; import { FormsModule } from ‘@angular/forms’; @NgModule({ imports: [ CommonModule, FormsModule, ], declarations: [ ProductFormComponent, ProductListComponent ], exports: [ ProductFormComponent, ProductListComponent ] }) export class ProductModule { }

Below is the product-form component and template file. The product form consists of a simple product name, code, and description form. On submit event emit the form data to the list component.

Product list components file and template file. Once product added in the product form component and emitted to the list component. We are displaying the product list with iterating the list using a simple table.

Summary

Creating feature module and feature component leverage application scalability. We have seen how beneficial is the feature module in terms of application code maintainability. We have also discussed the benefits in terms of application architecture. We have created feature modules and added them to the root module. We have also created the feature component and added them to the feature module. We have also discussed the feature module types based on the functionality.