Creating Custom Pipes for Enhanced Data Formatting

{
  "title": "Creating Custom Pipes for Enhanced Data Formatting",
  "description": "Understand how to create custom pipes to format and transform data in your Angular templates effectively.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Use Angular CLI to Generate Pipes",
      "description": "Utilize Angular CLI to generate new pipes, ensuring consistency and adherence to Angular's best practices.",
      "example": "ng generate pipe customPipeName"
    },
    {
      "name": "Implement PipeTransform Interface",
      "description": "Ensure all custom pipes implement the PipeTransform interface to define the transformation logic.",
      "example": "import { Pipe, PipeTransform } from '@angular/core';\n@Pipe({ name: 'customPipe' })\nexport class CustomPipe implements PipeTransform {\n  transform(value: any, ...args: any[]): any {\n    // transformation logic here\n  }\n}"
    },
    {
      "name": "Register Pipes in Module Declarations",
      "description": "Declare custom pipes in the module's declarations array to make them available throughout the application.",
      "example": "import { NgModule } from '@angular/core';\nimport { CustomPipe } from './custom.pipe';\n@NgModule({\n  declarations: [CustomPipe],\n  // other properties\n})\nexport class AppModule { }"
    },
    {
      "name": "Keep Pipes Pure",
      "description": "Design pipes to be pure functions without side effects, ensuring they produce the same output for the same input and do not modify external states.",
      "example": "export class CustomPipe implements PipeTransform {\n  transform(value: string): string {\n    return value.toUpperCase();\n  }\n}"
    },
    {
      "name": "Use Meaningful and Consistent Naming",
      "description": "Name pipes descriptively using camelCase to clearly convey their purpose and maintain consistency.",
      "example": "@Pipe({ name: 'dateFormatter' })"
    },
    {
      "name": "Avoid Complex Logic in Pipes",
      "description": "Keep transformation logic simple within pipes; for complex operations, consider using services to maintain separation of concerns.",
      "example": "export class CustomPipe implements PipeTransform {\n  constructor(private someService: SomeService) {}\n  transform(value: any): any {\n    return this.someService.process(value);\n  }\n}"
    },
    {
      "name": "Test Custom Pipes Thoroughly",
      "description": "Write unit tests for custom pipes to ensure they function correctly under various scenarios.",
      "example": "import { CustomPipe } from './custom.pipe';\ndescribe('CustomPipe', () => {\n  const pipe = new CustomPipe();\n  it('transforms input correctly', () => {\n    expect(pipe.transform('input')).toBe('expectedOutput');\n  });\n});"
    },
    {
      "name": "Document Pipe Usage and Parameters",
      "description": "Provide clear documentation for each custom pipe, detailing its purpose, parameters, and usage examples.",
      "example": "/**\n * Transforms input string to title case.\n * @param value - The input string.\n * @returns The transformed title case string.\n */\nexport class TitleCasePipe implements PipeTransform {\n  transform(value: string): string {\n    // transformation logic\n  }\n}"
    }
  ]
}