docs(cb-rating-component): cookbook about creating a rating component

Author: Foxandxss

public/docs/_examples/cb-rating-component/e2e-spec.js

@@ -0,0 +1,30 @@
+describe('Rating compomnent', function () {
+  
+  beforeAll(function () {
+    browser.get('');
+  });
+  
+  it('should show 5 stars for windstorm', function () {
+    var windstormRating = element.all(by.tagName('my-hero-rating')).get(0);
+    var windstormStars = windstormRating.all(by.css('.glyphicon-star'));
+    expect(windstormStars.count()).toBe(5);
+  });
+  
+  it('should show 1 star for bombasto', function() {
+    var bombastoRating = element.all(by.tagName('my-hero-rating')).get(1);
+    var bombastoStars = bombastoRating.all(by.css('.glyphicon-star'));
+    expect(bombastoStars.count()).toBe(1);
+  });
+  
+  it('should change the rate on click', function() {
+    var bombastoRating = element.all(by.tagName('my-hero-rating')).get(1);
+    var bombastoFourthStar = bombastoRating.all(by.css('.glyphicon')).get(3);
+    bombastoFourthStar.click().then(function() {
+      var bombastoStars = bombastoRating.all(by.css('.glyphicon-star'));
+      expect(bombastoStars.count()).toBe(4);
+      
+      var div = element.all(by.tagName('div')).get(0);
+      expect(div.getText()).toEqual('Bombasto rate is 4');
+    });
+  });
+});

public/docs/_examples/cb-rating-component/ts/.gitignore

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/cb-rating-component/ts/app/app.component.1.ts

@@ -0,0 +1,15 @@
+// #docregion
+import {Component} from 'angular2/core';
+
+import {HeroRatingComponent} from './rating.component';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <label>Windstorm: </label>
+    <my-hero-rating></my-hero-rating>
+  `,
+  directives: [HeroRatingComponent]
+})
+export class AppComponent { }
+// #enddocregion

public/docs/_examples/cb-rating-component/ts/app/app.component.ts

@@ -0,0 +1,22 @@
+import {Component} from 'angular2/core';
+
+import {HeroRatingComponent} from './rating.component';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <p>
+      <label>Windstorm: </label>
+      <my-hero-rating rate="5"></my-hero-rating>
+    </p>
+    <p>
+      <label>Bombasto: </label>
+      <my-hero-rating [(rate)]="bombasto"></my-hero-rating>
+    </p>
+    <div>Bombasto rate is {{bombasto}}</div>
+  `,
+  directives: [HeroRatingComponent]
+})
+export class AppComponent {
+  bombasto: number = 1;
+}

public/docs/_examples/cb-rating-component/ts/app/main.ts

@@ -0,0 +1,5 @@
+import {bootstrap}    from 'angular2/platform/browser';
+import {AppComponent} from './app.component';
+
+bootstrap(AppComponent, [])
+  .catch((err:any) => console.error(err));

public/docs/_examples/cb-rating-component/ts/app/rating.component.1.ts

@@ -0,0 +1,9 @@
+// #docregion
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'my-hero-rating',
+  template: '<div>Rating</div>'
+})
+export class HeroRatingComponent { }
+// #enddocregion

public/docs/_examples/cb-rating-component/ts/app/rating.component.2.ts

@@ -0,0 +1,16 @@
+// #docregion
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'my-hero-rating',
+  // #docregion template
+  template: `
+    <template ngFor [ngForOf]="range" #index="index">
+      <span class="sr-only">(*)</span>
+      <i class="glyphicon glyphicon-star"></i>
+    </template>
+  `
+  // #enddocregion template
+})
+export class HeroRatingComponent { }
+// #enddocregion

public/docs/_examples/cb-rating-component/ts/app/rating.component.3.ts

@@ -0,0 +1,23 @@
+// #docregion
+import {Component, Input} from 'angular2/core';
+
+@Component({
+  selector: 'my-hero-rating',
+  // #docregion template
+  template: `
+    <template ngFor [ngForOf]="range" #index="index">
+      <span class="sr-only">({{ index < rate ? '*' : ' ' }})</span>
+      <i class="glyphicon {{index < rate ? 'glyphicon-star' : 'glyphicon-star-empty'}}"></i>
+    </template>
+  `
+  // #enddocregion template
+})
+export class HeroRatingComponent {
+  @Input() rate: number;
+  // #docregion update-method
+  update(value: number) {
+    this.rate = value;
+  }
+  // #enddocregion
+}
+// #enddocregion

public/docs/_examples/cb-rating-component/ts/app/rating.component.ts

@@ -0,0 +1,34 @@
+// #docregion
+import {Component, Input, Output, EventEmitter} from 'angular2/core';
+
+@Component({
+  selector: 'my-hero-rating',
+  // #docregion rating-template
+  template: `
+    <template ngFor [ngForOf]="range" #index="index">
+      <span class="sr-only">({{ index < rate ? '*' : ' ' }})</span>
+      <i class="glyphicon {{index < rate ? 'glyphicon-star' : 'glyphicon-star-empty'}}" (click)="update(index + 1)"></i>
+    </template>
+  `
+  // #enddocregion rating-template
+})
+export class HeroRatingComponent {
+  // #docregion range-attribute
+  range = new Array(5);
+  // #enddocregion range-attribute
+  
+  // #docregion rate-input
+  @Input() rate: number;
+  // #enddocregion rate-input
+  // #docregion rate-output
+  @Output() rateChange: EventEmitter<number> = new EventEmitter<number>();
+  // #enddocregion rate-output
+  
+  // #docregion update-method
+  update(value: number) {
+    this.rate = value;
+    this.rateChange.emit(value);
+  }
+  // #enddocregion update-method
+}
+// #enddocregion