The Featured Module For Angular

Introduction

We will talk about “Featured Modules,” the most significant feature of the Angular Framework, in this post. Professionals, intermediates, and beginners can all access this material.

We will cover,

1. What precisely is a featured module?
2. Why is a Featured module necessary?
3. Featured module types?
4. Benefits of the Featured module.
5. How may a featured module be made?

Prerequisites

basic familiarity with Angular Modules.

Featured Module

The most crucial component of an Angular application is a module.

Components, directives, services, and pipelines are organised into modules.

The root module of the Angular Application is the app.module.ts module.

We automatically add the root module whenever we start a new application.

Let’s look at the graphic below to better grasp the issue.

Imagine that we have a sizable angular application that contains thousands of components, directives, services, pipes, etc., all of which are kept up to date in the Root module (“app.module.ts”). The Root module would therefore become extremely complicated and unmaintainable.

What steps will you take to address this issue? You will separate and divide the root module into smaller modules, correct? Therefore, in Angular, the distinct little module is referred to as a “Featured module.”

The illustration below can help you better comprehend.

We have isolated “module1,” “module2,” and “module3” from the Root module in the picture up above. Content elements that make up each module. Example: Component1 is in Module1.

Now that we have a fundamental understanding of the featured module, let’s look at the many varieties that are offered by angular applications.

Types of Featured Modules

1. Domain -It’s based on the application navigation, such as the customer features modules or the Emp.
2. Routed – All modules that loaded slowly.
3. Routing – Routing and its associated features, such as Route guard.
4. Service – This relates to the request-response cycle for APIs.
5. Widget – Modules that relate to widgets and may include directives, pipes, utilities, etc.

Before we give an example of a featured module, let’s talk about a few key benefits.

Benefits of Featured Module

1. Code Maintainability
2. Scalability
3. Lazy Loading
4. Abstraction
5. Code separation

Now that we have learned about feature modules, we will build a new angular application.

Step 1

Make a new “ProductDemo” Angular application.

ng new "FeaturedDemo"

Step 2

Add the “ProductModule” and “PriceModule” components from two modules.

ng g m "Product\Product.module"

The command above will create a product module and folder.

We are currently creating a new pricing module. For the same, we’ll use the command below.

ng g m price\price

There will be a price folder and pricing module generated.

Step 3

We will now add two elements to the product and pricing.

ng g c product\product

Components for products will be produced. We’ll now build the pricing component.

ng g c price\price

The price folder will be created, and a price component will be added.

 

Step 4 In the app.module.ts file, configure “ProductModule” and “PriceModule.”

The app.module.ts file will now be configured with the newly inserted modules.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PriceModule } from './price/price/price.module';
import { ProductModule } from './product/product/product.module';

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

“ProductModule” and “PriceModule” have been added to the imports array and imported references have been added to the app.module.ts file.

Although other modules contain “CommonModule” for shared capabilities, only the app.module.ts file has “BrowserModule.”

Step 5

Watch “ProductModule” and “PriceModule,” shall we?

Product Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductComponent } from './product.component';

@NgModule({
  declarations: [
    ProductComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[ProductComponent]
})
export class ProductModule { }

To export the component, we must export ProductComponent. The exports array need more elements to be added.

Price Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PriceComponent } from './price.component';


@NgModule({
  declarations: [
    PriceComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[PriceComponent]
})
export class PriceModule { }

Step 6

In the file “app.component.html,” add the following code.

<router-outlet></router-outlet>
<app-price></app-price>
<app-product></app-product>

We will now run the Angular application and examine the outcomes.

This concludes the article. I do hope you liked it.