Anil Singh | Code-sample.com

Angular LowerCasePipe  - Angular provides a LowerCasePipe and it is used to transforms given a text to lowercase. The expression with lowercase - {{  value_expression  |  lowercase  }} The example as, import  {  Component  }  from   '@angular/core' ; @ Component ({    selector:   'lowercase-pipe' ,    template:   `<div>      <input type="text" #name (keyup)="changeLowerCase(name.value)">      <p>LowerCase - <h2>'{{value | lowercase}}'</h2>    </div>` }) export   class   LowerCasePipeComponent  {    value :  string ;    changeLowerCase ( value :  string ) {      this . value  =  value ;    } } For more detail kindly refer this link click…

Angular PercentPipe  - Angular provides a PercentPipe and it is used to format a number as a percentage according to below rules. The expression rule with percent - {{  value_expression  |  percent  [ :  digitsInfo  [ :  locale  ] ] }} The input value to be formatted as a percentage and it can be any type. The digitsInfo is optional string parameters and by default is undefined. The locale is optional string parameters and by default is undefined. The example as, < h2 > Result- {{marks | percent}} </ h2 > <!-- output result is - '98%'--> For more detail kindly refer this link click…

What Is Parameterizing Pipe? A pipe can accept any number of optional parameters to achieve output. The parameter value can be any valid template expressions. To add optional parameters follow the pipe name with a colon (:). Its looks like-  currency: 'INR' In the following example – < h2 > The birthday is - {{ birthday | date:"MM/dd/yy" }}  </ h2 > <!-- Output - The birthday is - 10/03/1984 --> What Is Chaining Pipe? The chaining Pipe is used to perform the multiple operations within the single expression. This chaining operation will be chained using the pipe (I). In the following example, to display the birthday in the upper case- will need to use the inbuilt date-pipe and upper-case-pipe. In the following example – {{ birthday | date | uppercase}} <!-- The output is - MONDAY, MARCH 10, 1984 --> For more detail kindly refer the - https://www.code-sample.com/2018/05/angular-5-6-7-pipes-decorator.html

What Is Pure Pipe? Angular executes a pure pipe only when it detects a pure change to the input value. A pure change can be primitive or non-primitive. Primitive data are only single values, they have not special capabilities and the non-primitive data types are used to store the group of values. @ Pipe ({    name:   'currency' }) OR @ Pipe ({    name:   'currency' ,    pure:  true }) And another example for a pure pipe – import  {  Pipe ,  PipeTransform  }  from   '@angular/core' ; @ Pipe ({    name:   'currency' }) export   class   CurrencyPipe   implements   PipeTransform  {    transform ( value :  any ,  args ?:  any ):  any  {      if  (! value ) {        return   '1.00' ;      }    ...

What Is Impure Pipe? Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move. If you want to make a pipe impure that time you will allow the setting pure flag to false. @ Pipe ({    name:   'currency' ,    pure: false }) The example for impure pipe – import  {  Pipe ,  PipeTransform  }  from   '@angular/core' ; @ Pipe ({    name:   'currency' ,    pure: false }) export   class   CurrencyPipe   implements   PipeTransform  {    transform ( value :  any ,  args ?:  any ):  any  {      if  (! value ) {        return   '1.00' ;      }      return   value ;    } } For more detail kindly ref...