[blog첨부] - Angular 2 Component - ng-content - Rangle IO [http://rangle.github.io/ngCourse2/webinar-series/index.html?which=components#24]

app\app.component.ts

import { ViewEncapsulation, Component } from 'angular2/core';
import { RangleBar }  from './rangle-bar';
import { RangleButton } from './rangle-button';
import { RangleTextField } from './rangle-text-field';

@Component({
  selector: 'app',
  directives: [ RangleBar, RangleTextField, RangleButton ],
  template: `
    <rangle-bar name="Search the site">
      <rangle-text-field placeholder="Enter Keyword"
        [(value)]="searchTerm">
      </rangle-text-field>
      <rangle-button name="Search"
        [isPrimary]="true"
        (click)="handleSearch(searchTerm)">
      </rangle-button>
    </rangle-bar>

    <rangle-bar name="Other Stuff">
      <rangle-button name="Button 1"
        [isPrimary]="true">
      </rangle-button>
      <rangle-button name="Button 2"></rangle-button>
      <rangle-button name="Button 3"></rangle-button>
    </rangle-bar>
    <p> inside viewCapsulation </p>
  `,
  styles: [ 'p { background: red; border: dashed yellow 2px; }' ],
  encapsulation: ViewEncapsulation.Native
})
export class App {
  private searchTerm: string;

  handleSearch(searchTerm: string): void {
    alert(`You searched for '${searchTerm}'`);
  }
}

app\boot.ts

import { bootstrap } from 'angular2/platform/browser'
import { App } from './app.component'

bootstrap(App);

app\rangle-bar.ts

import { Component, Input } from 'angular2/core';
import { RangleLabel } from './rangle-label';

@Component({
  selector: 'rangle-bar',
  directives: [ RangleLabel ],
  template: `
    <rangle-label [name]="name">
    </rangle-label>
    <div class="row">
      <ng-content></ng-content>
    </div>
  `,
  styles: [`
    :host {
      background: #F8F8F8;
      border: solid #ccc 1px;
      display: block;
      padding: 1rem;
      margin: 1rem;
    }
    .row {
      display: flex;
      margin-top: 0.5rem;
    }
  `]
})
export class RangleBar {
  @Input() name: string;
}

app\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: [ `
    :host {
      display: flex;
      align-items: stretch;
    }
    .rangle-button {
      border: none;
      border-radius: 3px;
      color: white;
      font-weight: bold;
      letter-spacing: .2em;
      margin-left: 0.5rem;
      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';
  }
}

app\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;
}

app\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: 2.5rem;
      padding: .5rem;
    }
  `]
})
export class RangleTextField {
  @Input() private placeholder: string;
  @Input() private value: String;
  @Output() private valueChange = new EventEmitter<String>();

  handleKeyup(fieldValue: string): void {
    this.valueChange.emit(fieldValue);
  }
}

index.html

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 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({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
    <style type="text/css">
      p { border: dashed blue 2px; }
    </style>
  </head>

  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
    <p> P outside ViewCapsulatoin </p>
  </body>

</html>