DEV Community

queencykoh
queencykoh

Posted on • Updated on

Creating a Feature Module

What is a Feature Module?

A feature modules help us organize our code. It helps us to break down our application into specific use cases. As the application grows we don't want everything to live in the root module, the app.module.ts file.

Create a Feature Module

Open terminal and go to the Angular project directory and run

ng generate module Transactions
Enter fullscreen mode Exit fullscreen mode

Angular CLI will create a folder called transactions with transactions.module.ts file inside

Open transactions.module.ts to see its contents

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class TransactionsModule { }
Enter fullscreen mode Exit fullscreen mode

The content structure is the same as the the app.module.ts but notice that the feature module imports the CommonModule instead of the BrowserModule. CommonModule contains common directives such as ngIf and ngFor while BrowserModule configures the Angular app for the browser which is needed to be done only once in the app.module.ts.

Import Feature Module

The root module must know about the feature module, to do this, we must import the feature module in the root module.

  1. Open app.module.ts file
  2. Add the following line of code import { TransactionsModule } from './transactions/transactions.module';
  3. Add TransactionsModule in the imports array

app.module.ts should look like the following

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { TransactionsModule } from './transactions/transactions.module';


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

Enter fullscreen mode Exit fullscreen mode

Create a Component in the Feature Module

Open terminal and run

ng generate component transactions/TransactionList
Enter fullscreen mode Exit fullscreen mode

This will create a new transaction-list folder for the new component within the transactions folder and will update the transactions.module.ts file to add TransactionListComponent in the declarations array.

Export a feature module’s component

To render the Transaction List component in the App component, we have to export the TransactionListComponent in the TransactionsModule.

  1. Open transactions.module.ts file
  2. After the imports array, add the following code
exports: [
    TransactionListComponent
  ]
Enter fullscreen mode Exit fullscreen mode

transaction.module.ts should look like the following :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TransactionListComponent} from './transactions/transaction-list.component';



@NgModule({
  declarations: [
    TransactionListComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    TransactionListComponent
  ]
})
export class TransactionsModule { }
Enter fullscreen mode Exit fullscreen mode

Render a feature module’s component template

  1. Open app.component.html
  2. Add the tag <app-transaction-list></app-transaction-list>
  3. In the terminal, run ng serve
  4. Launch browser and you should see transaction-list works!

Top comments (0)