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
Following are the properties for metadata object:
- declarations
- exports
- imports
- providers
- bootstrap
declarations
//import
import { AppComponent } from './app.component';
import { Test1Component } from './test1.component';
import { Test2Component } from './test2.component';
//declare
declarations: [
AppComponent,
Test1Component,
Test2Component
],
exports
//import
import { AppComponent } from './app.component';
import { Test1Component } from './test1.component';
import { Test2Component } from './test2.component';
//export
exports: [
AppComponent,
Test1Component,
Test2Component
],
imports
//import
import { BrowserModule } from '@angular/platform-browser';
//import imports: [ BrowserModule ],
providers
//import
import { UserService } from './user.service';
//providers
providers: [
UserService
],
bootstrap
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 7 Components With An Example
- Angular 7 Environment Setup
- Angular Percent Pipe Example
- Angular Decimal Pipe Example
- Angular Slice Pipe Example
- Angular Date Pipe Example
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms