Issue
I am learning Angular and I am trying to do the following:
I want there to be an input of text and a button followed by a paragraph tag. I would like the text from the input to be displayed in the paragraph only when the button is pressed. I have done this so far:
<input type="text" class="form-control" />
<button (click)="saveText($event)">Save</button>
<p>{{ paragraphText }}</p>
export class ServersComponent implements OnInit {
paragraphText = '';
constructor() { }
saveText(event: any) {
this.paragraphText = (<HTMLInputElement>event.target).value;
}
If I use ngModel
that is a two-way data binding and that constantly updates the text in paragraph. However, I want it to be done only when the button Save
is pressed.
I'll really appreciate the help.
Solution
Without ngModel it can be achieved with template reference for input and value of that input when you click button.
component.html
<input type="text" #f [value]="text" />
<button (click)="onUpdateText(f.value)">Save</button>
<p>{{ text }}</p>
component.ts
export class AppComponent {
text = '';
onUpdateText(value: string): void {
this.text = value;
}
}
Answered By - Taras
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.