title: angular2 Adding two numbers view side
body: <p>I want to be able to add the numbers from two textbox:</p>
  
  <pre><code>template: `
      &lt;h1&gt;Adding inputBox Numbers&lt;/h1&gt;
      &lt;p&gt;Num1: &lt;input [(ngModel)]="num1"&gt;&lt;/p&gt;
      &lt;p&gt;Num2: &lt;input [(ngModel)]="num2"&gt;&lt;/p&gt;
      &lt;p&gt;The sum is: {{ num1 + num2 }}&lt;/p&gt; `
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MBpYn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MBpYn.png" alt="enter image description here"></a></p>
  
  <p>Even if I defined both variables as numbers:</p>
  
  <pre><code>export class AppComponent {
      num1 : number;
      num2 : number; 
  }
  </code></pre>
  
  <p>So if I perform this operation the result is OK </p>
  
  <pre><code> &lt;p&gt;The sum is: {{ 1 + 1 }}&lt;/p&gt; 
  </code></pre>
  
  <p>Result: 2</p>
  
  <p>but if I use variables it preforms a concat so the result would be 11.</p>
  
  <pre><code> &lt;p&gt;The sum is: {{ num1 + num2 }}&lt;/p&gt;
  </code></pre>
  
  <p>result:11</p>