Как поменять местами вводимые значения текста при нажатии кнопки, используя угловые 2 или угловые 4?

Question

У меня есть два текстовых поля name1 и name2, после их заполнения, если я нажму кнопку swap it, значения текстового поля должны поменяться местами. введите описание изображения здесь

После нажатия поменяйте местами кнопку введите описание изображения здесь

Answer 1

вы можете использовать ссылочную переменную для достижения этого, в файле HTML

<input type='text' #v>
<input type="text" #v1>
<button (click)='x=v.value; v.value = v1.value; v1.value = x'>Swap</button>

Answer 2

Использование директивы ngModel связывает входные данные

component.html

<input type="text" [(ngModel)]="demo" >
<input type="text" [(ngModel)]="demo1" >
<button (click)="onSwap(demo,demo1)">Swap</button>

component.ts

 import { Component } from '@angular/core';   
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';
      demo;
      demo1;
      onSwap(demo,demo1){
        this.demo1=demo;
        this.demo=demo1;
      }
    }

Пример: https://stackblitz.com/edit/swap