Skip to main content

Posts

Showing posts with the label 7 Inbuilt Pipes

What Is Angular TitleCasePipe?

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

What Is Angular AsyncPipe?

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

What Are Inbuilt Pipes in Angular?

Angular defines various Pipes API lists  – That is called Inbuilt Pipes. 1)        DatePipe 2)        CurrencyPipe 3)        AsyncPipe 4)        DecimalPipe 5)        PercentPipe 6)        UpperCasePipe 7)        LowerCasePipe 8)        TitleCasePipe 9)        JsonPipe 10)    SlicePipe 11)    I18nSelectPipe 12)    And many more Similarly, you can also create a custom pipe (as per your needs) and configure in a module that is globally available in across angular apps. Angular DatePipe  - The DatePipe is used to format a date with the help of locale rules. {{  value_expression  |  date  [ :  format  [ :  timezon...
Read more