angular4 example

by vaibhav saxena

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<my-app></my-app>

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	<h1>{{ name }}</h1>
    <div class="well">
  
    <div class="form-group">
      <label for="firstname" >First Name</label>
      <input class="form-control" [(value)]="firstName" (change)="validateName()" type="text" name="firstname" placeholder="Enter your first name">
    </div>
    <div class="form-group">
      <label for="phone_Num">Phone Num</label>
      <input class="form-control" type="number" name="phone_Num" 
      [(value)] = "phoneNum" (change)="validatePhone()"    placeholder="Enter your phone number">
    </div>
   <button (click)="increment()"  class="btn btn-primary" >Click {{ counter }}</button>
 
</div>
    
    
   
  `,
})
class HomeComponent {
		counter = 0;
    name = 'Form Validation'
    firstName = "foo"
    phoneNum = "7799551627"
    validatePhone(){
    
    	if(!!this.phoneNum && this.phoneNum.length >10){
      	
				alert("Length is more than 10");
      
      }
    
    };
    validateName(){
    
    };
    increment() {
    	this.counter++;
    }
}

const { BrowserModule } = ng.platformBrowser;

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

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