Angular Interview Questions

Angular pipes are a feature that allows you to transform data in templates. They are simple functions that can take in a value, process it, and return a transformed value. Pipes are often used to format dates, numbers, and strings, or to perform other data transformations directly within templates. Angular provides several built-in pipes, such as DatePipe, CurrencyPipe, and UpperCasePipe, but you can also create custom pipes to meet specific needs.

Key Features of Angular Pipes:

1. Transformation Logic:

   • Pipes encapsulate data transformation logic, making templates cleaner and more readable.
   • Example usage: {{ value | currency:'USD' }}

2. Chainable:

   • Pipes can be chained together to perform multiple transformations.
   • Example: {{ value | date:'short' | uppercase }}

3. Parameterized:

   • Pipes can accept parameters to customize their behavior.
   • Example: {{ value | number:'1.2-2' }}

Creating a Custom Pipe:

To create a custom pipe in Angular, follow these steps:

1. Generate the Pipe:

   • Use the Angular CLI to generate a new pipe.

     ng generate pipe custom

   • This command creates a new file for the pipe and updates the necessary module to declare it.

2. Implement the Pipe Logic:

   • Implement the transformation logic in the generated pipe class.
   • Example:

     import { Pipe, PipeTransform } from '@angular/core';
     
     @Pipe({
       name: 'custom'
     })
     export class CustomPipe implements PipeTransform {
       transform(value: string, ...args: any[]): string {
         // Transformation logic here
         return value.toUpperCase();
       }
     }

3. Register the Pipe:

   • Ensure the pipe is declared in the declarations array of your Angular module.
   • Example:

     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { AppComponent } from './app.component';
     import { CustomPipe } from './custom.pipe';
     
     @NgModule({
       declarations: [
         AppComponent,
         CustomPipe // Register the custom pipe here
       ],
       imports: [
         BrowserModule
       ],
       providers: [],
       bootstrap: [AppComponent]
     })
     export class AppModule { }

4. Use the Custom Pipe in Templates:

   • Apply the custom pipe in your templates using the pipe operator (|).
   • Example:

     <p>{{ 'hello world' | custom }}</p>

Example Scenario: Creating a Custom Pipe

1. Generate the Pipe:

   ng generate pipe reverse

2. Implement the Pipe Logic:

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
     name: 'reverse'
   })
   export class ReversePipe implements PipeTransform {
     transform(value: string): string {
       return value.split('').reverse().join('');
     }
   }

3. Register the Pipe:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   import { ReversePipe } from './reverse.pipe';
   
   @NgModule({
     declarations: [
       AppComponent,
       ReversePipe
     ],
     imports: [
       BrowserModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

4. Use the Custom Pipe in Templates:

   <p>{{ 'hello world' | reverse }}</p>

Benefits of Using Pipes:

1. Code Reusability:

   • Pipes encapsulate reusable logic, allowing you to apply the same transformation across different templates.

2. Cleaner Templates:

   • By moving transformation logic out of the template and into a pipe, templates become cleaner and easier to read.

3. Testability:

   • Pipes can be easily tested as standalone functions, improving the testability of your code.

In Summary:

Angular pipes are a powerful tool for transforming data within templates. They help keep templates clean and readable by encapsulating transformation logic. To create a custom pipe, you generate a new pipe using the Angular CLI, implement the transformation logic in the pipe class, register the pipe in an Angular module, and then use the pipe in your templates. This allows you to apply consistent data transformations across your Angular application.