Installation

Install @js-smart/ng-kit using your preferred package manager:

npm i @js-smart/ng-kit

Prerequisites

The library requires:

• Angular: Version 19 or later
• RxJS: Version 7.x
• Bootstrap: Version 5.x (if using)
• Angular Material: Required for Material-based components

Compatibility Matrix

ng-kit follows Angular semantic versioning. Use the ng-kit version that matches your Angular version:

Note: Always install the ng-kit version that matches your Angular major version. Minor and patch versions within the same major version are compatible.

Usage Example

ng-kit is fully modular and tree-shakable. Import only the features you need. Here's how to use the Primary Button Directive in a standalone component:

import { Component, signal } from '@angular/core';
import { PrimaryButtonDirective } from '@js-smart/ng-kit';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [PrimaryButtonDirective, MatButtonModule],
  template: `
    <button
      [disabled]="loading()"
      (click)="handleClick()"
      primaryButton
      mat-raised-button>
      {% raw %}{{ loading() ? 'Loading...' : 'Submit' }}{% endraw %}
    </button>
  `
})
export class AppComponent {
  loading = signal(false);

  handleClick() {
    this.loading.set(true);
    setTimeout(() => this.loading.set(false), 3000);
  }
}

Troubleshooting

If you encounter issues during installation or usage:

1. Version Compatibility: Ensure your Angular version is 19 or later
2. Peer Dependencies: Check for peer dependency warnings during install and ensure all required packages are installed
3. Clean Install: Delete node_modules and lock files, then reinstall dependencies:

   rm -rf node_modules package-lock.json
   npm install

4. Bootstrap Styles: Verify Bootstrap CSS is properly imported if components appear unstyled
5. Angular Material: Ensure Angular Material is installed if using Material-based components
6. TypeScript Errors: Ensure you're using a compatible TypeScript version (check Angular requirements)
7. Update Guide: Review the Angular Update Guide for breaking changes between versions

Next Steps

• Explore the Components section for available UI components
• Check out Directives for interactive directives
• Review Utilities for helper functions and state management
• See the Introduction for an overview of key features