Anil Singh | Code-sample.com

Angular TitleCasePipe  – The TitleCasePipe is used to converts the text (string type data) in which the first alphabet of each word is made capital latter and the rest will be in the small case letter. The expression with titlecase - {{  value_expression  |  titlecase  }} The example as, import  {  Component  }  from   '@angular/core' ; @ Component ({    selector:   'titlecase-pipe' ,    template:   `<div>      <input type="text" #name (keyup)="changetitlecase(name.value)">      <p>titlecase - <h2>'{{value | titlecase}}'</h2>    </div>` }) export   class   titlecasePipeComponent  {    value :  string ;    changetitlecase ( value :  string ) {      this . value  =  value ;    } } For mor...

Angular UpperCasePipe  – Angular provides an UpperCasePipe and it is used to transforms given a text to uppercase. The expression with uppercase - {{  value_expression  |  uppercase  }} The example as, import  {  Component  }  from   '@angular/core' ; @ Component ({    selector:   'uppercase-pipe' ,    template:   `<div>      <input type="text" #name (keyup)="changeUpperCase(name.value)">      <p>UpperCase - <h2>'{{value | uppercase}}'</h2>    </div>` }) export   class   UpperCasePipeComponent  {    value :  string ;    changeUpperCase ( 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…

Angular AsyncPipe  – Angular provide a special kind of pipe that are called AsyncPipe and the AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. The AsyncPipe allows you to bind your HTML templates directly to values that arrive asynchronously manner that is a great ability for the promises and observables. The expression with Async pipe- {{  obj_expression  |  async  }} OR < ul >< li  * ngFor = "let account of accounts | async" > {{account.ACNo }} </ li ></ ul > The object expression can be observable, promise, null, or undefined. The example for AsyncPipe - @ Component ({    selector:   'app-async-pipe' ,    template: `<ul><li *ngFor="let account of accounts | async">    A/C No- {{account.ACNo }} </li></ul>` ,    styleUrls:  [ './async-pipe.component.css' ] }) export   c...