Shared modules for reusable components in Angular

Introduction

Shared modules help you keep common parts of your app in one place. This makes your code cleaner and easier to manage.

When you have buttons, forms, or other UI parts used in many places.

When you want to share pipes or directives across different features.

When you want to avoid repeating the same imports in many modules.

When you want to organize your app better by grouping reusable code.

When you want to make your app easier to update and maintain.

Syntax

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SomeComponent } from './some.component';

@NgModule({
  declarations: [SomeComponent],
  imports: [CommonModule],
  exports: [SomeComponent]
})
export class SharedModule {}

Use declarations to list components, directives, and pipes in this module.

Use exports to make these components available to other modules.

Examples

This shared module contains a reusable button component.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './button.component';

@NgModule({
  declarations: [ButtonComponent],
  imports: [CommonModule],
  exports: [ButtonComponent]
})
export class SharedModule {}

This shared module contains a directive to highlight text.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [HighlightDirective],
  imports: [CommonModule],
  exports: [HighlightDirective]
})
export class SharedModule {}

This shared module contains a pipe to format dates.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DateFormatPipe } from './date-format.pipe';

@NgModule({
  declarations: [DateFormatPipe],
  imports: [CommonModule],
  exports: [DateFormatPipe]
})
export class SharedModule {}

Sample Program

This example shows a shared module with a button component. The main app uses the shared button by importing SharedModule. The button appears inside the app's main page.

Angular

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-button',
  template: `<button>Click me!</button>`
})
export class ButtonComponent {}

@NgModule({
  declarations: [ButtonComponent],
  imports: [CommonModule],
  exports: [ButtonComponent]
})
export class SharedModule {}

@Component({
  selector: 'app-root',
  template: `<h1>Welcome</h1><app-button></app-button>`
})
export class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SharedModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Important Notes

Always export components, directives, or pipes you want to reuse outside the shared module.

Import CommonModule in shared modules to use common Angular directives like ngIf and ngFor.

Do not provide services in shared modules to avoid multiple instances; use core modules for services.

Summary

Shared modules group reusable components, directives, and pipes.

They help keep your app organized and avoid repeating code.

Import shared modules in feature modules to use their exported parts.