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 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...

Angular DatePipe  - The DatePipe is used to format a date with the help of locale rules. {{  value_expression  |  date  [ :  format  [ :  timezone  [ :  locale  ] ] ] }} The Example for date pipe – The full date provides you full date for the date. The short date converts the date to a short date and the long date provides you long date for the date. < h3 > {{TodayDate}} </ h3 >   < h3 > {{TodayDate | date:'shortDate'}} </ h3 >   < h3 > {{TodayDate | date:'longDate'}} </ h3 >   < h3 > {{TodayDate | date:'fullDate'}} </ h3 > For more detail kindly refer this link click…