How to use the angular2/angular2.Component function in angular2

// Services
import {GameService}  from '../services/GameService';

// Components
import {Board} from './board/board';

const ANGULAR_DIRECTIVES = [
  // Angular's core directives
  CORE_DIRECTIVES,
  // Angular's form directives
  FORM_DIRECTIVES,
  // Angular's router
  ROUTER_DIRECTIVES
];

@Component({
  selector: 'tictactoe',
  bindings: [ GameService ],
  directives: [
    ANGULAR_DIRECTIVES,
    //
    Board
  ],
  template:`
  <div style="padding: 0 16px;">
    <h1>Tic Tac Toe</h1>
    <h2>{{ game.winner }} won!</h2>
    <h2>draw</h2>
    <button>reset</button>

    
</div>

/// 
 
 import {Directive, LifecycleEvent, Attribute, Host, SkipSelf, EventEmitter, NgFor, NgIf, Component, View} from 'angular2/angular2';

 
 @Component({
  selector: 'conditionlet users-host-conditionlet'
 })
 @View({
   directives: [NgFor],
   template: `
    <div class="col-sm-5">
      <select class="form-control clause-selector">
        <option value="{{x.id}}">{{x.label}}</option>
      </select>
    </div>
    <div class="col-sm-2">
      <h4 class="separator"></h4>
    </div>
    <div class="col-sm-5">
      <input class="form-control condition-value" type="text">
    </div>

import {Feeds} from './components/feeds/feeds';
import {Login} from './components/login/login';
import {Signup} from './components/signup/signup';
import {Auth} from './services/auth';

/*
 * Angular Directives
 */
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {ROUTER_DIRECTIVES} from 'angular2/router';

/*
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'reader-app',
})
@View({
  // needed in order to tell Angular's compiler what's in the template
  directives: [ RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES ],
  template: `
    
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button></div></div></div>

this.currentTemp = Math.floor(current.currently.temperature);
      } else {
        this.currentTemp = Math.floor(current.currently.temperature);
      }
      if(units == 'f') {
        this.highTemp = Math.floor(current.daily.data[0].temperatureMax);
        this.lowTemp = Math.floor(current.daily.data[0].temperatureMin);
      } else {
        this.highTemp = Math.floor(current.daily.data[0].temperatureMax);
        this.lowTemp = Math.floor(current.daily.data[0].temperatureMin);
      }
    }
  }
}

@Component({
  selector: 'background-cycler',
  inputs: [
    'image'
  ],
  template: '<div class="bg-image"></div>'
})
export class BackgroundCycler {
  constructor(elementRef: ElementRef) {
    this.elementRef = elementRef;
    this.el = elementRef.nativeElement;
  }
  onInit() {
    this.imageEl = this.el.children[0];
  }
  onAllChangesDone() {
    var item = this.image;

import {Component, View, bootstrap} from 'angular2/angular2';

import {RouteConfig, RouterOutlet, RouterLink, ROUTER_BINDINGS} from 'angular2/router';

import {OverviewComponent} from './components/overview/overview.js';
import {AnalyticsComponent} from './components/analytics/analytics.js';
import {ReportsComponent} from './components/reports/reports.js';

import {NavbarComponent} from './components/navbar/navbar.js';
import {SidebarComponent} from './components/sidebar/sidebar.js';
import {SearchService} from 'services/search.js';

@Component({
  selector: 'app',
  viewBindings: [SearchService]
})
@View({
  directives: [NavbarComponent, SidebarComponent, RouterOutlet, RouterLink],
  templateUrl: 'app.html'
})
@RouteConfig([
  {path: '/', redirectTo: '/overview'},
  {path: '/overview', component: OverviewComponent, as: 'overview'},
  {path: '/analytics', component: AnalyticsComponent, as: 'analytics'},
  {path: '/reports', component: ReportsComponent, as: 'reports'}
])
class AppComponent {
  constructor() {
  }

import {Component, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'hello-world',
  template: `<h1>Hello from TypeScript and {{ name }}!!!</h1>`
})
class HelloWorldComponent {
  name: string;
  constructor() {
    this.name = 'Angular 2';
  }
}

bootstrap(HelloWorldComponent);

this.tabs = [];
  }
  select(idx:number) {
    this.selectedIdx = idx;
  }
  addTab(tab:Tab) {
    let idx = this.tabs.length;
    this.tabs.push(tab);
    return idx;
  }
  getSelectedIndex() {
    return this.selectedIdx;
  }
}

@Component({
  selector: 'tab',
  properties: ['title']
})
@View({
  template: `
    <div>
      
    </div>
  `
})
export class Tab {
  public title:string;
  public index:number;
  constructor(@Host() private parent:Tabs) {
    this.index = parent.addTab(this);
  }

`
})
class ProductsList {
    productList:Array;
    click:EventEmitter;

    constructor() {
        this.click = new EventEmitter();
    }

    clicked(product) {
        this.click.next(product);
    }
}

@Component({
    selector: 'fiddle-0003-InventoryApp'
})
@View({
    directives: [ProductsList],
    template: `
  <div class="inventory-app">
    
    
  </div>
  `
})
class Fiddle {
    products:Array;

    constructor() {
        this.products = [];

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'ot-site'
})
@View({
  template: `
    <div class="ot-site">
      <div class="ot-site--head">
        <img src="//guestcenter.opentable.com/Content/img/icons/icon/2x/ot-logo-2x.png" class="ot-site--logo">
        
      </div>
      <div class="ot-site--menu">
        
      </div>
      <div class="ot-site--body">
        
      </div>
      <div class="ot-site--foot"></div></div>

@View({
    directives: [NgFor, NgIf],
    template: `
  <div class="product-department">
    <span>
      <a href="#">{{ name }}</a>
      <span>{{i &lt; (product.department.length-1) ? '&gt;' : ''}}</span>
    </span>
  </div>
  `
})
class ProductDepartment {
    product:Product;
}

@Component({
    selector: 'price-display',
    inputs: ['price']
})
@View({
    template: `
  <div class="price-display">\${{ price }}</div>
  `
})
class PriceDisplay {
    price:number;
}

@Component({
    selector: 'product-row',
    inputs: ['product'],
    outputs: ['click']