Angular 8 Session 7: Modules In Angular

 Modules In Angular

Angular applications are modular based and it has it’s own modularity system called NgModules.

NgModule is the container where you can group components, directives, pipes, services etc... As part of a registration process.

Module can be import functionality of other exported NgModule and export selected functionality to be used by another NgModule.

Every application must be having at least one AppModule resides in a file app.module.ts.

NgModule Metadata

The metadata has some properties mentioned below:

declarations: It declares with components, pipes & directives of NgModule.

exports: It is the subset of declaration which avails the component to be used by other NgModule.

imports: Comprises of other exported classes needed by components.

providers: This section comprises of services at global level i.e. will be available through out the application.

bootstrap: It contains the root view or component that bootstraps the application as startup and holds other views.

Working With Multiple NgModule

Step 1: An application can contain multiple NgModule and its respective configuration meant to that only. To create a module in project execute the below cli command.

ng g m Department

Step 2: To avail the components outside of module export it using its native module.ts.

@NgModule({

  declarations: [DepartmentComponent],

  imports: [

    CommonModule

  ],

  exports: [DepartmentComponent]

})

export class DepartmentModule { }

Step 3: And finally it needs to be registered in import section of app.module.ts.

imports: [

    BrowserModule, DepartmentModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.module.ts

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

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

import { AppComponent } from './app.component';

import { EmployeeListComponent } from './Employee/employee-list/employee-list.component';

import { DepartmentModule } from './department/department.module';

@NgModule({

  declarations: [

    AppComponent,

    EmployeeListComponent

  ],

  imports: [

    BrowserModule, DepartmentModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }