Shared modules for reusable components in Angular - Step-by-Step Execution

Concept Flow - Shared modules for reusable components

Create Shared Module

↓

Declare Reusable Components

↓

Export Components

↓

Import Shared Module in Feature Modules

↓

Use Reusable Components in Templates

↓

App Runs

This flow shows how to create a shared module, declare and export reusable components, then import that module into feature modules to use those components.

Execution Sample

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

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

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

Defines a reusable button component inside a shared module that exports it for use in other modules.

Execution Table

Step	Action	Module/Component	Result	Notes
1	Create ButtonComponent	ButtonComponent	Component ready	Button with 'Click me' text created
2	Declare ButtonComponent in SharedModule	SharedModule	Component declared	SharedModule knows about ButtonComponent
3	Export ButtonComponent from SharedModule	SharedModule	Component exported	Other modules can use ButtonComponent
4	Import SharedModule in FeatureModule	FeatureModule	SharedModule imported	FeatureModule can use ButtonComponent
5	Use <app-button> in FeatureModule template	FeatureModule template	Button renders	ButtonComponent appears in UI
6	App runs	App	Button visible and usable	Reusable component works across modules

💡 All steps complete, reusable component shared successfully

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
ButtonComponent	undefined	Defined	Declared in SharedModule	Exported from SharedModule	Available in FeatureModule	Used in template	Rendered in UI
SharedModule	undefined	undefined	Declared with ButtonComponent	Exports ButtonComponent	Imported in FeatureModule	Enables usage	Active in app

Key Moments - 3 Insights

Why do we export components from the shared module?

Exporting components from the shared module makes them available to other modules that import this shared module, as shown in execution_table step 3.

Can we use a component declared in a shared module without importing that module?

No, other modules must import the shared module to use its exported components, as shown in execution_table step 4.

Why do we import CommonModule in the shared module?

CommonModule provides common Angular directives like *ngIf and *ngFor, which reusable components often need, as shown in the execution_sample code.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the ButtonComponent made available to other modules?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Result' column for when the component is exported.

According to variable_tracker, what is the state of SharedModule after step 4?

A Exported ButtonComponent

B Imported in FeatureModule

C Declared with ButtonComponent

D Used in template

💡 Hint

Look at the 'SharedModule' row under 'After Step 4'.

If we forget to export ButtonComponent from SharedModule, what happens when FeatureModule tries to use it?

A ButtonComponent renders normally

B ButtonComponent renders but without styles

C FeatureModule throws an error about unknown component

D App compiles but ButtonComponent is hidden

💡 Hint

Refer to key_moments about exporting components and module imports.

Concept Snapshot

Shared modules group reusable components.
Declare components inside shared module.
Export them to make available outside.
Import shared module in feature modules.
Use components in templates anywhere imported.
This avoids repeating code and keeps app clean.

Full Transcript

This lesson shows how to create a shared module in Angular to hold reusable components. First, we define a component like ButtonComponent. Then we declare it inside a SharedModule and export it. Other feature modules import this SharedModule to use the ButtonComponent in their templates. The execution table traces each step from creation to usage. The variable tracker shows how ButtonComponent and SharedModule states change. Key moments clarify why exporting and importing are necessary. The quiz tests understanding of when components become available and what happens if exports are missing. The snapshot summarizes the process simply. This helps beginners see how Angular shares components cleanly across modules.