DEV Community

Cover image for Angular Project Structure: Shared Module
Simi Lika
Simi Lika

Posted on

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
|   |   |
Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode
<!-- src/app/shared/components/header/header.component.html -->
<header>
  <h1>Header Component</h1>
</header>
Enter fullscreen mode Exit fullscreen mode
  • 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 { }

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

Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode
  • Index for Pipes
// src/app/shared/pipes/index.ts
export * from './capitalize.pipe';
Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode
// 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 { }
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)