1.

List down some of the pipes that are built into Angular?

Answer»
  • DatePipe - is used to format dates. It takes the valid javascript date OBJECTS as inputs and formats the data according to the specified options.
    TS Code
    today: new Date(); HTML Code {{ today | date }}
  • CurrencyPipe - formats numbers as currencies and places the currency SYMBOL as well.
    TS Codeamount: number = 5000;HTML Code{{ amount | currency: 'INR'}}
  • AsyncPipe - is used to unwrap promises and observables and renders the RESULTS as and when it is available..

    TS Code
    count: Observable<number>;
constructor() { this.countdown(); } countdown() {      let i = 100;      this.count = new Observable((observer) => {    let id;        id = setInterval(() => {          if(i > 0) {            i = i-1;            observer.next(i);          } else {            clearInterval(id);            observer.complete();          }        }, 50);     }) }

HTML Code

{{ count | async }}
  • DecimalPipe - is used to format numbers with decimal digits. It LETS us specify the minimum and maximum number of digits after the decimal.

    TS Code
amount: number = 5000;

HTML Code

{{ amount | decimal: '0.0-2'}}
  • TitleCasePipe - is used to change the case of the text to titlecase.

    TS Code
name: string = 'ZEOLEARN';

HTML Code

{{ name | titlecase}}
  • JsonPipe - is used to render out json data on the page.

    TS Code
person: any = { name: 'Zeolearn', id: 12 }

HTML Code

{{ person | json }}
  • SlicePipe - is used with ngFor to slice the ARRAY and only render out the remaining elements from the array.

    TS Code
people: string[] = ["A", "B", "C", "D"];

HTML Code

<div *ngFor="let char of people | slice:1">    {{char}} </div>
  • PercentPipe - is used to display decimals numbers as percentages.

    TS Code
a: number = 0.259;

HTML Code

A: {{ a | percent}}
  • UpperCasePipe - is used to display strings in all uppercase alphabets.

    TS Code
name: string = "ZEOLEARN";

HTML Code

{{ name | uppercase}}
  • LowerCasePipe - is used to display strings in all lowercase alphabets.

    TS Code
name: string = "ZEOLEARN";

HTML Code

{{ name | lowercase}}


Discussion

No Comment Found

Related InterviewSolutions