📘 ng-api-helper — User Guide

🚀 Overview

ng-api-helper is a lightweight Angular CLI tool designed to generate reusable helper files that simplify API calls and subscription management. It provides two essential utilities:

✅ DestroyableComponent

A base component class that automatically manages subscription cleanup using Angular’s lifecycle.
👉 To use loadApi, your component must extend DestroyableComponent.

✅ loadApi

A helper function that wraps any API call and handles the entire lifecycle: success callback, error handling, finalize logic, and automatic cleanup when the component is destroyed.
This removes repetitive boilerplate and promotes cleaner, more maintainable Angular code.

📦 Installation & Usage

1️⃣ Install globally

npm install ng-api-helper

2️⃣ Generate helper files Run the CLI inside your Angular project:

ng-api-helper

This will create the following files:

destroyable-component.ts

api-call-helper.ts

These files are immediately ready to use.

🧱 Component Requirement

To use loadApi, your component must extend the generated DestroyableComponent:

import { DestroyableComponent } from './destroyable-component';

export class MyComponent extends DestroyableComponent {
  constructor() {
    super();
  }
  // your logic here
}

This ensures automatic subscription cleanup without manually unsubscribing.

🎯 Example: Dynamic API Call Using loadApi

loadItems() {
  this.loading = true;

  loadApi(
    // Any API call (replace with your own Observable)
    this.myService.getItems(),
    this.destroy$,

    // SUCCESS
    (response) => {
      this.items = response;

      if (this.dataSource) {
        this.dataSource.data = response;
      }
    },

    // ERROR
    (error) => { this.notificationService.showError(error); },

    // FINALIZE
    () => { this.loading = false; }
  );
}

🎉 Benefits

No manual unsubscribe needed

Clean and consistent API handling

Centralized success, error, and finalize logic

Automatic memory leak prevention

Scales perfectly for medium and large Angular applications

🔖 Notes

Always extend DestroyableComponent when using loadApi.

Replace this.myService.getItems() with your actual service call.

this.destroy$ is provided by DestroyableComponent and ensures cleanup.