forChild Method
The forChild
method is used in feature modules to configure routes and other settings that are specific to that module. It allows feature modules to contribute their own routes without interfering with the global configuration set up by forRoot
.
This method is used in the feature modules or child modules, especially when lazy loading is getting used. It confgures routes and services specific to that particular feature module. This method can be called multiple times in various feature modules.
Syntax:
// Feature Module (feature.module.ts)
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class FeatureModule{}
Features of forChild Method
- Module-specific Configuration:
forChild
allows configuring routes and settings specific to feature modules. - Lazy Loading Support: Enables lazy-loaded feature modules to define their own routes without interfering with the global router configuration.
- Multiple Invocations: Unlike
forRoot
,forChild
can be called multiple times within different modules to configure routes and settings. - Encapsulation: Helps in encapsulating module-specific functionality and settings, promoting a modular architecture.
- Scalability: Supports scalable application development by allowing feature modules to manage their own routes and settings independently.
Example:
Step 1: Create a Feature Module using the below command.
ng generate module feature-module --routing
Step 2: Create a Feature component inside the feature module.
ng generate component feature-module/feature
Code Example:
<!-- feature.component.html -->
<h1>This is a feature component</h1>
<!-- home.component.html -->
<h1>This is the Home Page</h1>
<div>
<a routerLink="/feature">Feature</a>
</div>
//feature-module-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component';
const routes: Routes = [{ path: 'feature', component: FeatureComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class FeatureModuleRoutingModule { }
//App.component.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { FeatureModuleModule } from './feature-module/feature-module.module';
@NgModule({
declarations: [AppComponent, HomeComponent, AboutComponent],
imports: [BrowserModule, AppRoutingModule, FeatureModuleModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }
Save the changes and run the application
ng serve
Output:
forRoot vs. forChild method in Angular
Routing is an important part of any Angular application which makes it important to understand the difference between forRoot and forChild methods provided by the Angular router module. These methods allow us to configure routing within our application. In this article, we’ll understand both of these methods in detail.
Table of Content
- forRoot method
- forChild Method
- Difference Between forRoot and forChild method
- Conclusion:
In Angular, forRoot and forChild methods are used to configure Angular modules. These methods are primarily used in routing modules to set up routes and services.
Contact Us