angular2 Adding two numbers view side

I want to be able to add the numbers from two textbox:

template: `
    <h1>Adding inputBox Numbers</h1>
    <p>Num1: <input [(ngModel)]="num1"></p>
    <p>Num2: <input [(ngModel)]="num2"></p>
    <p>The sum is: {{ num1 + num2 }}</p> `

Even if I defined both variables as numbers:

export class AppComponent {
    num1 : number;
    num2 : number; 
}

So if I perform this operation the result is OK

 <p>The sum is: {{ 1 + 1 }}</p> 

Result: 2

but if I use variables it preforms a concat so the result would be 11.

 <p>The sum is: {{ num1 + num2 }}</p>

result:11