当我单击 Angular 中的按钮时，如何在输入字段中输入我写的内容？

Question

So I want to write something in the input textfield and then press the button and show it here <p>Hello {{inputValue}}</p> . I DO NOT want to use keyup for this. I am also saving it in localstorage which works right now but not if I remove keyup.

My .ts file:

  selector: 'app-dialouge',
  templateUrl: './dialouge.component.html',
  styleUrls: ['./dialouge.component.css']
})

export class DialougeComponent implements OnInit {
  inputValue: string;
  onKeyUp(event){
    this.inputValue = event.target.value;
  }

  saveBtn(): void {
    console.log("btn clicked: " + this.inputValue);
    window.localStorage.setItem("inputValue", this.inputValue);
    window.localStorage.getItem("inputValue");
  };
  clearStorage(){
    localStorage.clear();
    console.log("ls cleared");
  }


  constructor() { }

  ngOnInit(): void {

  }

}

my template file:

<input type="text" (keyup)="onKeyUp($event)" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{inputValue}}</p>

Answer 1

You can use ngModel instead of keyup into input .

change your HTML like below,

<input type="text" [(ngModel)]="inputValue" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{inputValue}}</p>

Remove onKeyUp method from your ts file.

Answer 2

You should use [(ngModel)] to change it with input , because it's more proper to use [(ngModel)] . keyup fires when you released your finger from keyboard.

<input type="text" [(ngModel)]="inputValue" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{afterButtonPressedValue}}</p>

Create another value to show and type: inputValue for typing and afterButtonPressedValue for showing in template.

And your ts will be:

  selector: 'app-dialouge',
  templateUrl: './dialouge.component.html',
  styleUrls: ['./dialouge.component.css']
})

export class DialougeComponent implements OnInit {
  inputValue: string;
  afterButtonPressedValue = '';

  saveBtn(): void {
    console.log("btn clicked: " + this.inputValue);
    window.localStorage.setItem("inputValue", this.inputValue);
    window.localStorage.getItem("inputValue");
    this.afterButtonPressedValue = this.inputValue;
  };
  clearStorage(){
    localStorage.clear();
    console.log("ls cleared");
    this.afterButtonPressedValue = '';
  }


  constructor() { }

  ngOnInit(): void {

  }

}