@soleran/ngx-account-usage

A simple Angular component for displaying account usage information with billing plan integration.

Installation

npm install @soleran/ngx-account-usage

Usage

Basic Usage

import { SimpleBillingUsageComponent } from '@soleran/ngx-account-usage';

@Component({
  selector: 'app-my-component',
  template: `
    <sol-billing-usage 
      [account]="account"
      [showUpgradeButton]="true">
    </sol-billing-usage>
  `,
  imports: [SimpleBillingUsageComponent]
})
export class MyComponent {
  account = {
    id: 1,
    name: 'My Account',
    billingPlan: 'BASIC',
    billingPlans: {
      primaryPlanId: 'basic-plan-id',
      secondaryPlanIds: []
    }
  };
}

With Custom Usage Data

import { SimpleBillingUsageComponent, IUsageItem } from '@soleran/ngx-account-usage';

@Component({
  selector: 'app-my-component',
  template: `
    <sol-billing-usage 
      [account]="account"
      [usageData]="customUsageData"
      [showUpgradeButton]="false">
    </sol-billing-usage>
  `,
  imports: [SimpleBillingUsageComponent]
})
export class MyComponent {
  account = { id: 1, name: 'My Account' };
  
  customUsageData: IUsageItem[] = [
    {
      label: 'Users',
      current: 8,
      max: 10,
      percentage: 80,
      icon: 'people',
      color: 'accent'
    },
    {
      label: 'Storage',
      current: 500,
      max: 'unlimited',
      percentage: 0,
      icon: 'storage',
      color: 'primary'
    }
  ];
}

Inputs

• account: Account object with billing information
• showUpgradeButton: Whether to show the upgrade button (default: true)
• usageData: Optional custom usage data to display

Styling

The component uses CSS custom properties for theming:

:root {
  --primary-color: #ee2d2f;
  --secondary-color: #22588a;
  --accent-color: #ff9800;
  --warn-color: #f44336;
  --text-color: #333;
  --divider-color: #e0e0e0;
}

Dependencies

• Angular 19+
• Angular Material 19+

License

MIT