Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // user.component.html
- <div>
- <div *ngFor="let user of users" (click)="edit(user)">
- <span>{{ user.id }}</span>
- <span *ngIf="!user.isEditable">{{ user.email }}</span>
- <input *ngIf="user.isEditable" [(ngModel)]="user.email" (keypress)="$event.keyCode == 13 && save(user) || $event.keyCode" />
- </div>
- </div>
- // user.component.ts
- import { Component } from '@angular/core';
- export class User {
- id: number;
- email: string;
- isEditable: false;
- }
- @Component({
- selector: 'user',
- templateUrl: './user.component.html',
- styleUrls: ['./user.component.css']
- })
- export class UserComponent {
- /*user: User = {
- id: 1,
- email: 'localhost@test.local',
- password: 'password'
- }*/
- users: User[] = [
- {id: 1, email: 'email_001@localhost', isEditable: false},
- {id: 2, email: 'email_002@localhost', isEditable: false},
- {id: 3, email: 'email_003@localhost', isEditable: false},
- {id: 4, email: 'email_004@localhost', isEditable: false},
- {id: 5, email: 'email_005@localhost', isEditable: false}
- ]
- edit(user) {
- user.isEditable = true;
- }
- save(user) {
- user.isEditable = false;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement