Andhera Angular

A comprehensive Angular 20 UI component library featuring reusable components, directives, services, animations, and utilities for building modern admin dashboards and applications.


Features

- 🎨 Components - Chips (with variants, sizes, icons, removable)
- 🎬 Animations - Fade, Slide, Zoom, Expand/Collapse, Shake
- 📋 Directives - Scroll Reset, Custom Scrollbar (Perfect Scrollbar)
- 🔧 Services - Config, Confirmation Dialog, Loading, Media Watcher, Platform Detection, Splash Screen, Utils
- ✅ Validators - Form validators (mustMatch, etc.)
- 🧪 Mock API - Built-in mock API interceptor for development

Installation

``bash
npm install andhera-angular
`

$3

This library requires the following peer dependencies:

`bash
npm install @angular/animations @angular/cdk @angular/common @angular/core @angular/forms @angular/material @angular/router rxjs
`

Usage

$3

`typescript
import { ApplicationConfig } from '@angular/core';
import { provideBee } from 'andhera-angular';

export const appConfig: ApplicationConfig = {
providers: [
provideBee({
// Your Bee configuration
layout: 'classy',
scheme: 'light',
screens: { sm: '600px', md: '960px', lg: '1280px', xl: '1440px' },
theme: 'theme-default',
themes: [{ id: 'theme-default', name: 'Default' }],
}),
],
};
`

$3

`typescript
import { Component } from '@angular/core';
import { BeeChipsComponent } from 'andhera-angular';

@Component({
selector: 'app-example',
standalone: true,
imports: [BeeChipsComponent],
template:

label="Angular"
variant="primary"
size="md"
[removable]="true"
(removed)="onRemoved()"
(clicked)="onClicked($event)">

label="Settings"
icon="pi pi-cog"
iconPosition="left"
variant="secondary">

,
})
export class ExampleComponent {
onRemoved() {
console.log('Chip removed');
}

onClicked(event: MouseEvent) {
console.log('Chip clicked', event);
}
}
`

$3

`typescript
import { Component, inject } from '@angular/core';
import { BeeConfirmationService } from 'andhera-angular';

@Component({
selector: 'app-example',
template: Delete,
})
export class ExampleComponent {
private confirmationService = inject(BeeConfirmationService);

confirm() {
const dialogRef = this.confirmationService.open({
title: 'Confirm Delete',
message: 'Are you sure you want to delete this item?',
actions: {
confirm: { label: 'Delete', color: 'warn' },
cancel: { label: 'Cancel' },
},
});

dialogRef.afterClosed().subscribe((result) => {
if (result === 'confirmed') {
// Handle deletion
}
});
}
}
`

$3

`typescript
import { Component } from '@angular/core';
import { beeAnimations } from 'andhera-angular';

@Component({
selector: 'app-example',
animations: beeAnimations,
template:

`typescript
import { Component } from '@angular/core';
import { BeeScrollbarDirective } from 'andhera-angular';

@Component({
selector: 'app-example',
standalone: true,
imports: [BeeScrollbarDirective],
template:

| Component | Selector | Description |
|-----------|----------|-------------|
| BeeChipsComponent | bee-chips | Chips with variants, sizes, icons |

$3

| Service | Description |
|---------|-------------|
| BeeConfigService | App configuration management |
| BeeConfirmationService | Confirmation dialogs |
| BeeLoadingService | Loading state management |
| BeeMediaWatcherService | Responsive breakpoint observer |
| BeePlatformService | Platform/OS detection |
| BeeSplashScreenService | Splash screen control |
| BeeUtilsService | Utility functions |

$3

| Directive | Selector | Description |
|-----------|----------|-------------|
| BeeScrollbarDirective | [beeScrollbar] | Custom scrollbar |
| BeeScrollResetDirective | [beeScrollReset] | Reset scroll on navigation |

Configuration

The library can be configured via the provideBee() function:

`typescript
provideBee({
layout: 'classy', // Layout type
scheme: 'light', // 'light' | 'dark' | 'auto'
screens: { // Breakpoints
sm: '600px',
md: '960px',
lg: '1280px',
xl: '1440px',
},
theme: 'theme-default', // Active theme
themes: [ // Available themes
{ id: 'theme-default', name: 'Default' },
],
})
`

Development

`bash
npm install
npm run build:lib
`

Publishing

`bash
npm run build:lib
cd dist/bee-library
npm publish --access public
``

Version

Current version: 0.1.0

Compatible with Angular 20.x

License

MIT © Andhera Team

See LICENSE for details.

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

Support

For issues and feature requests, please use the GitHub issue tracker.