具有多个输入的双向绑定

Question

I'm a beginner in Angular (I'm doing Angular 2, not Angular.js), and was trying to write something that would take two inputs and do something with them without any button-click (like two-way binding). For example, if I have two text inputs, I would like for another component (let's say a label) to contain both strings concatenated. Is there a way to do this?

Answer 1

Your basic template would look something like

    <input type="text" [(ngModel)]="first">
    <input type="text" [(ngModel)]="second">
    <label>{{first}} {{second}}</label>

This template is using two-way data binding using ngModel directive

Answer 2

Sure, it is possible. First, you have to get user input, like this:

@Component({
  selector: 'app-key-up2',
  template: `
    <input #box (keyup)="onKeyInput1(box.value)">
    <input #box (keyup)="onKeyInput2(box.value)">
    <p>{{input1}}{{input2}}</p>
  `
})
export class KeyUpComponent_v2 {
  input2 = ''
  input1 = '';
  onKeyInput1(value: string) {
    this.input1 = value
  }
 onKeyInput2(value: string) {
    this.input2 = value
  }
}

Then, just show the output inside your chosen tag, like so {{ }} .
Reference: https://angular.io/guide/user-input

EDIT: Oh, right, you could also use [(ng-model)] , see the above answer.