<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
Hello, i will show how to create currency format directive in textbox angular 4
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { MycurrencyPipe } from './pipe/mycurrency.pipe';
import { MycurrencyDirective } from './directive/mycurrency.directive';
@Component({
selector: 'my-app',
providers:[MycurrencyPipe],
template: `
<div>
<h2>Hello {{name}}</h2>
<h3> Test currency format directive in input field <br/> (INDONESIAN FORMAT CURRENCY)</h3>
<div>
<input appMycurrency type="text" />
</div>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
@NgModule({
imports: [
BrowserModule,
],
declarations: [ App, MycurrencyPipe,
MycurrencyDirective ],
bootstrap: [ App ]
})
export class AppModule {}
import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';
import {MycurrencyPipe} from '../pipe/mycurrency.pipe';
@Directive({
selector: '[appMycurrency]'
})
export class MycurrencyDirective implements OnInit{
private el: any;
constructor(
private elementRef:ElementRef,
private formatcurrencypipe:MycurrencyPipe
) {
this.el = this.elementRef.nativeElement;
}
ngOnInit(){
this.el.value = this.formatcurrencypipe.transform(this.el.value);
}
@HostListener("focus",["$event.target.value","$event"])
onFocus(value,event) {
this.el.value = this.formatcurrencypipe.parse(value); // opossite of transform
if(event.which== 9)
{
return false;
}
this.el.select();
}
@HostListener("blur", ["$event.target.value"])
onBlur(value) {
this.el.value = this.formatcurrencypipe.transform(value);
}
@HostListener('keydown', ['$event']) onKeyDown(event) {
let e = <KeyboardEvent> event;
if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+C
(e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+V
(e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+X
(e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
}
import { Pipe, PipeTransform } from '@angular/core';
const padding = "000000";
@Pipe({
name: 'mycurrency'
})
export class MycurrencyPipe implements PipeTransform {
private prefix: string;
private decimal_separator:string;
private thousands_separator:string;
private suffix:string;
constructor(){
this.prefix='Rp.';
this.suffix='';
this.decimal_separator='.';
this.thousands_separator = ',';
}
transform(value: string, fractionSize:number = 0 ): string {
if(parseFloat(value) % 1 != 0)
{
fractionSize = 2;
}
let [ integer, fraction = ""] = (parseFloat(value).toString() || "").toString().split(".");
fraction = fractionSize > 0
? this.decimal_separator + (fraction+padding).substring(0, fractionSize) : "";
integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousands_separator);
if(isNaN(parseFloat(integer)))
{
integer = "0";
}
return this.prefix + integer + fraction + this.suffix;
}
parse(value: string, fractionSize: number = 2): string {
let [ integer, fraction = "" ] = (value || "").replace(this.prefix, "")
.replace(this.suffix, "")
.split(this.decimal_separator);
integer = integer.replace(new RegExp(this.thousands_separator, "g"), "");
fraction = parseInt(fraction, 10) > 0 && fractionSize > 0
? this.decimal_separator + (fraction + padding).substring(0, fractionSize)
: "";
return integer + fraction;
}
}