Difference between forRoot and forChild with example in angular?

In Angular, the “forRoot” and “forChild” methods are used to configure a module. The “forRoot” method is used when you want to configure a module at the root of your application. On the other hand, the “forChild” method is used when you want to configure a module in a child module.

The main difference between “forRoot” and “forChild” is that the “forRoot” method returns a module with providers that can be shared among the entire application, whereas the “forChild” method returns a module with providers that are only for the child module.

Here is an example of how you might use “forRoot” and “forChild” in an Angular module:

@NgModule({
  imports: [CommonModule]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        LoggerService,
        UserService
      ]
    };
  }

  static forChild(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: []
    };
  }
}

In the example above, the “forRoot” method returns the SharedModule along with the LoggerService and UserService providers, which can be shared among the entire application. The “forChild” method returns the SharedModule without any providers, since they are not needed in the child module.

You would use SharedModule.forRoot() in the root module of your application and SharedModule.forChild() in any child module that needs the SharedModule. This ensures that the providers are only available where they are needed, improving the modularity and maintainability of your code.