Angular 6 Modules

Angular 6 Modules

Module in Angular refers to a position where you may combine the components, directives, pipes, and services, which are relevant to the application.

In case you are creating a website, the header, footer, left, middle and the right section are part of a page.

To describe framework, we will use the NgModule. Once you build a new project using the Angular -cli command, the ngmodule is generated in the app.module.ts file by default and it looks as follows –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

The NgModule needs to be imported as follows −

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

The structure for the ngmodule is as shown below −

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

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

Declaration

It is an array of components produced. If any new component gets developed, it will be imported first and the relation will be included in declarations as seen below –

declarations: [
   AppComponent,
   NewCmpComponent
]

Import

This is an array of appropriate modules to be included in the application. The components in the Declaration list may also do this. For eg, we see the imported Browser Module right now in the @NgModule. If your framework requires form, the module may be used as follows –

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

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

imports: 
[
BrowserModule,
FormsModule
]