Enjoy the String.format() java method as an Angular pipe
npm install ngx-stringformatterminal
$ npm install ngx-stringformat --save
`
$3
`typescript
import {NgStringFormatModule} from 'ngx-stringformat';
@NgModule({
// ...
imports: [
// ...
NgStringFormatModule
]
})
`
$3
`typescript
import { StringFormatPipe } from 'ngx-stringformat';
@Component()
export class AppComponent {
constructor(private stringFormat: StringFormatPipe) {}
// ..
}
`
$3
`typescript
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
$3
`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"
`
$3
`html
{{ 'My name is %s' | stringFormat : 'Sam' }}
{{ 'Hi %2$s %1$s' | stringFormat : 'Norris' : 'Chuck' }}
{{ 'Dear %10s %10s' | stringFormat : 'Chuck' : 'Norris' }}
`
How to use stringFormat pipe for number formatting
$3
`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"
`
$3
`html
{{ '%d karat of magic in the air' | stringFormat : 24 }}
{{ '%d karat of magic in the air' | stringFormat : '24' }}
{{ '%2$d+%2$d=%1$d' | stringFormat : 2 : 1 }}
{{ 'I am %.0d years old' | stringFormat : 36 }}
{{ 'My rate is:%10' | stringFormat : 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.
`typescript
import { StringFormatPipe } from 'ngx-stringformat';
@Component()
export class AppComponent {
evaluate() {
console.log(new StringFormatPipe('fr-FR').transform('%d', 24));
}
// ..
}
`
Error messages
$3
`typescript
this.stringFormat.transform('Hi %2$s %1$s' | 'Norris' : 'Chuck');
// Returns: "Hi Chuck [Error! Cannot find value in args for placeholder n°2]"
`
$3
`typescript
this.stringFormat.transform('I am %.0d years old' | 36y );
// Returns: "I am [Error! Cannot parse value as a number: (36y)] years old"
``