Advertisement
Guest User

Untitled

a guest
Jul 27th, 2017
72
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // app.module.ts
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { NgModule } from '@angular/core';
  4.  
  5. import { AppComponent } from './app.component';
  6. import { UserComponent } from './user.component';
  7.  
  8. import { FormsModule }   from '@angular/forms';
  9.  
  10. @NgModule({
  11.   declarations: [
  12.     UserComponent
  13.   ],
  14.   imports: [
  15.     BrowserModule,
  16.     FormsModule
  17.   ],
  18.   providers: [],
  19.   bootstrap: [
  20.     UserComponent
  21.   ]
  22. })
  23. export class AppModule { }
  24.  
  25.  
  26. // user.component.ts
  27. import { Component } from '@angular/core';
  28.  
  29. export class User {
  30.     id: number;
  31.     email: string;
  32.     password: string;
  33. }
  34.  
  35. @Component({
  36.   selector: 'user',
  37.   templateUrl: './user.component.html',
  38.   styleUrls: ['./user.component.css']
  39. })
  40. export class UserComponent {
  41.   user: User = {
  42.       id: 1,
  43.       email: 'localhost@test.local',
  44.       password: 'password'
  45.   }
  46. }
  47.  
  48.  
  49. // user.component.html
  50. <div>
  51.     <div>{{ user.email }}</div>
  52.     <div>
  53.       <label>name: </label>
  54.       <input [(ngModel)]="user.email" placeholder="name">
  55.     </div>
  56. </div>
  57.  
  58. // index.html
  59. <!doctype html>
  60. <html lang="en">
  61. <head>
  62.   <meta charset="utf-8">
  63.   <title>MyApp</title>
  64.   <base href="/">
  65.  
  66.   <meta name="viewport" content="width=device-width, initial-scale=1">
  67.   <link rel="icon" type="image/x-icon" href="favicon.ico">
  68. </head>
  69. <body>
  70.   <user></user>
  71. </body>
  72. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement