Capture input value and display the value on button click with angular material input

Question

I am working on Angular and had a simple code as shown below. How do I capture the input value when the "set" button is clicked and display on displayText through string interpolation?

<div>
    <h3>You just entered: <span>{{displayText}}</span></h3>
</div>
<div>
    <mat-form-field>
        <input matInput placeholder="Insert your text">
    </mat-form-field>
</div>
<div>
    <button mat-button>Set</button>
</div>

Answer 1

Just create a template variable on your input field: #input

And handle the click event on the button:

(click)="displayText = input.value"

Give this a try:

<div>
    <h3>You just entered: <span>{{displayText}}</span></h3>
</div>
<div>
  <mat-form-field>
    <input matInput placeholder="Insert your text" #input>
  </mat-form-field>
</div>
<div>
  <button mat-button color="primary" (click)="displayText = input.value">Set</button>
</div>

---

Here's a Working Sample StackBlitz for your ref.