Building Reuseable Shared Components in Angular

Reusable components are key to building scalable Angular applications. Whether you're showing product features, user profiles, or summaries, creating modular components will make your app easier to manage and extend.

Here are the practical steps to build a reusable card component, along with clean code examples.

---

Set Up the Angular Project

Start by installing Angular CLI and creating your project.

npm install -g @angular/cli
ng new reusable-card-app
cd reusable-card-app

---

Generate the Card Component

Create the card component with Angular CLI.

ng generate component card

This will create the boilerplate files inside src/app/card.

---

Define Component Logic with @Input()

Use @Input() to make the card flexible and customizable.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  @Input() title: string = '';
  @Input() content: string = '';
}

Now you can pass dynamic values into each card instance.

---

Create the HTML Template

Add basic structure to display card content.

<div class="card">
  <h2>{{ title }}</h2>
  <p>{{ content }}</p>
</div>

The card will now render any title and content passed to it.

---

Style the Card Component

Use simple styles to make the card visually appealing.

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin: 8px;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
}

.card h2 {
  margin-top: 0;
  font-size: 1.5em;
}

.card p {
  color: #555;
}

These styles give your card clean spacing and readability.

---

Create a Shared Module

Make the card reusable across modules by creating a shared module.

ng generate module shared

Update the shared.module.ts to export the card component.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CardComponent } from '../card/card.component';

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

This setup allows any module to use the card by importing SharedModule.

---

Import and Use the Shared Module

Update app.module.ts or any other feature module to use the shared card component.

import { SharedModule } from './shared/shared.module';

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

---

Render the Component with Data

Use the card in app.component.html like this:

<app-card title="Angular Card" content="This is a reusable card component."></app-card>
<app-card title="Another Card" content="You can reuse this component anywhere!"></app-card>

Then run the app:

ng serve

Visit http://localhost:4200 to view your cards.

---

Conclusion

This guide walked you through creating a reusable card component in Angular that can be shared across modules. A modular approach improves readability, encourages reuse, and reduces duplication. You can expand this with support for:

• Images
• Buttons
• Interactivity
• Responsive layout
• Themed styling

Reusable components help you build smarter and cleaner apps.