title: How do I display input change in a dialog in Angular?
body: <p>I got a dialog, which displays numbers. In the last row I want to display the sum of these 10 numbers, while the user changes these numbers. 
  So for example if the user changes the 50 to 60 I want the last row to display 110.
  What is a good way to implement that?
  Following some html of the dialog:</p>
  
  <p><a href="https://i.stack.imgur.com/lh29R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lh29R.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;h1 mat-dialog-title&gt;Rechenleistung anpassen&lt;/h1&gt;
  &lt;div mat-dialog-content [formGroup]="form"&gt;
  
    &lt;mat-form-field&gt;
      &lt;input matInput type="number" #input placeholder="Leistung von Miner 1" formControlName="power1"
             required min="1" max="100"&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-card-content&gt;
      Die Leistung muss insgesamt 100 sein! Momentane Leistung: {{power1 + power2 + power3 + power4 +
      power5 + power6 + power7 + power8 + power9 + power10}}
    &lt;/mat-card-content&gt;
  
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-raised-button (click)="close()"&gt;Zurück&lt;/button&gt;
    &lt;button mat-raised-button (click)="save()" cdkFocusInitial&gt;Senden&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>