How to use Angular (6,7) Currency Pipe example

In the tutorial, Grokonez introduces how to use Angular CurrencyPipe with examples.

Related posts:
Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format
Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example
Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example
Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example

Continue reading “How to use Angular (6,7) Currency Pipe example”

Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

In the tutorial, we show how to work with Angular Built-in Uppercase, Lowercase and Titlecase pipes.

Related posts:
Angular 6 KeyValue Pipe
Angular Built-in DatePipe
Angular Custom Pipe | Pure & Impure Pipes
Angular Built-in SlicePipe

Related pages:

Continue reading “Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example”

Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example

In the tutorial, we show how to work with Angular impure built-in SlicePipe to create a new Array or String containing a subset of the elements.

The slice pipe in Angular is a pipe that can be used to slice an array or a string into a new array or string. It takes two arguments: the starting index and the ending index. The resulting array or string will include all the elements or characters from the starting index up to, but not including, the ending index.

For example:

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    
  • {{ item }}
` }) export class MyComponent { items = [1, 2, 3, 4, 5]; }

In this example, the slice pipe will slice the items array into a new array that includes only the elements at indices 1 and 2 (the second and third elements). The resulting array will be [2, 3], and the template will display a list with two list items: 2 and 3.

The slice pipe can also be used with strings. For example:

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    

{{ message | slice:0:5 }}

` }) export class MyComponent { message = 'Hello World'; }

In this example, the slice pipe will slice the message string into a new string that includes only the characters at indices 0 through 4 (the first five characters). The resulting string will be ‘Hello’, and the template will display a paragraph with the text ‘Hello’.

Related posts:
Angular Built-in KeyValue Pipe
Angular Built-in DatePipe
Angular Custom Pipe | Pure Pipe + Impure Pipe
Angular 6 Service – with Observable Data for Asynchronous Operation

Related pages:

Continue reading “Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example”

Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format

In the tutorial, we show how to work with Angular Built-in DatePipe to display Date object in UI.

Related posts:
Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Routing/Navigation – with Angular Router Service
Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Related pages:

Continue reading “Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format”

Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example

Angular 6.1 provides a new KeyValue pipe transforms Object or Map into an array of key value pairs. In the tutorial, we will show you how to iterate through Object, Map with KeyValue pipe.

Related posts:
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Routing/Navigation – with Angular Router Service
Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Related pages:

Continue reading “Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example”