Angular 9/8 Feature and Root Modules by Example

Angular 9/8 Feature and Root Modules by Example

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](https://angular.io/api/forms/FormsModule) for working with forms,
  • [HttpClientModule](https://angular.io/api/common/http/HttpClientModule) for sending HTTP requests,
  • and [RouterModule](https://angular.io/api/router/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:

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

@NgModule({
declarations: [],
imports: [
    CommonModule
]
})
export  class  AdminModule { }

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:

import { NgModule } from  '@angular/core';
import { CommonModule } from  '@angular/common';
import { ProjectListComponent } from  './project-list/project-list.component';
import { ProjectCreateComponent } from  './project-create/project-create.component';
import { ProjectUpdateComponent } from  './project-update/project-update.component';
import { ProjectComponent } from  './project/project.component';

@NgModule({
declarations: [ProjectListComponent, ProjectCreateComponent, ProjectUpdateComponent, ProjectComponent],
imports: [
CommonModule
]
})
export  class  AdminModule { }

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](https://angular.io/api/common/NgIf), [NgForOf](https://angular.io/api/common/NgForOf), [DecimalPipe](https://angular.io/api/common/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]
})
export  class  AppModule { }

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:

Conclusion

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.



Angular 9 Components: Input and Output
Angular 13 selectors
Picture-in-Picture with JavaScript and Angular 10
Jasmine Unit Testing for Angular 12
Angular 9 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient
Angular 10/9 Elements Tutorial by Example: Building Web Components
Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example
Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes
Angular 10/9 JWT Authentication Tutorial with Example
Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives
Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData
Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef
Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App
Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects
Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit
Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events
Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database
Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9
Install Angular 10 CLI with NPM and Create a New Example App with Routing
Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes
Angular 10/9 Tutorial and Example: Build your First Angular App
Angular 9/8 ngIf Tutorial & Example
Angular 10 New Features
Create New Angular 9 Workspace and Application: Using Build and Serve
Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support
HTML5 Download Attribute with TypeScript and Angular 9
Angular 9.1+ Local Direction Query API: getLocaleDirection Example
Angular 9.1 displayBlock CLI Component Generator Option by Example
Angular 9 Basics Tutorial by Example
Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8
Angular 9/8 DOM Queries: ViewChild and ViewChildren Example
The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example
Angular 9/8 Nested Routing and Child Routes by Example
Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
Angular 9/8 Tutorial: Http POST to Node/Express.js Example
Angular 9/8 Feature and Root Modules by Example
Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms
Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial
Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example
Angular 9 Web Components: Custom Elements & Shadow DOM
Angular 9 Renderer2 with Directives Tutorial by Example
Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example
Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial
Multiple File Upload with Angular 9 FormData and PHP by Example
Angular 9/8 Reactive Forms with Validation Tutorial by Example
Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit)
Angular 9/8 JAMStack By Example
Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data
Build an Angular 9/8 CRUD Example & Tutorial
Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Angular 8/7 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor)

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!