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
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 { }
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.
- Open
app.module.ts
file - Add the following line of code
import { TransactionsModule } from './transactions/transactions.module';
- 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 { }
Create a Component in the Feature Module
Open terminal and run
ng generate component transactions/TransactionList
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.
- Open
transactions.module.ts
file - After the imports array, add the following code
exports: [
TransactionListComponent
]
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 { }
Render a feature module’s component template
- Open
app.component.html
- Add the tag
<app-transaction-list></app-transaction-list>
- In the terminal, run
ng serve
- Launch browser and you should see
transaction-list works!
Top comments (0)