{"id":688,"date":"2023-11-07T16:01:33","date_gmt":"2023-11-07T22:01:33","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=688"},"modified":"2023-11-07T16:01:33","modified_gmt":"2023-11-07T22:01:33","slug":"angular-pipe-example","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/angular-pipe-example\/","title":{"rendered":"Angular pipe example"},"content":{"rendered":"\n

To obtain the gini.2019<\/code> value from an object in Angular using a pipe<\/p>\n\n\n\n

A custom pipe can be created to access nested properties of the object. <\/p>\n\n\n\n

    \n
  1. Create a Custom Pipe:<\/strong> First, you need to create a custom pipe. You can use the Angular CLI to generate a new pipe:<\/li>\n<\/ol>\n\n\n\n
       ng generate pipe gini<\/strong><\/code><\/pre>\n\n\n\n
    This will create a gini.pipe.ts<\/code> file.<\/p>\n\n\n\n
      \n
    1. Implement the Custom Pipe:<\/strong> In the gini.pipe.ts<\/code> file, implement the custom pipe to extract the gini.2019<\/code> value from the object:<\/li>\n<\/ol>\n\n\n\n
      <\/div>
      <\/div>
      <\/div><\/div>
      Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
         import { Pipe, PipeTransform } from '@angular\/core';\n\n   @Pipe({\n     name: 'gini2019'\n   })\n   export class Gini2019Pipe implements PipeTransform {\n     transform(data: any): number | undefined {\n       if (data && data.gini && data.gini['2019']) {\n         return data.gini['2019'];\n       }\n       return undefined;\n     }\n   }<\/code><\/pre><\/div><\/div>\n\n\n\n
        \n
      1. Use the Custom Pipe in a Component:<\/strong> In your Angular component’s template, you can use the custom pipe to display the gini.2019<\/code> value from your object:<\/li>\n<\/ol>\n\n\n\n
        <\/div>
        <\/div>
        <\/div><\/div>
        Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
           <div>\n     Gini (2019): {{ data | gini2019 }}\n   <\/div><\/code><\/pre><\/div><\/div>\n\n\n\n
          \n
        1. Import the Custom Pipe:<\/strong> Make sure to import and declare the custom pipe in your module (e.g., app.module.ts<\/code>):<\/li>\n<\/ol>\n\n\n\n
          <\/div>
          <\/div>
          <\/div><\/div>
          Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
             import { Gini2019Pipe } from '.\/gini.pipe';\n\n   @NgModule({\n     declarations: [Gini2019Pipe, \/* other components and pipes *\/],\n     \/\/ ...\n   })\n   export class AppModule { }<\/code><\/pre><\/div><\/div>\n\n\n\n
          Replace data<\/code> with the variable that holds your object. <\/p>\n\n\n\n
          The gini.2019<\/code> value will be displayed in your component’s template.<\/p>\n\n\n\n
          <\/p>\n\n\n\n
          <\/p>\n\n\n\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          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. This will create a gini.pipe.ts file. Replace data with the variable that holds your object. The gini.2019 value will be displayed in your component’s template.<\/p>\n","protected":false},"author":1,"featured_media":259,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[109,49],"tags":[102,103,105,63],"_links":{"self":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/688"}],"collection":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/comments?post=688"}],"version-history":[{"count":1,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/688\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/688\/revisions\/689"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/259"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}