title: Angular2 passing value from template to function on buttonclick
body: <p>I have an Angular2 form template of component like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="input-group"&gt;
      &lt;label&gt; Masukkan nik &lt;/label&gt;
      &lt;input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" #name&gt;
    &lt;/div&gt;
       &lt;button (click)="verifyNik(name.value)"&gt;Verify&lt;/button&gt;
  
  &lt;/div&gt; &lt;!-- /container --&gt;
  </code></pre>
  
  <p>What I want to do if I click the <code>Verify</code> button is to get the value of name input and pass it to my function in my component, which is like this below:</p>
  
  <pre><code>verifyNik(nik){
      if(this.idparam==nik.substring(1,4)){
        console.log("true");
      }
    }
  </code></pre>
  
  <p>So, if the value of input name in template (and substring it) is equal to my <code>id.param</code> (which I get from subscribe id in Angular route), then the console log will be true; but the problem is that nothing comes out. How can I fix this?</p>
  
  <p>My code to get my <code>id.param</code> is this:</p>
  
  <pre><code>private idchild:any;
    f: FormGroup;
    private idparam:any;
  
  
    constructor(
      private fb: FormBuilder,
      private servicedev:DevService,
      private complaintservice:ComplaintService,
      private router: ActivatedRoute
    ) { }
  
       ngOnInit() {
          this.idchild = this.router.params.subscribe(params =&gt; {
  
             let id = params['id'];
             this.idparam=id;
  
            // Retrieve Pet with Id route param
  
         });
  </code></pre>