Angular7 Modules

Angular7 Modules

Module in Angular refers to a place where you can group the application-related components, directives, pipes, and services.

The header, footer, left, middle and right section become part of a module in the event you are developing a website.

We can use NgModule to describe module. By default, when you build a new project using the command Angular – cli, the ngmodule is generated in the app.module.ts file, and it looks like this –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

The NgModule must be imported like this –

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

The ngmodul structure is as shown below –

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

It starts with @NgModule and contains an object which has declarations, imports, providers and bootstrap.

Declaration

This is an array of generated components. If any new components are made, they will first be imported and the reference will be included in the statements as shown below.

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

It is an array of modules required to be used in the application. It can also be used by the components in the Declaration array. For eg, right now in the @NgModule, we see the Browser Module imported. If your application needs formulas, you can include the module with the code below –

import { FormsModule } from '@angular/forms';

The import in the @NgModule will be like the following −

	imports: [ 
  	BrowserModule, 
  	FormsModule 
]

This will include the services created.