Why Declarations, imports, and exports in Angular? - Purpose & Use Cases

The Big Idea

Discover how Angular's smart sharing system saves you from endless manual wiring and confusion!

The Scenario

Imagine building a big house where every room needs to know about the furniture and tools in other rooms, but you have to carry each item by hand every time you want to use it somewhere else.

The Problem

Manually managing which parts of your app can use which features is like carrying furniture room to room--it's slow, confusing, and easy to lose things or break stuff.

The Solution

Angular's declarations, imports, and exports let you organize your app like a smart house with rooms that share furniture automatically, so everything is in the right place and ready to use without extra effort.

Before vs After

✗ Before

const feature = require('./feature');
app.use(feature);

✓ After

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

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

What It Enables

This system makes your app easy to build, understand, and grow by clearly sharing and reusing parts without confusion or mistakes.

Real Life Example

Think of a kitchen module that declares a stove and exports it so the dining room module can import and use the stove without rebuilding or copying it.

Key Takeaways

Declarations tell Angular what components belong to a module.

Imports bring in features from other modules to use inside your module.

Exports share your module's features so other modules can use them easily.