Creating Reusable and Dynamic Angular Components

In modern web development, reusability and dynamic behavior are key factors in building scalable applications. Angular provides a powerful framework for creating reusable and dynamic components that streamline development and enhance maintainability. This article explores best practices, strategies, and step-by-step approaches for building reusable and dynamic Angular components effectively.

Understanding Reusable Components

A reusable component in Angular is a self-contained, independent unit that can be used across multiple parts of an application. Reusable components:

• Reduce code duplication
• Improve maintainability
• Enhance modularity and scalability

To create reusable components, developers must focus on proper encapsulation, input properties, and output event bindings.

Key Principles of Reusability

1. Single Responsibility Principle (SRP): Each component should have a well-defined purpose and should not perform multiple responsibilities.
2. Configurable Behavior: Use @Input() and @Output() to make components configurable and customizable.
3. Encapsulation: Use Angular’s ViewEncapsulation and styles to avoid conflicts with other components.
4. Flexible Rendering: Implement content projection using <ng-content> to allow dynamic content insertion.

Steps to Build a Reusable Angular Component

1. Define the Component

Create a component using Angular CLI:

ng generate component reusable-button

2. Use @Input() for Customization

Input properties allow passing dynamic data to components.

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

@Component({
  selector: 'app-reusable-button',
  template: `<button [ngClass]="btnClass" (click)="onClick()">{{ label }}</button>`
})
export class ReusableButtonComponent {
  @Input() label: string = 'Click Me';
  @Input() btnClass: string = 'btn-primary';
  
  onClick() {
    console.log('Button clicked!');
  }
}

3. Use @Output() for Event Handling

Output properties enable event emission from the component.

import { Output, EventEmitter } from '@angular/core';

@Output() buttonClick = new EventEmitter<void>();

onClick() {
  this.buttonClick.emit();
}

4. Leverage Content Projection

Content projection allows embedding custom content inside a reusable component using <ng-content>.

<ng-content></ng-content>

Example Usage:

<app-reusable-button>
  <span>Custom Button Content</span>
</app-reusable-button>

5. Implement Dynamic Behavior with @ViewChild

Use @ViewChild() to manipulate child components dynamically.

import { ViewChild, AfterViewInit } from '@angular/core';

@ViewChild(ReusableButtonComponent) button!: ReusableButtonComponent;

ngAfterViewInit() {
  console.log(this.button.label);
}

Advanced Techniques

1. Dependency Injection in Reusable Components

Use services to make components loosely coupled and more reusable.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ButtonService {
  getLabel() {
    return 'Service Button';
  }
}

Inject the service inside the component:

constructor(private buttonService: ButtonService) {
  this.label = this.buttonService.getLabel();
}

2. Dynamic Components with ComponentFactoryResolver

Dynamic components allow rendering different UI elements at runtime.

import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

constructor(private resolver: ComponentFactoryResolver, private vcr: ViewContainerRef) {}

loadComponent() {
  const factory = this.resolver.resolveComponentFactory(ReusableButtonComponent);
  this.vcr.createComponent(factory);
}

Best Practices

• Keep components small and focused.
• Use interfaces for strong typing.
• Avoid direct DOM manipulations.
• Use change detection strategies for performance optimization.

Conclusion

Building reusable and dynamic components in Angular enhances productivity, maintainability, and scalability. By leveraging key features such as @Input(), @Output(), content projection, dependency injection, and dynamic component loading, developers can create powerful and flexible UI components for modern web applications.

Sandip Mhaske

Senior Engineer • Author of 1419 guides • Follow for System Design & .NET deep-dives

About

Content Projection

<ng-content> projects parent content into a child component. Use the select attribute for named slots, which is the backbone of layout and card components that need flexible bodies.

Dynamic Component Creation

Use createComponent (or ComponentFactoryResolver in older versions) to instantiate components at runtime. This powers modals, dashboards, and plugin-style UIs. Always destroy the component reference to avoid memory leaks.

Signals and Reactivity

Angular signals provide fine-grained reactivity without zone.js. Use computed for derived state and effect for side effects, keeping components declarative and fast.