Angular 13 NgModule Tutorial with Example

In Angular, what is NgModule? If you’re seeking for a quick definition of the Angular 12 Module, we may state that NgModule is a decorator that groups all of your Angular application’s services, pipelines, directives, and components.

Using the example of website development, we can say that a module will contain the footer, header, right section, centre section, and left section.

You can define a module with NgModule. When you use the Angular CLI command to create a new project, NgModule is generated by default in the app.module.ts file. And it looks like this:

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';  // NgModule Angular service
import  AppComponent  from './app.component';
import  NewComponentComponent  from './new-component/new-component.component';
@NgModule(   // NgModule decorator groups services, components, pipes and directives
  declarations: [
    AppComponent,
    NewComponentComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule

As shown in the sample below, you must import NgModule.

import  NgModule  from '@angular/core';

Take a look at the structure of the NgModule below

@NgModule(
  declarations: [ // Angular CLI registers components in the declarations array by default
    AppComponent,
    NewComponentComponent
  ],
  imports: [   // Register all the modules in the imports array
    BrowserModule
  ],
  providers: [],  // To make your service globally available register in the providers array
  bootstrap: [AppComponent]
)

It all starts with @NgModule. It also has an object with bootstrap, providers, imports, and declarations in it.

Declaration

A declaration is a collection of components in basic language. Whenever you use the Angular CLI to create a new component. By default, Angular CLI adds the newly generated component to the declarations array.

Get CodeSolutionStuff’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Declarations will include a reference to this component, as explained below.

declarations: [
    AppComponent,
    NewComponent
  ]

Imports

The Imports array in an Angular application is a collection of modules that are required to run the application. We can further explain it using an example. The @NgModule Browser Module has already been imported, as you can see.

If the application requires reactive forms and router service, you can include the module as shown below.

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  ReactiveFormsModule  from "@angular/forms";
import  RouterModule  from "@angular/router";
@NgModule(
  declarations: [],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)

Providers

If you wish to make your app’s services globally available, declare custom services in the providers’ array.

The following are the services that will be provided.

import  NgModule  from '@angular/core';
import  CartService  from './cart.service';
@NgModule(
  providers: [CartService],
)
export class UserModule

Bootstrap

For the main app to start running, an angular Bootstrap array is necessary.

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

Visit angular.io to learn more about Angular and its features.

I hope you will like the content and it will help you to learn Angular 13 NgModule Tutorial with Example
If you like this content, do share.

Angular 13 NgModule Tutorial with Example - CodeSolutionStuff

Learn Full Stack Development — CodeSolutionStuff