ysyun/index.html

## index.html
<html>
  <head>
    <title>Angular2 Component</title>
    <link rel="stylesheet" href="style.css" />
     <!-- 1. Load libraries -->
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        //use typescript for compilation
        transpiler: 'typescript',
        //typescript compiler options
        typescriptOptions: {
          emitDecoratorMetadata: true
        },
        //map tells the System loader where to look for things
        map: {
          app: './src'
        },
        //packages defines our app package
        packages: {
          app: {
            main: './main.ts',
            defaultExtension: 'ts'
          }
        }
      });
      System.import('app')
                .catch(console.error.bind(console));
    </script>
  </head>
  <body>
    <app></app>
  </body>
</html>

## src\app.ts
import { Component } from 'angular2/core';
import { RangleSearchBar }  from './rangle-search-bar';

@Component({
  selector: 'app',
  directives: [ RangleSearchBar ],
  template: `<rangle-search-bar></rangle-search-bar>`
})
export class App {}

## src\main.ts
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';

bootstrap(App).then(
    ()=> console.log('App running...'),
    err=> console.log(err)
);

## src\rangle-button.ts
import { Component, Input, Output, EventEmitter } from 'angular2/core'

@Component({
  selector: 'rangle-button',
  template: `
    <button
      [ngClass]="dynamicStyles()"
      class="rangle-button"
      (click)="onClick.emit()">
      {{ name }}
    </button>
  `,
  styles: [ `
    .rangle-button {
      border: none;
      border-radius: 3px;
      color: white;
      font-weight: bold;
      letter-spacing: .2em;
      padding: 0.5rem;
      text-transform: uppercase;
    }
    .primary {
      background: #E5373A;
    }
    .normal {
      background: #422D3F;
    }
  `]
})
export class RangleButton {
  @Input() name: string;
  @Input() isPrimary: boolean;
  @Output() onClick = new EventEmitter();

  dynamicStyles() {
    return this.isPrimary ? 'primary' : 'normal';
  }
}

## src\rangle-label.ts
import {Component, Input} from 'angular2/core';

@Component({
  selector: 'rangle-label',
  template: '<label class="rangle-label">{{ name }}</label>',
  styles: [ `
    .rangle-label {
      color: #422D3F;
      display: block;
      font-weight: bold;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
  `]
})
export class RangleLabel {
  @Input() private name: string;
}

## src\rangle-search-bar.css
:host {
  background: #F8F8F8;
  border: solid #ccc 1px;
  display: block;
  margin: 1rem;
  padding: 1rem;
}
.row {
  display: flex;
  margin-top: 0.5rem;
}

## src\rangle-search-bar.html
<rangle-label name="Search the site">
</rangle-label>
<div class="row">
  <rangle-text-field placeholder="Enter Keyword"
    [(value)]="inputValue">
  </rangle-text-field>
  <rangle-button name="Search"
    [isPrimary]="true"
    (click)="handleSearch(inputValue)">
  </rangle-button>
</div>

## src\rangle-search-bar.ts
import { Component } from 'angular2/core';
import { RangleLabel } from './rangle-label';
import { RangleButton } from './rangle-button';
import { RangleTextField } from './rangle-text-field';

@Component({
  selector: 'rangle-search-bar',
  directives: [ RangleLabel, RangleButton, RangleTextField ],
  templateUrl: 'src/rangle-search-bar.html',
  styleUrls: [ 'src/rangle-search-bar.css' ]
})
export class RangleSearchBar {
  private inputValue: string;
  handleSearch() {
    alert(`You searched for '${this.inputValue}'`);
  }
}

## src\rangle-text-field.ts
import { Component, Input, Output, EventEmitter } from 'angular2/core'

@Component({
  selector: 'rangle-text-field',
  template: `
    <input class="rangle-text-field"
      [placeholder]="placeholder"
      #field (keyup)="handleKeyup(field.value)">
  `,
  styles: [ `
    .rangle-text-field {
      border-radius: 3px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      display: inline-block;
      font-size: inherit;
      font-weight: inherit;
      height: 1.9rem;
      margin-bottom: 0.5rem;
      margin-right: 0.5rem;
      padding: .5rem;
    }
  `]
})
export class RangleTextField {
  @Input() placeholder: string;
  @Input() value: String;
  @Output() valueChange = new EventEmitter<string>();
  handleKeyup(fieldValue: string): void {
    this.valueChange.emit(fieldValue);
  }
}

## style.css
* {
  font-family: Arial, Helvetica, sans-serif;
}
	<html>
	<head>
	<title>Angular2 Component</title>
	<link rel="stylesheet" href="style.css" />
	<!-- 1. Load libraries -->
	<script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
	<script src="https://code.angularjs.org/tools/system.js"></script>
	<script src="https://code.angularjs.org/tools/typescript.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
	<!-- 2. Configure SystemJS -->
	<script>
	System.config({
	//use typescript for compilation
	transpiler: 'typescript',
	//typescript compiler options
	typescriptOptions: {
	emitDecoratorMetadata: true
	},
	//map tells the System loader where to look for things
	map: {
	app: './src'
	},
	//packages defines our app package
	packages: {
	app: {
	main: './main.ts',
	defaultExtension: 'ts'
	}
	}
	});
	System.import('app')
	.catch(console.error.bind(console));
	</script>
	</head>
	<body>
	<app></app>
	</body>
	</html>
	import { Component } from 'angular2/core';
	import { RangleSearchBar } from './rangle-search-bar';

	@Component({
	selector: 'app',
	directives: [ RangleSearchBar ],
	template: `<rangle-search-bar></rangle-search-bar>`
	})
	export class App {}
	import {bootstrap} from 'angular2/platform/browser';
	import {App} from './app';

	bootstrap(App).then(
	()=> console.log('App running...'),
	err=> console.log(err)
	);
	import { Component, Input, Output, EventEmitter } from 'angular2/core'

	@Component({
	selector: 'rangle-button',
	template: `
	<button
	[ngClass]="dynamicStyles()"
	class="rangle-button"
	(click)="onClick.emit()">
	{{ name }}
	</button>
	`,
	styles: [ `
	.rangle-button {
	border: none;
	border-radius: 3px;
	color: white;
	font-weight: bold;
	letter-spacing: .2em;
	padding: 0.5rem;
	text-transform: uppercase;
	}
	.primary {
	background: #E5373A;
	}
	.normal {
	background: #422D3F;
	}
	`]
	})
	export class RangleButton {
	@Input() name: string;
	@Input() isPrimary: boolean;
	@Output() onClick = new EventEmitter();

	dynamicStyles() {
	return this.isPrimary ? 'primary' : 'normal';
	}
	}
	import {Component, Input} from 'angular2/core';

	@Component({
	selector: 'rangle-label',
	template: '<label class="rangle-label">{{ name }}</label>',
	styles: [ `
	.rangle-label {
	color: #422D3F;
	display: block;
	font-weight: bold;
	letter-spacing: .2em;
	text-transform: uppercase;
	}
	`]
	})
	export class RangleLabel {
	@Input() private name: string;
	}
	:host {
	background: #F8F8F8;
	border: solid #ccc 1px;
	display: block;
	margin: 1rem;
	padding: 1rem;
	}
	.row {
	display: flex;
	margin-top: 0.5rem;
	}
	<rangle-label name="Search the site">
	</rangle-label>
	<div class="row">
	<rangle-text-field placeholder="Enter Keyword"
	[(value)]="inputValue">
	</rangle-text-field>
	<rangle-button name="Search"
	[isPrimary]="true"
	(click)="handleSearch(inputValue)">
	</rangle-button>
	</div>
	import { Component } from 'angular2/core';
	import { RangleLabel } from './rangle-label';
	import { RangleButton } from './rangle-button';
	import { RangleTextField } from './rangle-text-field';

	@Component({
	selector: 'rangle-search-bar',
	directives: [ RangleLabel, RangleButton, RangleTextField ],
	templateUrl: 'src/rangle-search-bar.html',
	styleUrls: [ 'src/rangle-search-bar.css' ]
	})
	export class RangleSearchBar {
	private inputValue: string;
	handleSearch() {
	alert(`You searched for '${this.inputValue}'`);
	}
	}
	import { Component, Input, Output, EventEmitter } from 'angular2/core'

	@Component({
	selector: 'rangle-text-field',
	template: `
	<input class="rangle-text-field"
	[placeholder]="placeholder"
	#field (keyup)="handleKeyup(field.value)">
	`,
	styles: [ `
	.rangle-text-field {
	border-radius: 3px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	display: inline-block;
	font-size: inherit;
	font-weight: inherit;
	height: 1.9rem;
	margin-bottom: 0.5rem;
	margin-right: 0.5rem;
	padding: .5rem;
	}
	`]
	})
	export class RangleTextField {
	@Input() placeholder: string;
	@Input() value: String;
	@Output() valueChange = new EventEmitter<string>();
	handleKeyup(fieldValue: string): void {
	this.valueChange.emit(fieldValue);
	}
	}