Angular Project Structure: Shared Module

This post provides an overview of the SharedModule in Angular and guides you on its integration into your project structure. The SharedModule 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.ts
import { 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
  ]
})
export class SharedModule { }

2. Creating Components

Header Component

// src/app/shared/components/header/header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent { }

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

Footer Component

// src/app/shared/components/footer/footer.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html'
})
export class FooterComponent { }

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

3. Creating a Pipe

// src/app/shared/pipes/capitalize.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

4. Export Everything for Easier Imports

Index for Components

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

Index for Pipes

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

5. Using the Shared Module

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

// src/app/feature/feature.module.ts
import { 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
  ]
})
export class FeatureModule { }

// src/app/app.module.ts
import { 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]
})
export class AppModule { }

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

Blog