Angular 9/8 Feature and Root Modules by Example

Angular 9/8 Feature and Root Modules by Example

In this post we will give you information about Angular 9/8 Feature and Root Modules by Example. Hear we will give you detail about Angular 9/8 Feature and Root Modules by ExampleAnd how to use it also give you demo for it if it is necessary.

In this tutorial, we’ll learn about modules with an Angular 9 example.

What Are Angular Modules?

Angular modules are containers of code parts that implement related domain requirements. They let developers create apps with modular architectures and reusable code just like components. Angular uses NgModules to create modules and submodules which are different from JavaScript/ES6 modules.

What’s an NgModule

NgModules are simply TypeScript classes decorated with the @NgModule decorator imported from the @angular/core package.

Modules provide a way for developers to organize their code and they are particularly helpful for managing large apps.

Angular Built-In Modules

You can either create your own modules or use the built-in modules for importing the various Angular APIs such as:

  • [FormsModule]( for working with forms,
  • [HttpClientModule]( for sending HTTP requests,
  • and [RouterModule]( for providing routing mechanisms to your Angular application.

Each Angular module can contain components, directives, pipes and services and may be lazy loaded by the router.

You Angular application has at least one module which is called the root module. You need to bootstrap the root module to start your application.

Creating an Angular 9 Module by Example

Now, let’s create the admin CRUD interface for listing, creating, updating and deleting the portfolio projects.

Create an admin module with four components:

  • ProjectComponent,
  • ProjectListComponent,
  • ProjectCreateComponent,
  • ProjectUpdateComponent.

First, run the following command to create a module called admin:

$ ng g module admin 

This will create a src/app/admin/admin.module.ts file with the following content:


Next, run the following commands to create the components inside the admin module:

$ ng g c admin/project-list$ ng g c admin/project-create$ ng g c admin/project-update$ ng g c admin/project

This is the content of the src/app/admin/admin.module.ts file:


In the NgModule metadata, we specify:

  • The components, directives, and pipes that belong to the module. In our case, the four component that we created i.e ProjectListComponent, ProjectCreateComponent, ProjectUpdateComponent and ProjectComponent.
  • The components, directives, and pipes that we want to export. In our case, none.
  • The modules that we need to import in our current module. In our case CommonModule
  • The services that we need to use. In our case none.

CommonModule is a built in module that exports all the basic Angular directives and pipes, such as [NgIf](, [NgForOf](, [DecimalPipe](, etc.

Next we need to import the admin module in the main module. Open the src/app/app.module.ts file and update it accordingly:

// [...]import{AdminModule}from'./admin/admin.module';@NgModule({// [...]imports:[BrowserModule,AppRoutingModule,AdminModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

This is the main module of our application. In the imports array we added AdminModule. You can see two other arrays:

  • The providers array which can be used to include the services we want to provide to our components,
  • The bootstrap array which specifies the component(s) to bootstrap.

Check out all parts:

  • Angular 9/8 Tutorial Course: CLI, Components, Routing & Bootstrap 4,
  • Angular 9/8 Tutorial Course: Angular NgModules (Feature and Root Modules)
  • Angular 9/8 Tutorial Course: Nested Router-Outlet, Child Routes & forChild(),
  • Angular 9/8 Tutorial Course: Authentication with Firebase (Email & Password),
  • Angular 9/8 Tutorial Course: Securing the UI with Router Guards and UrlTree Parsed Routes


In this tutorial, you have grasped the concept of NgModules in Angular 9, you have created the admin submodule of your portfolio web application and the various components of the submodule which are needed to create a CRUD interface for creating and manipulating your portfolio’s projects.

In your next tutorial, you’ll be adding Angular routing in your admin module using a nested router outlet and child routes.

Hope this code and post will helped you for implement Angular 9/8 Feature and Root Modules by Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US