title: Angular2 typescript - kendo ui grid column template (click) not working
body: <p>I am new to Angular and do not understand why the ng-if and (click) events are not working from kendo grid column template.</p>
  
  <p>I want a button which needs to be conditionally visible and on click I need to navigate to other page in spa. With command I couldn't dynamically handle the visibility based on cell value. So, chose template, but with template click event is not working.</p>
  
  <p>Here is my component:</p>
  
  <pre><code>import { Component, Output, Input } from '@angular/core';
  import { ReplaySubject } from 'rxjs/Rx';
  import { ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
  
  import { TWCGridComponent, PanelComponent } from 'infrastructure.export';
  import { IssueDTO } from 'issue.webmodel.export';
  
  import { IssueBusinessService } from '../../webBL/issue.business.service';
  
  declare var $: any, moment: any;
  
  @Component({
  selector: 'twc-issue-list',
  
  templateUrl:                   'webApp/issueDetail/Shared/sections/issueList/issue.list.template.html',
  directives: [ROUTER_DIRECTIVES, TWCGridComponent, PanelComponent],
  viewProviders: [],
  styles: [`
    :host { display: block; }
  `]
  })
  
  export class IssueListComponent {
  dataSource: Array&lt;IssueDTO&gt; = [];
  gridOptions: kendo.ui.GridOptions;
  child: JQuery;
  // private $el: JQuery;
  @Output() knownIssuesCount: ReplaySubject&lt;{}&gt; = new ReplaySubject(1);
  @Input() set searchParams(params: any) {
      if (params) {
          this.initSearch(params);
      }
  }
  constructor(private issueBusinessService: IssueBusinessService,
      private router: Router
  ) {
      this.gridOptions = {
          sortable: false,
          scrollable: false,
          columns: [
              {
                  field: "id", title: "Issue ID / Status / Summary", width: "40%",
                  template: `
                    &lt;div class="cellLine"&gt;#:id# \/ &lt;span class='status #:statusName.toLowerCase().replace(/ /g, '')#'&gt;#:statusName.toUpperCase()#&lt;/span&gt;&lt;/div&gt;
                    &lt;div class="cellLine"&gt;#:title#&lt;/div&gt;`
              },
              {
                  field: "category", title: "Category / Type", width: "30%",
                  template: `
                    &lt;div class="cellLine"&gt;#:primaryIssueCategoryName#&lt;/div&gt;
                    &lt;div class="cellLine"&gt;#:primaryIssueCategoryTypeName#&lt;/div&gt;
                  `
              },
              {
                  field: "updateTime", title: "Created / Updated", width: "20%",
                  template: this.gridFormatters.lastUpdate
              },
              {
                  field: "command", hidden: false,                   
                  template: `&lt;div&gt;&lt;button type="button" onclick="toggleOrder()" class='btn btn-rounded #:readAllowed# icon-twc-08'&lt;/button&gt;&lt;/div&gt;`                   
      };
      /* tslint:disable */
      function toggleOrder() {
          alert("hey");
      }
      /* tslint:enable */     
  }
  toggleOrder() {
      alert("hey");
  }
  }
  </code></pre>