Pipe helper for local methods

#angular #pipe #custom

✅ Link: https://medium.com/@shulha.y/stop-executing-function-on-angular-html-template-c0fdd1d13b03

Sanitization Pipe in Angular

#angular #pipe #DomSanitizer

✅ Link: https://medium.com/@zeeshankhan8838/best-practices-in-angular-b9e8f88ee1fa

📄 Angular Pipes: Uppercase First Pipe

#angular #pipe

This pipe capitalizes the first letter of a string while keeping the rest in lowercase.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'uppercaseFirst' })
export class UppercaseFirstPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    return value
       .charAt(0)
       .toUpperCase() + value.slice(1).toLowerCase();
  }
}

Usage in an Angular template:

<p>{{ 'hello world' | uppercaseFirst }}</p>
<!-- Output: "Hello world" -->

📄 Angular Pipes: Reverse String Pipe

#angular #pipe

This pipe reverses the characters of a string.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverseString' })
export class RSPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    return value.split('').reverse().join('');
  }
}

Usage in an Angular template:

<p>{{ 'Angular' | reverseString }}</p>
<!-- Output: "ralugnA" -->

📄 Angular Pipes: Phone Number Formatter Pipe

#angular #pipe

Formats a raw string of numbers into a well-structured phone number format (e.g., (555) 555–5555).

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'phoneNumberFormatter' })
export class PNFPipe implements PipeTransform {
  transform(value: string): string {
    if (!value || value.length !== 10) return value;
    return `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6)}`;
  }
}

Usage in an Angular template:

<p>{{ '1234567890' | phoneNumberFormatter }}</p>
<!-- Output: "(123) 456-7890" -->

📄 Angular Pipes: File Size Pipe

#angular #pipe

Converts a file size in bytes to a more human-readable format, such as KB, MB, or GB.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'fileSize' })
export class FileSizePipe implements PipeTransform {
  transform(bytes: number): string {
    if (isNaN(bytes) || bytes === 0) return '0 Bytes';

    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(
       Math.log(bytes) / Math.log(1024)
    );
    return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`;
  }
}

Usage in an Angular template:

<p>{{ 1024 | fileSize }}</p>
<!-- Output: "1 KB" -->