Why Shared modules for reusable components in Angular? - Purpose & Use Cases

The Big Idea

What if fixing one button could fix it everywhere in your app instantly?

The Scenario

Imagine building several pages in an app, and you copy-paste the same buttons, forms, or headers everywhere.

When you want to change a button style or fix a bug, you must update every copy manually.

The Problem

Copy-pasting components leads to inconsistent updates and bugs.

It wastes time and makes your code messy and hard to maintain.

The Solution

Shared modules let you put common components in one place.

Then you can reuse them easily across your app, updating once to fix or improve everywhere.

Before vs After

✗ Before

import { ButtonComponent } from './button'; // copied in many places
@Component({ imports: [ButtonComponent, ButtonComponent, ButtonComponent] })

✓ After

import { SharedModule } from './shared.module';
@NgModule({ imports: [SharedModule] })

What It Enables

You can build apps faster with consistent, easy-to-update components everywhere.

Real Life Example

A company app uses a shared header and footer module so all pages look the same and update instantly when the design changes.

Key Takeaways

Copy-pasting components causes bugs and wastes time.

Shared modules group reusable components in one place.

Updating shared modules updates all uses automatically.