Angular Project Structure: Shared Module
Tags: webdev, beginners, angular, structure
Published: 2024-05-15 14:00:34

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:
``` bash
/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.
``` typescript
// 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
``` typescript
// src/app/shared/components/header/header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent { }
```
```html
<!-- src/app/shared/components/header/header.component.html -->
<header>
  <h1>Header Component</h1>
</header>
```
- Footer Component
```typescript
// src/app/shared/components/footer/footer.component.ts
import { Component } from '@angular/core';

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

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

```

#### 3. Creating a Pipe
```typescript
// 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
```typescript
// src/app/shared/components/index.ts
export * from './header/header.component';
export * from './footer/footer.component';
```
- Index for Pipes
```typescript
// 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.
```typescript
// 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 { }
```
```typescript
// 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!