module example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new module-example-in-angular --style=scss --routing --skip-install

cd module-example-in-angular

npm install

Open project in visual studio code.

Go to App folder then right click on app folder click on Generate Module like below image.

• Then enter module name as below image. in my case "admin" is module name.

• Then click on enter. it will create admin module (admin folder, admin.module.ts file and other files) as below image.
  

• Now create Home, Dashboard and User components in Admin module. Created components we can see like below image in admin folder.
  
• Home, Dashboard and User components are imported into Admin.module.ts file like below code. if we want to use Admin module components (like Home, Dashboard, User) in other modules like App.module.ts we need to export those components from admin module like below code. in below code we are exporting Home and Dashboard components  to outside modules.

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { AdminComponent } from './admin.component';

import {DashboardComponent} from './dashboard/dashboard.component'

import {HomeComponent} from './home/home.component'

import {UserComponent} from './user/user.component'

@NgModule({

  declarations: [

    AdminComponent,

    DashboardComponent,

    HomeComponent,

    UserComponent

 ],

  imports: [

    CommonModule

  ],

  exports:[

    DashboardComponent,

    HomeComponent

  ]

})

export class AdminModule { }

• In below code we can see how to import admin module in app module.

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

import { NgModule } from '@angular/core';

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

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

import { LoginComponent } from './login/login.component';

import{AdminModule} from './admin/admin.module';

@NgModule({

   declarations: [

      AppComponent,

      LoginComponent

   ],

   imports: [

      BrowserModule,

      AppRoutingModule,

      AdminModule

   ],

   exports: [],

   providers: [],

   bootstrap: [

      AppComponent

   ]

})

export class AppModule { }

• Now we can use Dashboard, Home components in app.components.html like below code, but user component not possible to use. reason we didn't exported user component in admin.module.ts. 

<h1>module example in angular</h1>

<app-dashboard></app-dashboard>

<app-home></app-home>

Output:

Angular Module

         
   In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application.In case you are developing a shopping  website Admin, User, Employee, Guest and Service provider become part of a module.

To define module, we can use the NgModule. When you create a new project using the Angular CLI command, the ngmodule is created in the app.module.ts file by default and it looks as follows.

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

import { NgModule } from '@angular/core';

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

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

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Declaration:
Declaration is one part in Module. It is an array of components created by user. If any new component gets created by user, it will be imported first and the reference will be included in declarations as shown below

  declarations: [

    AppComponent

  ]

Imports:
Imports is one part in Module. it is an array of modules required to be used in the application. It can also be used by the components in the Declaration array. For example, right now in the @NgModule we see the Browser Module and AppRouting Module imported. it will look like below.

  imports: [

    BrowserModule,

    AppRoutingModule

  ]

Providers:
This will include the services created.

Bootstrap:
This includes the main app component for starting the execution. it will look like below. in below code AppComponent is the starting componet for this module.

  bootstrap: [AppComponent]