Brand

Angular Modules

Angular modules refer to a place where we can group the components, Pipes, services and directives which are needed for an application. We take the example of NgModule which is created as a default during our project creation.

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

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

@NgModule({
  declarations: [
    AppComponent,
    MyfirstcomponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Inorder to use the module we need to import it as below.

import { NgModule } from '@angular/core';
The structure is as shown below.
@NgModule({
  declarations: [
    AppComponent,
    MyfirstcomponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

It start with @NgModule and contains declaration, imports, provides and bootstrap

  • Declarations – reference to the components, directives and pipes are stored.
  • Imports – Modules needed for the components are declared here
  • Providers- services which are created are declared here, so that to accessed anywhere inside the app.
  • Bootstrap – Main application or the root component is declared here.
Previous
Next
Subscribe Now