Advertisement
Guest User

Untitled

a guest
Jul 27th, 2017
439
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // user.component.html
  2. <div>
  3.     <div *ngFor="let user of users" (click)="edit(user)">
  4.         <span>{{ user.id }}</span>
  5.         <span *ngIf="!user.isEditable">{{ user.email }}</span>
  6.         <input *ngIf="user.isEditable" [(ngModel)]="user.email" (keypress)="$event.keyCode == 13 && save(user) || $event.keyCode" />
  7.     </div>
  8. </div>
  9.  
  10. // user.component.ts
  11. import { Component } from '@angular/core';
  12.  
  13. export class User {
  14.     id: number;
  15.     email: string;
  16.     isEditable: false;
  17. }
  18.  
  19. @Component({
  20.   selector: 'user',
  21.   templateUrl: './user.component.html',
  22.   styleUrls: ['./user.component.css']
  23. })
  24. export class UserComponent {
  25.   /*user: User = {
  26.       id: 1,
  27.       email: 'localhost@test.local',
  28.       password: 'password'
  29.   }*/
  30.  
  31.   users: User[] = [
  32.     {id: 1, email: 'email_001@localhost', isEditable: false},
  33.     {id: 2, email: 'email_002@localhost', isEditable: false},
  34.     {id: 3, email: 'email_003@localhost', isEditable: false},
  35.     {id: 4, email: 'email_004@localhost', isEditable: false},
  36.     {id: 5, email: 'email_005@localhost', isEditable: false}
  37.   ]
  38.  
  39.   edit(user) {
  40.       user.isEditable = true;
  41.   }
  42.  
  43.   save(user) {
  44.       user.isEditable = false;
  45.   }
  46. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement