angular4 example

by tmtron

HTML

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

TypeScript

let { Component, NgModule, ViewChild } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	<input type="text" #elem (keypress)="clearInput($event)">
  `,
})
class HomeComponent {
  	//@ViewChild( 'elem' ) public element;
		clearInput( $event: KeyboardEvent ) {
    const htmlInputElement = $event.target as HTMLInputElement;
    	htmlInputElement.value = $event.key;
      htmlInputElement.select();
      return false;
      /*
      if ( e.keyCode === 44 ) {
      	const htmlInputElement = e.target as HTMLInputElement;
        htmlInputElement.value = htmlInputElement.value[1] || '';
  			// this.element.nativeElement.value = '';
        return false;
      } else {
      	console.log('Not a comma');
      }
      */
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);