title: How to bind an Angular 2 expression and TypeScript method?
body: <p>What I am trying to do is to show the full name, when first name and last name are entered. </p>
  
  <p>This works:</p>
  
  <pre><code>&lt;h1 [hidden]="!firstName || !lastName"&gt;Hello {{lastName + ', ' + firstName}}!&lt;/h1&gt;
  </code></pre>
  
  <p>This does not work (what is the correct way of invoking a method defined in the class?):</p>
  
  <pre><code>&lt;!--h1 [hidden]="!firstName || !lastName"&gt;Hello {{fullName()}}!&lt;/h1!--&gt;
  </code></pre>
  
  <p>This does not work either:</p>
  
  <pre><code>&lt;button ng-click="alertFullName()"&gt;show full name&lt;/button&gt;
  </code></pre>
  
  <p>Here are the files:
  index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script&gt;
        System.config({
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {'src': {defaultExtension: 'ts'}} 
        });
      &lt;/script&gt;
  
      &lt;!-- 3. Bootstrap --&gt;
      &lt;script&gt;
        System.import('angular2/platform/browser').then(function(ng){
          System.import('src/hello_world').then(function(src) {
            ng.bootstrap(src.HelloWorld);
          });
        });
      &lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;!-- 4. Display the application --&gt;
    &lt;body&gt;
      &lt;hello-world&gt;Loading...&lt;/hello-world&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>src/hello_world.html:</p>
  
  <pre><code>&lt;label&gt;Name:&lt;/label&gt;
  &lt;input type="text" [(ngModel)]="firstName" placeholder="Enter first name here"&gt;
  &lt;input type="text" [(ngModel)]="lastName" placeholder="Enter last name here"&gt;
  &lt;hr&gt;
  &lt;h1 [hidden]="!firstName || !lastName"&gt;Hello {{lastName + ', ' + firstName}}!&lt;/h1&gt;
  &lt;!--h1 [hidden]="!firstName || !lastName"&gt;Hello {{fullName()}}!&lt;/h1!--&gt;
  &lt;button ng-click="alertFullName()"&gt;show full name&lt;/button&gt;
  </code></pre>
  
  <p>src/hello_world.ts:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
    // Declare the tag name in index.html to where the component attaches
    selector: 'hello-world',
  
    // Location of the template for this component
    templateUrl: 'src/hello_world.html'
  })
  export class HelloWorld {
    firstName: string = '';
    lastName: string = '';
    function fullName(): string {
      return firstName + ', ' + lastName;
    }
    function alertFullName() {
      alert(firstName + ', ' + lastName);
    }
  }
  </code></pre>