WebnautsNg

Angular UI component library with reusable components, directives, services and SCSS styles built for Angular 19+.

Installation

Install the library along with all required peer dependencies:

npm install webnauts-ng @ng-select/[email protected] [email protected] [email protected] [email protected] [email protected]

Note: The library requires Angular 19.2.0+ and @angular/cdk as peer dependencies.

Usage

Importing Components

All components are standalone and can be imported directly:

import { Component } from '@angular/core';
import { AvatarComponent, BadgeComponent, DataTableComponent } from 'webnauts-ng';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AvatarComponent, BadgeComponent, DataTableComponent],
  template: `
    <wbng-avatar [url]="avatarUrl" [size]="48"></wbng-avatar>
    <wbng-badge [label]="'New'" [type]="'success'"></wbng-badge>
  `
})
export class AppComponent {
  avatarUrl = 'path/to/avatar.jpg';
}

Importing Styles

Import the main SCSS file in your global styles:

// In your styles.scss
@use 'webnauts-ng/src/styles/wbng_styles.scss';

Or use the older @import syntax:

@import 'webnauts-ng/src/styles/wbng_styles.scss';

You can also import specific style files:

@use 'webnauts-ng/src/styles/wbng_components.scss';
@use 'webnauts-ng/src/styles/wbng_themes.scss';
@use 'webnauts-ng/src/styles/wbng_layouts.scss';

Available Components

Form Components

• FormInputComponent (wbng-form-input) - Input field with validation
• FormTextareaComponent (wbng-form-textarea) - Textarea with validation
• FormCheckboxComponent (wbng-form-checkbox) - Checkbox input
• FormRadioComponent (wbng-form-radio) - Radio button group
• FormSelectComponent (wbng-form-select) - Dropdown select with ng-select
• FormSwitchComponent (wbng-form-switch) - Toggle switch
• FormDatePickerComponent (wbng-form-date-picker) - Date picker
• FormColorPickerComponent (wbng-form-color-picker) - Color picker
• FormFieldErrorsComponent (wbng-form-field-errors) - Form validation errors

UI Components

• AvatarComponent (wbng-avatar) - User avatar display
• BadgeComponent (wbng-badge) - Label/badge indicator
• DotBadgeComponent (wbng-dot-badge) - Dot indicator with tooltip
• SpinnerComponent (wbng-spinner) - Loading spinner
• TabsComponent (wbng-tabs) - Tab navigation
• SearchComponent (wbng-search) - Search input
• DataTableComponent (wbng-data-table) - Advanced data table with sorting, pagination
• ConfirmationModalComponent (wbng-confirmation-modal) - Confirmation dialog
• NotificationsHolderComponent (wbng-notifications-holder) - Toast notifications
• TextEditorComponent (wbng-text-editor) - Rich text editor with Quill

Navigation Components

• MainMenuComponent (wbng-main-menu) - Main navigation menu
• SubmenuComponent (wbng-submenu) - Submenu component

Filter Components

• FilterCheckboxComponent (wbng-filter-checkbox) - Checkbox filter dropdown
• FilterDaterangeComponent (wbng-filter-daterange) - Date range filter
• DateRangeInputComponent (wbng-date-range-input) - Date range input

Directives

import { TooltipDirective, ClickStopPropagationDirective } from 'webnauts-ng';

// Usage
@Component({
  imports: [TooltipDirective],
  template: `
    <button [wbng-tooltip]="'Click me!'" direction="top">Hover me</button>
  `
})

Available Directives:

• TooltipDirective - Custom tooltip
• ClickStopPropagationDirective - Stop click propagation
• TableColDirective - Table column directive
• CustomTooltipDirective - Advanced tooltip with templates
• CustomTooltipTriggerDirective - Tooltip trigger

Services

NotificationService

import { NotificationService } from 'webnauts-ng';

constructor(private notificationService: NotificationService) {}

showNotification() {
  this.notificationService.success('Success!', 'Operation completed successfully');
  this.notificationService.error('Error!', 'Something went wrong');
  this.notificationService.warning('Warning!', 'Please check your input');
  this.notificationService.info('Info', 'New update available');
}

Pipes

import { SafeHtmlPipe, FilterByFieldPipe } from 'webnauts-ng';

• SafeHtmlPipe - Sanitize HTML content
• FilterByFieldPipe - Filter arrays by field value

Utilities

import { paginate, endOfMonth, startOfMonth } from 'webnauts-ng';

// Pagination
const paginatedData = paginate(data, page, perPage);

// Date functions
const monthEnd = endOfMonth(new Date());
const monthStart = startOfMonth(new Date());

Interfaces

import { ITabItem, IRadioItem, IDataTable, ISelectItem } from 'webnauts-ng';

Example: Data Table

import { DataTableComponent, IDataTable } from 'webnauts-ng';

@Component({
  imports: [DataTableComponent],
  template: `
    <wbng-data-table
      [data]="tableData"
      [columns]="columns"
      [pagination]="true"
      (onRowClick)="handleRowClick($event)">
    </wbng-data-table>
  `
})
export class MyComponent {
  tableData: IDataTable = {
    rows: [...],
    total: 100
  };

  columns = [
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' }
  ];
}

Theming

The library includes pre-built SCSS themes and variables:

// Override default variables
$primary-color: #007bff;
$secondary-color: #6c757d;

@use 'webnauts-ng/src/styles/wbng_variables.scss';
@use 'webnauts-ng/src/styles/wbng_themes.scss';

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please use the GitHub issue tracker.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.