Installation

How to install and set up @js-smart/ng-kit in your Angular application, plus prerequisites, version compatibility, and troubleshooting tips.

Overview

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

bash

# Install using npm or package manager of your choice
npm i @js-smart/ng-kit @angular/material @angular/cdk

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. Minor and patch versions within the same major version are compatible.

Angular version	Library version	Status
`21.x`	`21.x`	Supported
`20.x`	`20.x`	Supported
`19.x`	`19.x`	Supported

Usage example

ng-kit is fully modular and tree-shakable—import only the features you need. Here's how to use the PrimaryButtonDirective in a standalone component.

typescript

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

@Component({
	selector: 'app-component',
	imports: [PrimaryButtonDirective, MatButtonModule],
	template: `
		<button [disabled]="loading()" (click)="handleClick()" primaryButton mat-raised-button>
			{{ loading() ? 'Loading...' : 'Submit' }}
		</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:

Version compatibility: Ensure your Angular version is 19 or later.
Peer dependencies: Check for peer dependency warnings during install and ensure all required packages are installed.
Clean install: Delete node_modules and lock files, then reinstall dependencies.
Bootstrap styles: Verify Bootstrap CSS is properly imported if components appear unstyled.
Angular Material: Ensure Angular Material is installed if using Material-based components.
TypeScript errors: Ensure you're using a compatible TypeScript version (check Angular requirements).
Update guide: Review the Angular Update Guide for breaking changes between versions.

bash

rm -rf node_modules package-lock.json
npm install

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.