Angular NgModule Metadata Properties

Introduction to Angular NgModule Metadata Properties

An NgModule is a class marked by the @NgModule decorator. @NgModule identifies the module’s own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.

The @NgModule takes a metadata object that tells Angular how to compile and launch the application

The NgModule’s important metadata properties are as follows :

Metadata of NgModules:

imports :  A list of modules and it used to import the supporting modules like FormsModule, RouterModule, CommonModule, or any other custom made feature module

declarations : specify the components, directives and pipes that belong to the module.

exports : A subset of declarations that will be visible  and usable in the other modules. A root module doesn’t have export option.

bootstrap :  specify main application view, called the root component, which hosts all other app views. Only the root NgModule should set this bootstrap property.

providers : Specify the services, accessible  across  the app

An example of NgModule would look like below:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

  declarations: [
  imports: [
  exports:[ AppComponent ],
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Angular Built In Modules :

Angular has build in library modules starting with the @angular as prefix

  • @angular/core
  • @angular/router
  • @angular/forms
  • @angular/http

Built-In library and third party module can be installed using npm namager

Built-In modules, components, services, directives etc. can be imported by using built-in library modules.

Leave a Reply

Your email address will not be published.