Angular pipe example

To obtain the gini.2019 value from an object in Angular using a pipe

A custom pipe can be created to access nested properties of the object.

1. Create a Custom Pipe: First, you need to create a custom pipe. You can use the Angular CLI to generate a new pipe:

   ng generate pipe gini

This will create a gini.pipe.ts file.

2. Implement the Custom Pipe: In the gini.pipe.ts file, implement the custom pipe to extract the gini.2019 value from the object:

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

   @Pipe({
     name: 'gini2019'
   })
   export class Gini2019Pipe implements PipeTransform {
     transform(data: any): number | undefined {
       if (data && data.gini && data.gini['2019']) {
         return data.gini['2019'];
       }
       return undefined;
     }
   }

3. Use the Custom Pipe in a Component: In your Angular component’s template, you can use the custom pipe to display the gini.2019 value from your object:

   <div>
     Gini (2019): {{ data | gini2019 }}
   </div>

4. Import the Custom Pipe: Make sure to import and declare the custom pipe in your module (e.g., app.module.ts):

   import { Gini2019Pipe } from './gini.pipe';

   @NgModule({
     declarations: [Gini2019Pipe, /* other components and pipes */],
     // ...
   })
   export class AppModule { }

Replace data with the variable that holds your object.

The gini.2019 value will be displayed in your component’s template.