https://github.com/Kavshree/-bjkavyashree-ngx-smart-pipes
The goal of this library is to simplify everyday formatting tasks without relying on heavy third-party utilities. It provides intuitive, reusable pipes that work out of the box with AOT and Ivy compilation. Every pipe is designed to be small, predictable, and easy to reason about inside Angular’s change detection cycle
https://github.com/Kavshree/-bjkavyashree-ngx-smart-pipes
Last synced: 14 days ago
JSON representation
The goal of this library is to simplify everyday formatting tasks without relying on heavy third-party utilities. It provides intuitive, reusable pipes that work out of the box with AOT and Ivy compilation. Every pipe is designed to be small, predictable, and easy to reason about inside Angular’s change detection cycle
- Host: GitHub
- URL: https://github.com/Kavshree/-bjkavyashree-ngx-smart-pipes
- Owner: Kavshree
- License: mit
- Created: 2025-10-07T18:41:07.000Z (22 days ago)
- Default Branch: main
- Last Pushed: 2025-10-07T19:41:48.000Z (22 days ago)
- Last Synced: 2025-10-07T20:39:17.272Z (22 days ago)
- Language: TypeScript
- Size: 32.2 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-smart-pipes - A lightweight, tree-shakeable collection of standalone Angular pipes designed for real-world use cases. (Third Party Components / Pipes)
- awesome-angular - ngx-smart-pipes - A lightweight, tree-shakeable collection of standalone Angular pipes designed for real-world use cases. (Third Party Components / Pipes)
README
# ngx-smart-pipes
**ngx-smart-pipes** is a lightweight, tree-shakeable collection of **standalone Angular pipes** designed for real-world use cases.
Each pipe is small, pure, and optimized for performance — perfect for dashboards, BFF-driven apps, and modern Angular 17–19 projects.
---
### Features
- Built as **standalone pipes** (no heavy module imports)
- AOT & Ivy compatible, works with Angular 17–19
- Fully tree-shakeable — import only what you use
- Pure and side-effect free for predictable change detection
- Tiny package (<6 KB compressed)
---
### Available Pipes
| Pipe | Purpose | Example Input | Output |
|------|----------|---------------|---------|
| `truncate` | Shorten long text safely with ellipsis | `"This is a long sentence"` | `This is a long…` |
| `currencyCompact` | Compact currency format | `1234567.89` | `$1.2M` |
| `bytes` | Human-readable file size | `3145728` | `3.00 MB` |
| `dateDiff` | Relative time difference | `Date.now() - 36h` | `1d` |
| `phoneMask` | Customizable phone masking | `4165551234` | `(416) 555-1234` |
---
### Quick Start
```bash
npm i @bjkavyashree/ngx-smart-pipes
### Example
import { Component } from '@angular/core';
import {
TruncatePipe,
DateDiffPipe,
CurrencyCompactPipe,
BytesPipe,
PhoneMaskPipe,
} from '@bjkavyashree/ngx-smart-pipes';
@Component({
selector: 'demo-root',
standalone: true,
imports: [TruncatePipe, DateDiffPipe, CurrencyCompactPipe, BytesPipe, PhoneMaskPipe],
template: `
{{ message | truncate:30 }}
{{ amount | currencyCompact:'CAD':'en-CA':1 }}
{{ from | dateDiff }} ago
{{ fileSize | bytes:2 }}
{{ phone | phoneMask:'(XXX) XXX-XXXX' }}
`,
})
export class DemoComponent {
message = 'This is a long text that gets truncated.';
amount = 1234567.89;
from = new Date(Date.now() - 36 * 3600 * 1000);
fileSize = 3145728; // 3 MB
phone = '4165551234';
}