Pure Pipes in Angular I Angular Pipes | Angular 13+

in this lecture let's learn what is a pure pipe in angular and why it is not recommended to use pipes for sorting of filtering data now whenever we create a new pipe in angular that pipe by default is a pure pipe for example in the last lecture we created this filter pipe so when we created this filter pipe by default this filter pipe is a pure pipe this filter student pipe is a pure pipe in the same way we also created this percentage pipe and this percentage pipe is also a pure pipe now if you want to explicitly set if a pipe should be pure or impure for that to this object which we are passing to this pipe decorator you can specify another property which is an optional property and called as po and you can set its value either to true or false so when you set the value of this pure property to true that means it will be a pure pipe but if you set it to false in that case this pipe will be an impure pipe okay and if you don't specify this property in that case also by default this pure property will be set to true that means the pipe will be a pure pipe now what exactly is a pure pipe pure pipes are those pipes which gets executed when angular detects a pure change on the input value for example here we are using this lowercase pipe on this input so if the value of this input changes and if that change is a pure change in that case the pure pipe will be called okay so here this lowercase pipe is a pure pipe as i mentioned by default a pipe is pure so when the value of this gender property will change and if that change is a pure change in that case this lowercase pipe will be called similarly we are using this percentage pipe on this input on this marks property so if the value of this marks property changes and if that change is a pure change then this percentage pipe will be called but if that change is not a pure change in that case this percentage pipe will not be called because currently this percentage pipe is a pure pipe okay so pure pipe only gets called if the input on which we are using it has a pure change now the question is what is a pure change if we are using a pipe on a primitive type like string boolean or number type and if the value of that primitive type changes in that case that is considered as a pure change for example we are using this percentage pipe on this input so we are using it on this marks property and this marks property is storing a numeric value and numeric values are primitive so if the input is of primitive type and if its value changes that change is considered as pure change and when there is a pure change in that case the pure pipe gets called let's see that in action so let's go to this percentage pipe so here we are defining this percentage pipe inside this let me write a console.log statement and here let's say percentage pipe called okay now let's go to appcomponent.html and inside this td element i am going to specify an input of type number and let me set its value and this value should be the value of this std dot marks so let me copy this and let me paste it here and actually i want to add this input element here instead of std dot marks okay so it will look something like this okay so here we can increment or decrement the value of marks now currently it is empty so let's go back and on this input element let's do two way data binding so for that first we use square brackets then we use parenthesis and inside that we can use ng model okay and to this ng model let's bind it to std dot marks so let me copy this and let's paste it here with this let's save the changes let's go to the web page and now you can see that those marks are also displayed so since this mark is of primitive type since it is a number if i change its value that change will be a pure change and when there is a pure change on this marks we are using this percentage this percentage pipe so when we change its value that that change will be a pure change and when there will be a pure change this percentage pipe will be called right that's what we have learned let's go to web page let me open developer console so here you will notice that this percentage pipe has been called six times because here we have six students so for each student this percentage pipe has been called and it has calculated the percentage now if i change the value here for any one of these marks let's say here i increment this marks of this third student this marijane to let's say 541 so you will notice that percentage has changed here and also in the console you will see percentage pipe called is logged that means here this change is a pure change and when there is a pure change the pure pipe gets called okay then a pure change is also a change in reference of reference types like array object functions etc let's understand this with an example so what i'm going to do is after this table i'm going to add a button so let's add a button element and let's call it add student and on this button element let's find a click event and to this click event let's assign a method and let's call this method add dummy student okay now let me copy this method name and let's go ahead and let's create this method in app component class now inside this method let's simply say this dot student so here i'm accessing this students array and to this i'm adding a new student okay a dummy student okay so here i'm passing an object which has this name course marks date of birth and gender property so here what will happen is initially when the page loads the students is assigned with this students array from the student service and that students has six student objects and that's what you will see in the web page right these six students have been added here they have been displayed here and then when the user will click on this add student button a new student will be added in the same student object okay so in the same student in the same students array a new student will be added so here the reference is not changing okay we are using this filter student pipe on the students array initially this student array has 6 students and when the user will click on this add student button a new student will be added in the same students array so there the reference is not changing okay here the students is still pointing to the same student array so this is not a pure change this is an impure change so let's see the behavior when we filter students and then add a new student in case of a impure change so if you notice we are adding this student object and the gender of the student object is female okay let's go to web page let me close this and let me also log a message inside this filter pipe so let's say console.log and filter pipe called okay let's go to the web page now so here you will notice that the filter pipe has been called and initially since the value of this filter text is empty string that's why all the students are being displayed now here let me search for female students so we have two female students and that has been displayed here make it like this okay so you can see we have two female students now when i click on this add student button you won't see the newly added student whose gender is also female in this filtered list and you will not see that percentage pipe called message logged in the console as well okay but when i clear this text box you will see that a new student called test with this gender female has been added here so since the reference is not changing here the reference of the input is not changing here this change is not a pure change and since it is not a pure change that's why the filter pipe has not been called okay now let's go back to vs code and let's go back to appcomponent.ts and here let's change the reference so what i'm going to do is instead of directly adding to the students array i am going to create a copy of this students array okay so let's create a variable let's call it student copy equals and then i'm going to use object dot assign method and here we want to assign an array and whichever we want to assign we want to assign the students array so now a copy of the student survey will be created and that copy will be stored inside this student copy variable now instead of pushing a new student object to the students array we are going to push this new student object inside this student's copy array okay and now let's set this dot students equals student copy okay so here the reference will change now the students array the students property will point to a new array to this student copy array okay so here the reference is changing with this if i save the changes if i go to the web page and now if i filter this table by gender female currently we have two female students and now if i click on this add student button you will see that the third student has been added and it is also being displayed in this filtered student list and you will also notice that this filter pipe has been called here and along with that this percentage pipe has also been called that's because a new student has been added and on that student we have applied this percentage pipe okay so when the reference of the input changes that is also considered as pure change okay and finally the most important thing which you need to understand is that a pure change is not when the input is a reference type and only its property value changes and not the reference let's again understand this with an example so here let's add one more button element so let me copy this and here let's bind the click event and to this click event let's assign a method and let's call this method change gender okay let's go ahead and let's create this method so in the appcomponent.ts i'll create this method and this method is simply going to change the gender of the first student okay so if i go to the web page the first student is mark what and his gender is male so we are going to change his gender to female okay so let's access this students array and on the student survey let's access the first element and let's change gender to female okay now notice here the reference is not changing here we are simply changing the value of a property but here the reference is not changing right we are using this filter student pipe on this students array and this students array is nothing but this student's property and we are accessing the first element of that student's property and we are changing its gender so here the students is still going to have a reference to the same memory address here the reference is not changing and when the reference is not changing and when we are trying to change the property of that reference type that is not considered as a pure change okay so if i go to the web page let's filter this table by female okay and now okay here i have named it as add student so let's go ahead and change the name of this button let's say change gender okay let's go back to the web page and again let's filter this table by gender so here we have two female students now when i click on this change then gender the gender of the first student should change to female and it should be displayed in this filtered list right let's see if that's the case so if i click on this chain gender you will see that that student is not being displayed in this table and you will also see that filter pipe has not been called here that's because this is not a pure change this is an impure change and since it is not a pure change and since the filter pipe is a pure pipe that's why the filter pipe has not been executed and the first student whose gender we have changed to female is not being displayed in this table but if i remove this text from this text box you will see that in the result the gender of this first student has changed to female okay so since here the reference is not changing only the property value is changing this change is not a pure change and since this is not a pure change that's why this filter pipe has not been executed because the filter pipe is a pure pipe but if we change the reference here just like we did here so again i'm going to copy this line okay and here let's try to change this gender on this student copy and now let's assign this student copy to this student's array so let's say this dot students equals student copy with this let's save the changes let's go to the web page and let's see now if it works so again let me filter the female students and now let me click on this change gender and now you will notice that that student is displayed in this filtered list that's because here we have changed the reference and when the reference changes that is a pure change and when there is a pure change the pure pipe gets executed okay so this is what a pure pipe is and remember that pure pipes are very fast and pure pipes are very good for better performance of your application in the next lecture we will talk about impure pipes and we will learn why we should not use impure pipes

Channel: procademy

Views: 14,092

Keywords: pure pipes, impure pipes, angular, angular tutorial, complete angular course

Id: ik7iPoPZzWA

Length: 16min 59sec (1019 seconds)

Published: Tue Mar 29 2022