{"id":1948,"date":"2022-06-07T15:51:13","date_gmt":"2022-06-07T13:51:13","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1948"},"modified":"2022-06-07T16:11:59","modified_gmt":"2022-06-07T14:11:59","slug":"angular-difference-between-pure-and-impure-pipe","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/06\/07\/angular-difference-between-pure-and-impure-pipe\/","title":{"rendered":"Angular: Difference between pure and impure pipe"},"content":{"rendered":"\n<p>When writing a custom pipe in Angular you can specify whether you define a pure or an impure pipe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Pipe({\n  name: 'myCustomPipe', \n  pure: false\/true        &lt;----- here (default is `true`)\n})\nexport class MyCustomPipe {}<\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 id=\"4bff\">Pure Pipe<\/h4>\n\n\n\n<ul><li>good for transformation primitive input values like String, Number, Boolean or object reference like Date,<\/li><li>bad for the transformation of a complex object<\/li><li>it doesn\u2019t detect changes when changing the length of the array<\/li><li>executes whenever it detects a change for the input or reference<\/li><li>does not work when mutating data in an array<\/li><\/ul>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">Example<\/span><\/h4>\n\n\n\n<p>In this example, you can see the student list being filtered through the UniversityPipe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ App.component.html:\n\n&lt;input placeholder=\"name\" #name&gt;\n&lt;input placeholder=\"university\" #university&gt;\n&lt;button (click)=\"add(name.value, university.value)\"&gt;Add student&lt;\/button&gt;\n&lt;div&gt;  \n  &lt;table&gt;    \n    &lt;th&gt;Name University&lt;\/th&gt;    \n    &lt;tr *ngFor=\"let student of (students | university)\"&gt;\n      &lt;td&gt;{{student.name}}&lt;\/td&gt;\n      &lt;td&gt;{{student.university}}&lt;\/td&gt;   \n    &lt;\/tr&gt;  \n  &lt;\/table&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ App.component.ts:\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.scss']\n})\nexport class AppComponent {\n@ViewChild('name') name: ElementRef;\n@ViewChild('university') university: ElementRef;\nstudents = &#91;\n    { name: 'John', university: 'University of Chicago' },\n    { name: 'Ann', university: 'University of Pensylwania' },\n    { name: 'Sarah', university: 'University of Pensylwania'},\n    { name: 'Mike', university: 'Yale University' },\n    { name: 'Kevin', university: 'Yale University'},\n    { name: 'Jack', university: 'Yale University' }\n  ]\nadd(name: string, university: string) {\n  this.students.push({name, university});\n  this.name.nativeElement.value = '';\n  this.university.nativeElement.value = '';\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ UniversityPipe.ts:\n\nimport { Pipe, PipeTransform } from '@angular\/core';\nimport { Student } from '.\/student';\n@Pipe({\n  name: 'university',\n})\nexport class UniversityPipe implements PipeTransform {\n  transform(students: Student&#91;]): Student&#91;] {\n    return students.filter((student) =&gt; student.university ===\n'University of Pensylwania');\n  }\n}\n\n<\/code><\/pre>\n\n\n\n<p>This pipe works if the array length is still the same. If we add a new student to our list, the pipe won\u2019t work.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/06\/purePipe.gif\" alt=\"\" class=\"wp-image-1949\" width=\"452\" height=\"143\"\/><\/figure><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Impure pipe<\/h4>\n\n\n\n<ul><li>good for use with complex objects<\/li><li>detects changes when the length of an array is changed, such as when added or deleted<\/li><li>detects differences in nested objects<\/li><li>detects changes with each change, e.g. button clicks<\/li><li>slows down the performance of the application<\/li><\/ul>\n\n\n\n<p>If we add a value \u2018false\u2019 to property \u2018pure\u2019 we obtain an impure pipe:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Pipe({\n  name: 'university',\n  pure: false\n})<\/code><\/pre>\n\n\n\n<p>Now, when we add a new student to the board, our list will update.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/06\/impurePipe.gif\" alt=\"\" class=\"wp-image-1950\" width=\"478\" height=\"189\"\/><\/figure><\/div>\n\n\n\n<h4>Summary<\/h4>\n\n\n\n<p id=\"2e6e\">A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.<\/p>\n\n\n\n<p>An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) changes. which leads to bad performance. thats why it is not recommneded to use pipes for filtering data. (their use may slow down the application.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/06\/image.png\" alt=\"\" class=\"wp-image-1951\" width=\"437\" height=\"154\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/06\/image.png 647w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/06\/image-300x106.png 300w\" sizes=\"(max-width: 437px) 100vw, 437px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When writing a custom pipe in Angular you can specify whether you define a pure or an impure pipe: Pure Pipe good for transformation primitive input values like String, Number, Boolean or object reference like Date, bad for the transformation of a complex object it doesn\u2019t detect changes when changing the length of the array [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1952,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[561,560,306,559],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1948"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1948"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1948\/revisions"}],"predecessor-version":[{"id":1957,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1948\/revisions\/1957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1952"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}