angular 2 alert box on click event by referencing the value in textbox

hi i want to display an alert box on clicking a button. where the value should be taken from the input text box.

here is the code..

this is the file in app.component.html

`<table>
<tr>
  <td>
      <label>No of Units Used:</label>
  </td>
  <td>
    <input type="number" [(ngModel)]="electricity"> 
  </td>
</tr>
  <input type="checkbox"/>Home <br>
  <input type="checkbox"/>Commercial <br>
  <input type="button" value="Calculate" (click)="return calculate()">
</table>`

now the logic which i wrote in app.component.ts

 `import { Component } from '@angular/core';
  import {ViewChild} from '@angular/core';
  import { NgIf } from '@angular/common';

   @Component({
   selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
   })
   export class AppComponent {
    title = 'Electricity Bill Claculation';
    electricity: any;
     msg: any = 'please enter the units';
  calculate()
   {
    let electricity = this.electricity ? parseFloat(this.electricity):0;

   if (electricity!=null  ) {
    alert('hii');
   }else {
   alert ('you entered the value');
   }

   //return  this.electricity;

   }
    }  `

now i want to use the value of input box and display a alert box where the logic is written in a function in .ts file.

i tried all ways which i know and guys anyone do help me in solving this..

thanks in advance.. and i don't know what are directives to use and i do need to write the logic in .ts file rather than using ngif in enter code here html file.