Differentiate between declaration, provider and imports in the NgModule?Example

In Angular, NgModule is a fundamental concept that helps organize and configure various artifacts in an application. It is important to understand the differences between declaration, provider, and import within NgModule. In this article, we will explore these concepts and provide examples with their corresponding outputs.

1. Declaration

The declaration property in NgModule is used to specify the components, directives, and pipes that belong to the module. By declaring these artifacts, we make them available for use within the module or by other modules that import it.

Example:

typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component.component';
import { MyDirective } from './my-directive.directive';
import { MyPipe } from './my-pipe.pipe';

@NgModule({
  declarations: [
    MyComponent,
    MyDirective,
    MyPipe
  ],
  imports: [
    CommonModule
  ]
})
export class MyModule { }

In this example, the `declarations` array includes MyComponent, MyDirective, and MyPipe. These artifacts are part of the MyModule NgModule and can be used within this module or by other modules that import MyModule.

2. Provider

The provider property in NgModule is used to configure dependency injection for the module. It allows us to specify services or other providers that should be available for injection throughout the application.

Example:

typescript
import { NgModule } from '@angular/core';
import { MyService } from './my-service.service';

@NgModule({
  providers: [
    MyService
  ]
})
export class MyModule { }

In this example, the `providers` array includes MyService. By including it in the providers array, MyService becomes available for injection throughout the module and its components. This ensures that instances of MyService can be accessed and used by other components within the module.

3. Imports

The imports property in NgModule is used to import other modules into the current module. This allows us to access and use the exported artifacts from the imported modules within the current module.

Example:

typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    SharedModule
  ]
})
export class MyModule { }

In this example, the `imports` array includes CommonModule, FormsModule, and SharedModule. By importing these modules, the components, directives, pipes, and services defined in those modules become accessible within the current module (MyModule).

Conclusion:

Understanding the differences between declaration, provider, and import within NgModule is essential for building Angular applications. The declarations property is used to declare components, directives, and pipes within the module. The providers property is used to configure dependency injection by specifying services and providers. The imports property is used to import other modules, allowing access to their exported artifacts. By effectively utilizing these concepts, we can organize and configure Angular modules to create robust and modular applications.