Angular 7 Modules

Angular 7 Modules

The app build using Angular are modular. Angular has a feature that will provide a way to create a module.

Angular has a modularity system called NgModule.

Angular Module is nothing but the container where we can group a set of components, services, pipe and directives which refer to that module.

It can import functionality that is exported by other NgModule and  can also export the functionality for use by other modules.

Every angular app has at least one root module which is named as app.module.ts.

While a small application might have only one NgModule, most apps have many more feature modules. The root NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth.

To create a module we can use angular decorator @NgModule as follows:

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

NgModule Metadata

The NgModule decorator is a function which take a metadata object, whose properties describe the module.

Following are the properties for metadata object:

  • declarations
  • exports
  • imports
  • providers
  • bootstrap


It is an array which contains a list of components, pipes,directives that belongs to that module.
You can import and declare other components as follows:

<br />//import<br />import { AppComponent } from './app.component';<br />import { Test1Component } from './test1.component';<br />import { Test2Component } from './test2.component';<br /><br /><br />//declare<br /> declarations: [<br />      AppComponent,<br />      Test1Component,<br />      Test2Component<br />   ],<br />


The subset of declarations that should be visible and usable in the component templates of other NgModules.
You can export component as follows:

<br />//import<br />import { AppComponent } from './app.component';<br />import { Test1Component } from './test1.component';<br />import { Test2Component } from './test2.component';<br /><br /><br />//export<br /> exports: [<br />      AppComponent,<br />      Test1Component,<br />      Test2Component<br />   ],<br />


It is an array of modules which are exported by other modules and whose components are need by the component template of this module.
You can import the module as follows:

<br />//import<br /><pre><code>import { BrowserModule } from '@angular/platform-browser';

//import imports: [ BrowserModule ],


A list of dependency-injection providers.
Angular registers these providers with the NgModule’s injector. If it is the NgModule used for bootstrapping then it is the root injector.
These services become available for injection into any component, directive, pipe or service which is a child of this injector.
You can use it as follows:

<br />//import<br />import { UserService } from './user.service';<br /><br /><br />//providers<br /> providers: [<br />      UserService<br />   ],<br />


A list of components that are automatically bootstrapped.

Usually there’s only one component in this list, the root component of the application.

Angular can launch with multiple bootstrap components, each with its own location in the host web page.

A bootstrap component is automatically added to entryComponents.

<br />//import<br />import { AppComponent } from './app.component';<br /><br /><br />//bootstrap<br /> bootstrap: [<br />      AppComponent<br />   ],<br />

I hope you like this article!
Also Read:

Leave a Comment