Skip to content

DNext Angular Directives

A collection of useful Angular directives for common UI interactions and behaviors.

Installation

npm install @dnext-angular/directives

Available Directives

TrimSpaceDirective

Prevents leading spaces and normalizes multiple spaces in input fields.

// Usage in template
<input trimSpace [(ngModel)]="value">

Features: - Prevents leading spaces - Replaces multiple spaces with a single space - Trims trailing spaces on blur - Works with both template-driven and reactive forms

NoECharDirective

Prevents the 'e' character from being entered in number input fields.

// Usage in template
<input type="number" noEChar>

Features: - Prevents 'e' and 'E' characters in number inputs - Useful for numeric fields where scientific notation is not desired

StopPropagationDirective

Stops click event propagation to parent elements.

// Usage in template
<div stopPropagation (click)="handleClick()">

Features: - Prevents click events from bubbling up to parent elements - Useful for nested clickable elements

ScrollbarDirective

A wrapper for Perfect Scrollbar with enhanced functionality.

// Usage in template
<div scrollbar [scrollbarOptions]="options">
  <!-- content -->
</div>

Features: - Custom scrollbar styling - Scroll position management - Programmatic scrolling methods - Responsive updates - Configurable options

ScrollTopDirective

Automatically scrolls element to top on route changes.

// Usage in template
<div scrollTop>
  <!-- content -->
</div>

Features: - Automatic scroll to top on navigation - Works with Angular router - No configuration needed

API Reference

ScrollbarDirective

Inputs

  • scrollbar: boolean - Enable/disable the scrollbar
  • scrollbarOptions: PerfectScrollbar.Options - Configuration options

Methods

  • update() - Updates scrollbar
  • destroy() - Destroys scrollbar instance
  • scrollTo(x: number, y?: number, speed?: number) - Scrolls to specific coordinates
  • scrollToElement(selector: string, offset?: number, ignoreVisible?: boolean, speed?: number) - Scrolls to element
  • scrollToTop(offset?: number, speed?: number) - Scrolls to top
  • scrollToBottom(offset?: number, speed?: number) - Scrolls to bottom
  • scrollToLeft(offset?: number, speed?: number) - Scrolls to left
  • scrollToRight(offset?: number, speed?: number) - Scrolls to right

Dependencies

  • @angular/core: ^18.0.0
  • @angular/common: ^18.0.0
  • @angular/cdk: ^18.0.0
  • perfect-scrollbar: ^1.5.5
  • rxjs: ^7.0.0

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

License

DNext PiAGroup