Posted onMay 15, 2024

Angular Project Structure: Shared Module

#webdev #beginners #angular #structure

This post provides an overview of theSharedModule in Angular and guides you on its integration into your project structure. TheSharedModule is designed to hold reusable components, pipes, and other utilities that can be shared across multiple modules in your application.

The module might contain:

-Components: Reusable UI components such as headers, footers, buttons, and dialogs.
-Pipes: Custom pipes for formatting and transforming data.
-Directives: Custom directives for reusable behaviors.
-Services: Utilities and helper services that can be used throughout the project.

Shared Module Structure

Here's an example structure for the Shared Module:

/my-angular-project|-- src|   |-- app|   |   |-- shared|   |   |   |-- shared.module.ts|   |   |   |-- components|   |   |   |   |-- header|   |   |   |   |   |-- header.component.ts|   |   |   |   |   |-- header.component.html|   |   |   |   |-- footer|   |   |   |       |-- footer.component.ts|   |   |   |       |-- footer.component.html|   |   |   |-- pipes|   |   |       |-- capitalize.pipe.ts|   |   |

Shared Module Implementation

1. Creating the Shared Module

Create a shared.module.ts file inside the shared directory.

// src/app/shared/shared.module.tsimport{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{HeaderComponent}from'./components/header/header.component';import{FooterComponent}from'./components/footer/footer.component';import{CapitalizePipe}from'./pipes/capitalize.pipe';@NgModule({declarations:[HeaderComponent,FooterComponent,CapitalizePipe],imports:[CommonModule],exports:[HeaderComponent,FooterComponent,CapitalizePipe]})exportclassSharedModule{}

2. Creating Components

Header Component

// src/app/shared/components/header/header.component.tsimport{Component}from'@angular/core';@Component({selector:'app-header',templateUrl:'./header.component.html'})exportclassHeaderComponent{}

<!-- src/app/shared/components/header/header.component.html --><header><h1>Header Component</h1></header>

Footer Component

// src/app/shared/components/footer/footer.component.tsimport{Component}from'@angular/core';@Component({selector:'app-footer',templateUrl:'./footer.component.html'})exportclassFooterComponent{}

<!-- src/app/shared/components/footer/footer.component.html --><footer><p>Footer Component</p></footer>

3. Creating a Pipe

// src/app/shared/pipes/capitalize.pipe.tsimport{Pipe,PipeTransform}from'@angular/core';@Pipe({name:'capitalize'})exportclassCapitalizePipeimplementsPipeTransform{transform(value:string):string{returnvalue.charAt(0).toUpperCase()+value.slice(1);}}

4. Export Everything for Easier Imports

Index for Components

// src/app/shared/components/index.tsexport*from'./header/header.component';export*from'./footer/footer.component';

Index for Pipes

// src/app/shared/pipes/index.tsexport*from'./capitalize.pipe';

5. Using the Shared Module

Finally, import theSharedModule into other modules where you want to use the shared components and pipes.

// src/app/feature/feature.module.tsimport{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{SharedModule}from'../shared/shared.module';import{FeatureComponent}from'./feature.component';@NgModule({declarations:[FeatureComponent],imports:[CommonModule,SharedModule]})exportclassFeatureModule{}

// src/app/app.module.tsimport{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{AppComponent}from'./app.component';import{SharedModule}from'./shared/shared.module';import{FeatureModule}from'./feature/feature.module';@NgModule({declarations:[AppComponent],imports:[BrowserModule,SharedModule,FeatureModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}

This is a short intro to theSharedModule for your Angular project. In the next post, we will talk about creating and structuringFeaturesModule. Happy coding!