import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Basic TextBox</h2> <p>The TextBox allows users to enter a string through the inputing box.</p> <div style="margin-bottom:10px;display:inline-block;margin-right:1em"> <label [for]="t1" align="top">First Name:</label> <eui-textbox #t1 [(ngModel)]="fname" iconCls="icon-man" placeholder="First name"></eui-textbox> </div><div style="margin-bottom:10px;display:inline-block"> <label [for]="t2" align="top">Last Name:</label> <eui-textbox #t2 [(ngModel)]="lname" placeholder="Last name"></eui-textbox> </div> <div style="margin-bottom:10px"> <label [for]="t3" align="top">Address:</label> <eui-textbox #t3 [(ngModel)]="addr" style="width:25em"></eui-textbox> </div> <div style="margin-bottom:10px"> <label [for]="t4" align="top">Company:</label> <eui-textbox #t4 [disabled]="true" placeholder="Company" style="width:25em"></eui-textbox> </div> <p *ngIf="fname">First Name: {{fname}}</p> <p *ngIf="lname">Last Name: {{lname}}</p> <p *ngIf="addr">Address: {{addr}}</p> ` }) export class AppComponent { fname: string; lname: string; addr: string; }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);