Angular 7 Modules

In this article we will learn about Angular 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 <strong>NgModule</strong>.

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:


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 { }

Table of Contents

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

declarations

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:


//import
import { AppComponent } from './app.component';
import { Test1Component } from './test1.component';
import { Test2Component } from './test2.component';


//declare
 declarations: [
      AppComponent,
      Test1Component,
      Test2Component
   ],

exports

The subset of declarations that should be visible and usable in the component templates of other NgModules.

You can export component as follows:


//import
import { AppComponent } from './app.component';
import { Test1Component } from './test1.component';
import { Test2Component } from './test2.component';


//export
 exports: [
      AppComponent,
      Test1Component,
      Test2Component
   ],

imports

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:


//import

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

//import imports: [ BrowserModule ],

providers

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:


//import
import { UserService } from './user.service';


//providers
 providers: [
      UserService
   ],

bootstrap

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.


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


//bootstrap
 bootstrap: [
      AppComponent
   ],

I hope you like this Angular Modules article!

Also Read :

Angular CRUD operation Example