ngx-stringformat

Useful pipe for Angular inspired by the java.util.lang.format() method

Try the StringFormat pipe online using this website

Table of contents

• Installation
• String
• Number
• Error management

Installation

Use npm to install the package

$ npm install ngx-stringformat --save 

Add into your module imports the NgStringFormatModule in order to add the pipe.

import {NgStringFormatModule} from 'ngx-stringformat';

@NgModule({
 // ...
 imports: [
   // ...
   NgStringFormatModule
 ]
})

Pipes are also injectable and can be used in Components / Services / etc..

import { StringFormatPipe } from 'ngx-stringformat';

@Component()
export class AppComponent {
  constructor(private stringFormat: StringFormatPipe) {}
  // ..
}

Pipes can be created manually to change the locale

import { StringFormatPipe } from 'ngx-stringformat';

@Component()
export class AppComponent {
  evaluate() {
    console.log(new StringFormatPipe('fr-FR').transform('%d', 24));
  }
  // ..
}

How to use use stringFormat pipe for string formatting

Typescript

this.stringFormat.transform('My name is %s' | 'Sam' );
// Returns: "My name is sam"

this.stringFormat.transform('Hi %2$s %1$s' | 'Norris' : 'Chuck');
// Returns: "Hi Chuck Norris"

this.stringFormat.transform('Dear %10s %10s' | 'Chuck' : 'Norris');
// Returns: "Dear           Chuck          Norris"

Html

{{ 'My name is %s' | stringFormat : 'Sam' }}
<!-- Display: "My name is sam" -->

{{ 'Hi %2$s %1$s' | stringFormat : 'Norris' : 'Chuck' }}
<!-- Display: "Hi Chuck Norris" -->

{{ 'Dear %10s %10s' | stringFormat : 'Chuck' : 'Norris' }}
<!-- Display: "Dear           Chuck          Norris" -->

How to use stringFormat pipe for number formatting

Typescript

this.stringFormat.transform('%d karat of magic in the air' | 24 );
// Returns: 24.00 karat magic of magic in the air"

this.stringFormat.transform('%d karat of magic in the air' | '24' );
// Returns: 24.00 karat magic of magic in the air"

this.stringFormat.transform('%2$d+%2$d=%1$d' | 2 : 1);
// Returns: "1.00+1.00=2.00"

this.stringFormat.transform('I am %.0d years old' | 36);
// Returns: "I am 36 years old"

Html

{{ '%d karat of magic in the air' | stringFormat : 24 }}
<!-- Display: "24.00 karat magic of magic in the air" -->

{{ '%d karat of magic in the air' | stringFormat : '24' }}
<!-- Display: "24.00 karat magic of magic in the air" -->

{{ '%2$d+%2$d=%1$d' | stringFormat : 2 : 1 }}
<!-- Display: "1.00+1.00=2.00" -->

{{ 'I am %.0d years old' | stringFormat : 36 }}
<!-- Display: "I am 36 years old" -->

{{ 'My rate is:%10' | stringFormat : 120 }}
<!-- Display: "My rate is:       120" -->

How to change locale

Locale is managed at the application level.

Please consult the Setting up the locale of your app chapter to change your LOCALE_ID in your @NgModule.

Nevertheless, the local can be set manually using at the component level.

import { StringFormatPipe } from 'ngx-stringformat';

@Component()
export class AppComponent {
  evaluate() {
    console.log(new StringFormatPipe('fr-FR').transform('%d', 24));
  }
  // ..
}

Error messages

Index not found

this.stringFormat.transform('Hi %2$s %1$s' | 'Norris' : 'Chuck');
// Returns: "Hi Chuck [Error! Cannot find value in args for placeholder n°2]"

Cannot parse number

this.stringFormat.transform('I am %.0d years old' | 36y );
// Returns: "I am [Error! Cannot parse value as a number: (36y)] years old"