Implementing Custom Pipes for Data Transformation

{
  "title": "Implementing Custom Pipes for Data Transformation",
  "description": "Learn how to create custom pipes to transform data within your Angular templates, enhancing the presentation layer and maintaining clean code.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Generate Custom Pipe Using Angular CLI",
      "description": "Use Angular CLI to generate a new pipe, ensuring consistency and reducing manual setup.",
      "code": "ng generate pipe customPipeName"
    },
    {
      "name": "Implement PipeTransform Interface",
      "description": "Ensure the custom pipe class implements the PipeTransform interface to define the transformation logic.",
      "code": "import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'customPipeName'\n})\nexport class CustomPipeNamePipe implements PipeTransform {\n  transform(value: any, ...args: any[]): any {\n    // Transformation logic here\n  }\n}"
    },
    {
      "name": "Register Pipe in Module Declarations",
      "description": "Declare the custom pipe in the module's declarations array to make it available throughout the application.",
      "code": "import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app.component';\nimport { CustomPipeNamePipe } from './custom-pipe-name.pipe';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    CustomPipeNamePipe\n  ],\n  imports: [\n    BrowserModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }"
    },
    {
      "name": "Use Custom Pipe in Templates",
      "description": "Apply the custom pipe in templates using the pipe operator to transform data as needed.",
      "code": "<p>{{ data | customPipeName }}</p>"
    },
    {
      "name": "Keep Pipe Logic Pure",
      "description": "Ensure that the transform method is pure, meaning it does not produce side effects and returns the same output for the same input, to maintain performance and predictability.",
      "code": "export class CustomPipeNamePipe implements PipeTransform {\n  transform(value: any, ...args: any[]): any {\n    // Pure transformation logic here\n  }\n}"
    },
    {
      "name": "Provide Meaningful Pipe Names",
      "description": "Use descriptive and concise names for custom pipes to clearly convey their purpose.",
      "code": "@Pipe({\n  name: 'meaningfulPipeName'\n})"
    },
    {
      "name": "Document Pipe Usage and Parameters",
      "description": "Include comments and documentation for the custom pipe to explain its usage, parameters, and expected output.",
      "code": "/**\n * Transforms the input value by applying specific logic.\n * @param value The value to be transformed.\n * @param args Additional arguments for transformation.\n * @returns The transformed value.\n */\nexport class CustomPipeNamePipe implements PipeTransform {\n  transform(value: any, ...args: any[]): any {\n    // Transformation logic here\n  }\n}"
    }
  ]
}