Angular - Shared Module

This Angular tutorial chapter will cover the Shared Module, including how to create it, how to use it, and its advantages and disadvantages.

Shared Module in Angular

In Angular, the Shared Module is a custom module designed or created by the developer based on the requirements of the application. The Shared module allows developers to access its components, directives, pipes, etc., throughout the application.

A Module itself is not a shared module until it is properly exported and imported into other modules where its components are needed.

Creating a Shared Module

Creating a shared module allows you to organize and simplify your code, reducing the redundancy of repeating the same things within the same application.

Use the following command to create a module in your Angular application, and this module will be used as a shared module in the application. We import export this module within the other module where it's component are needed.

Step 1: Open the project

Open your application in any code editor (such as VS code).

Step 2: Navigate to the Application Directory

Open the code editor terminal and navigate to your application directory as follows:

 cd your_application_directory e.g. cd myapp 

Step 3: Create a new module (i.e., consider it a shared module) named Shared as follows:

 ng generate module shared 

Once the above command is executed successfully, you should be able to see the shared folder. Within this folder, there will be a file named shared.module.ts with a default code:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 

How to Use Shared Module?

To use the Shared Module in our Angular application, the first step is to import it into our root module, which is named AppModule in our application.

Step 1: Open the app.module.ts file and import the shared module as follows:

 import { NgModule } from '@angular/core'; import { BrowserModule, provideClientHydration } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { SharedModule } from './shared/shared.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, SharedModule ], providers: [ provideClientHydration() ], bootstrap: [AppComponent] }) export class AppModule { } 

We have already created a shared module in our Angular application and imported it into the AppModule (i.e., root module). Now, let's create two components within the Shared Module to use throughout the entire application.

Step 2: Create a Header Component

Create a new component, Header within the shared module as follows:

 ng generate component shared/header 

Step 3: Open the header.component.ts file and place the below code:

 <h2>This his Header</h2> <p>A component from Shared Module</p> 

Step 4: Create another component, Footer.

Create one more component, Footer within the shared module as follows:

 ng generate component shared/footer 

Step 5: Open the footer.component.ts file and place the below code:

 <h2>This his Footer</h2> <p>A component from Shared Module</p> 

Step 6: Update the Shared Module

To use the "components" of the Shared Module outside of this module, you need to export the Header and Footer components in the shared.module.ts file as follows:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HeaderComponent } from './header/header.component'; import { FooterComponent } from './footer/footer.component'; @NgModule({ declarations: [ HeaderComponent, FooterComponent ], imports: [ CommonModule ], exports: [HeaderComponent, FooterComponent] }) export class SharedModule { } 

Step 7: Update AppComponent

Open the app.component.html and place the code below:

 <app-header></app-header> <hr> <p>This is the loaded area</p> <hr> <app-footer></app-footer> 

Step 8: Run the application using the following command:

 ng serve 

Step 9: Open your friendly browser (chrome) and navigate to localhost:4200:

Advantages of Shared Module

The following is a list of the advantages of the Shared Modules:

• It increases application performance by using "reusable" components, directives, etc.
• Organizes the application, streamlining the code.
• Increases application modularity.
• Decreases redundancy.

Conclusion

In conclusion, observing the above output should provide you with a complete understanding of how the Shared Modules operates. By sharing this module, we can use its "components", "directives", and "pipes" across the entire application rather than creating them multiple times within the same application.