title: angular 2 alert box on click event by referencing the value in textbox
body: <p>Hi I want to display an alert box on clicking a button, where the value should be taken from the input text box.</p>
  
  <p>Here is the code..</p>
  
  <h2>This is the file in app.component.html</h2>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;label&gt;No of Units Used:&lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;input type="number" [(ngModel)]="electricity"&gt; 
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;input type="checkbox"/&gt;Home &lt;br&gt;
    &lt;input type="checkbox"/&gt;Commercial &lt;br&gt;
    &lt;input type="button" value="Calculate" (click)="return calculate()"&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>Now the logic which I wrote in app.component.ts</h2>
  
  <pre><code>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;
  
     }
     }  
  </code></pre>
  
  <p>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.</p>
  
  <p>I don't know what are directives to use and I need to write the logic in .ts file rather than using <strong>ngif</strong> in enter code here html file.</p>
  
  <p>I tried all ways which I know and guys anyone do help me in solving this..</p>
  
  <p>Thanks in advance..</p>