Shared modules for reusable components in Angular - Mini Project: Build & Apply

Shared modules for reusable components

📖 Scenario: You are building an Angular app with multiple pages. You want to reuse a button component across these pages without rewriting it each time.

🎯 Goal: Create a shared Angular module that contains a reusable button component. Then import this shared module into another component to use the button.

📋 What You'll Learn

Create a standalone button component with a template showing a button with text 'Click me'

Create a shared Angular module named SharedModule that declares and exports the button component

Import SharedModule into a new standalone component named HomeComponent

Use the button component selector inside HomeComponent's template

💡 Why This Matters

🌍 Real World

Shared modules help organize reusable UI parts like buttons, cards, or forms in large Angular apps, making code easier to maintain and reuse.

💼 Career

Understanding shared modules and reusable components is essential for Angular developers working on scalable, maintainable enterprise applications.

1

Create a standalone button component

Create a standalone Angular component named ButtonComponent with selector app-button. Its template should contain a <button> element with the text Click me. Use the @Component decorator with standalone: true.

Angular

# Your code here to create ButtonComponent as a standalone component with selector 'app-button' and template 'Click me'

Need a hint?

Use @Component with standalone: true and define the selector and template exactly as instructed.

2

Create a shared module exporting the button component

Create an Angular module named SharedModule using @NgModule. It should declare and export ButtonComponent. Import ButtonComponent in this module file. The module should NOT be standalone.

Angular

import { NgModule } from '@angular/core';
// Your code here to create SharedModule that declares and exports ButtonComponent

Need a hint?

Use @NgModule with declarations and exports arrays including ButtonComponent.

3

Create a standalone HomeComponent importing SharedModule

Create a standalone Angular component named HomeComponent with selector app-home. Import SharedModule in its imports array. The template should contain the <app-button> element to use the button component.

Angular

import { Component } from '@angular/core';
import { SharedModule } from './shared.module';

// Your code here to create HomeComponent as standalone with selector 'app-home', import SharedModule, and template using 

Need a hint?

Use @Component with standalone: true, import SharedModule, and include <app-button> in the template.

4

Use HomeComponent in your app

Add <app-home> to your main app component template or bootstrap HomeComponent in your Angular app to display the reusable button.

Angular

// Your code here to add  in main app template or bootstrap HomeComponent

Need a hint?

Use bootstrapApplication(HomeComponent) to start the app with HomeComponent showing the reusable button.