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

Author: Foxandxss

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

@@ -0,0 +1,32 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+describe('Rating component', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should show 5 stars for windstorm', function () {
+    const windstormRating = element.all(by.tagName('my-hero-rating')).get(0);
+    const windstormStars = windstormRating.all(by.css('.glyphicon-star'));
+    expect(windstormStars.count()).toBe(5);
+  });
+
+  it('should show 1 star for bombasto', function() {
+    const bombastoRating = element.all(by.tagName('my-hero-rating')).get(1);
+    const bombastoStars = bombastoRating.all(by.css('.glyphicon-star'));
+    expect(bombastoStars.count()).toBe(1);
+  });
+
+  it('should change the rate on click', function() {
+    const bombastoRating = element.all(by.tagName('my-hero-rating')).get(1);
+    const bombastoFourthStar = bombastoRating.all(by.css('.glyphicon')).get(3);
+    bombastoFourthStar.click().then(function() {
+      const bombastoStars = bombastoRating.all(by.css('.glyphicon-star'));
+      expect(bombastoStars.count()).toBe(4);
+
+      const 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,12 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <label>Windstorm: </label>
+    <my-hero-rating></my-hero-rating>
+  `
+})
+export class AppComponent { }
+// #enddocregion

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@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>
+  `
+})
+export class AppComponent {
+  bombasto = 1;
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HeroRatingComponent } from './rating.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent, HeroRatingComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}

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

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic }    from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

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

@@ -0,0 +1,9 @@
+// #docregion
+import { Component } from '@angular/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 '@angular/core';
+
+@Component({
+  selector: 'my-hero-rating',
+  // #docregion template
+  template: `
+    <template ngFor [ngForOf]="range" let-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 '@angular/core';
+
+@Component({
+  selector: 'my-hero-rating',
+  // #docregion template
+  template: `
+    <template ngFor [ngForOf]="range" let-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): void {
+    this.rate = value;
+  }
+  // #enddocregion
+}
+// #enddocregion

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

@@ -0,0 +1,34 @@
+// #docregion
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'my-hero-rating',
+  // #docregion rating-template
+  template: `
+    <template ngFor [ngForOf]="range" let-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 = new EventEmitter<number>();
+  // #enddocregion rate-output
+
+  // #docregion update-method
+  update(value: number): void {
+    this.rate = value;
+    this.rateChange.emit(value);
+  }
+  // #enddocregion update-method
+}
+// #enddocregion