1.0.14 • Published 6 years ago
ngx-stringformat v1.0.14
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
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"