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

// login.component.js
import { Component, View, ViewEncapsulation } from 'angular2/core';
import { Router, RouterLink, ComponentInstruction, CanActivate  } from 'angular2/router';
import { CORE_DIRECTIVES,
    FormBuilder,
    Validators,
    Control,
    ControlGroup,
    FORM_DIRECTIVES } from 'angular2/common';
import { DataService } from '../../shared/services/data.service';
import { Auth } from '../auth/auth';
import { checkAuth } from '../auth/check_auth';

@Component({
    selector: 'login',
    providers: [DataService, Auth],
    directives: [RouterLink],
    templateUrl: 'src/app/auth_module/login/login.component.html',
    styles: [`
      body {
          background: #d2d6de;
      }
  `],
    encapsulation: ViewEncapsulation.None
})

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => {
    return checkAuth(next, previous);
})

// home.component.js
import { Component, View } from 'angular2/core';
import { Router, RouterLink, ComponentInstruction, CanActivate } from 'angular2/router';
import { CORE_DIRECTIVES, NgIf } from 'angular2/common';
import { DataService } from '../shared/services/data.service';
import { DashboardLayoutComponent } from '../dashboard_layout/dashboard_layout.component';
import { checkAuth } from '../auth_module/auth/check_auth';
import { Auth } from '../auth_module/auth/auth';

@Component({
  selector: 'home',
  providers: [DataService]
})

@View({
  templateUrl: 'src/app/home/home.component.html',
  directives: [DashboardLayoutComponent, NgIf]
})

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => {
  return checkAuth(next, previous);
})

export class HomeComponent {

  constructor(private _router: Router, private _auth: Auth) {

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.


import {Component, Input} from 'angular2/core';

import {LoggingLevelToColor, ObjectToUl} from './utils';
import 'file?name=/styles/station.metadata.css!./station.metadata.css';


/** Metadata component; a listing of test metadata. **/
@Component({
  selector: 'metadata',
  template: `
    <div class="meta-listing">
      <div class="big-message">
        Test metadata is currently unpopulated.
      </div>
      <div class="{{20 | loggingLevelToColor}}">
      </div>
    </div>
  `,
  styleUrls: ['styles/station.metadata.css'],
  pipes: [LoggingLevelToColor, ObjectToUl]
})

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, COMMON_PIPES} from 'angular2/common';

import {TodoService} from '../../services/todo';

@Component({
    selector: 'home',
    template: require('./home.html'),
    directives: [CORE_DIRECTIVES],
    pipes: [COMMON_PIPES],
    providers: [TodoService]
})
export class Home {
    constructor(todoService:TodoService) {
        this.todoService = todoService;
        this.title = 'Home Page';
    }

    onInit() {
        this.todoService.getTodos()
            .map(res => res.json())
            .subscribe(data => {

* ```html
 * 
 *   ...
 * 
 * ```
 *
 * ```ts
 * this.alertOptions = {
 *   title: 'Pizza Toppings',
 *   subTitle: 'Select your toppings'
 * };
 * ```
 *
 * @demo /docs/v2/demos/select/
 */
@Component({
  selector: 'ion-select',
  template:
    '<div class="select-text">{{_text}}</div>' +
    '<div class="select-icon">' +
      '<div class="select-icon-inner"></div>' +
    '</div>' +
    '<button aria-haspopup="true">' +
    '</button>',
  host: {
    '[class.select-disabled]': '_disabled'
  },

import {MobileIOBox} from "./mobile-io.component";
import {PropertyShapePanel} from "./property-shape.component";
import {MobilePropertyTemplateModal} from "./mobile-template.component";
import {StageComponent} from "./stage.component";
import {ViewChild} from "angular2/core";
import {ElementRef} from "angular2/core";
import {Viewport} from "../enum/view-port";
import {CanvasMargin} from "../enum/canvas-margin";
import {LocaleJaData} from "../i18n/locale-ja";
import {LocaleEnData} from "../i18n/locale-en";
import {LocaleData} from "../i18n/locale-data";
import {LocaleManager} from "../i18n/locale-manager";

"use strict";

@Component({
  selector: `my-app`,
  templateUrl: "app/components-html/app.html",
  directives: [
    StageComponent,
    PropertyPanel,
    DesktopIoBox,
    MobileIOBox,
    MobilePropertyTemplateModal
  ],
  providers: [LocaleData],
})

export class AppComponent implements AfterViewInit {
  protected drawingData:DrawingData;
  @ViewChild("stageComponent") stageComponent:StageComponent;
  @ViewChild("propertyPanel") propertyPanel:PropertyPanel;

import {Component, Input} from 'angular2/core';
import {Hero} from './hero';

@Component({
  selector: 'my-hero-detail',
  template: `
    <div>
        <h2>{{hero.name}} details!</h2>
        <div><label>id: </label>{{hero.id}}</div>
        <div>
            <label>name: </label>
            <input placeholder="name">
        </div>
    </div>
`,
})
export class HeroDetailComponent {
  @Input() hero: Hero;
}

import {Component} from 'angular2/core';
import {TranslateService, TranslatePipe} from "ng2-translate/ng2-translate";

/**
 * 
 */
@Component({
    selector: 'register',
    pipes: [TranslatePipe],
    template: `
                <div class="container">
                    <h2>{{'register.title' | translate}}</h2>
                </div>
              `
})
export class RegisterComponent {

    /**
     *
     * @param translate
     *      TranslateService
     */
    constructor(translate: TranslateService) {

import {Inject, Component} from 'angular2/core';
import {IUserProfile} from '../common/UserProfile';
import {BmiPipe} from '../pipes/BmiPipe';
import {formulaBmr} from '../common/formulaBmr';
import {formulaBmi} from '../common/formulaBmi';
import {formulaThr} from '../common/formulaThr';

interface IFormulaParameter {
	isMale: boolean;
	weight: number;
	height: number;
	age: number;
}

@Component({
	selector: 'formulas',
	templateUrl: 'app/templates/formulas.html',
	pipes: [BmiPipe]
})
export class FormulaComponent {
	constructor(@Inject("UserProfile")private userProfile: IUserProfile) {}
	
	private profileToParam(): IFormulaParameter {
		return {
			isMale: this.userProfile.isMale,
			weight: this.userProfile.weightPounds,
			height: this.userProfile.heightInches,
			age: this.userProfile.ageYears 
		};
	}

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { HeroesComponent } from '../heroes/heroes.component';
import { HeroDetailComponent } from '../hero/hero.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { HeroService } from '../services/hero.service';

@Component({
    selector: 'app',
    templateUrl: 'app/app/app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [HeroService]
})
@RouteConfig([
    { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
    { path: '/heroes', name: 'Heroes', component: HeroesComponent },
    { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent }
])
export class AppComponent {
    public title = 'Tour of Heroes';
}