<!DOCTYPE html>
<html>

<head>
  <title>angular2 playground</title>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />

  <script src="https://code.angularjs.org/2.0.0-beta.17/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="config.js"></script>
  <script>
    System.import('src/bootstrap').catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>
# Angular2 Stars Rating Component

A simple Angular 2 component for rating items with stars.

## Getting Started

1. Fork and clone this repo

1. Install the necessary dependencies
```node
npm install 
```

1. Run the TypeScript compiler, watch for changes, start the server, and launch the browser
```node
npm start 
```
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",
    '@angular': 'https://npmcdn.com/@angular',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    '@angular/core': {
      main: 'core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/compiler': {
      main: 'compiler.umd.js',
      defaultExtension: 'js'
    },
    '@angular/common': {
      main: 'common.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser-dynamic': {
      main: 'platform-browser-dynamic.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser': {
      main: 'platform-browser.umd.js',
      defaultExtension: 'js'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});
//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app';

bootstrap(AppComponent).catch(err => console.error(err));
import {Component} from '@angular/core'

import {RatingComponent} from './rating/rating.component';

@Component({
    selector: 'my-app',
    templateUrl: 'src/app.html',
    directives: [RatingComponent]
})
export class AppComponent {
    ratingClicked: number;
    itemIdRatingClicked: number;
    items: any[] = [
        {
            "id": 0,
            "rating": 3,
            "contact": "Dennis Phillips",
            "company": "PROFLEX"
        },
        {
            "id": 1,
            "rating": 1,
            "contact": "Morgan Mccarthy",
            "company": "CENTREXIN"
        },
        {
            "id": 2,
            "rating": 2,
            "contact": "Brady Craft",
            "company": "JIMBIES"
        },
        {
            "id": 3,
            "rating": 5,
            "contact": "Alvarado Roman",
            "company": "TERRAGO"
        },
        {
            "id": 4,
            "rating": 4,
            "contact": "Clark Daugherty",
            "company": "ISOTRONIC"
        }
    ];
    ratingComponetClick(clickObj: any): void {
      var item = this.items.filter((item: any) => item.id === clickObj.itemId);
      if(!!item && item.length === 1){
        item[0].rating = clickObj.rating;
        this.ratingClicked = clickObj.rating;
        this.itemIdRatingClicked = clickObj.itemId;
      }
      
    }
}
import { Component, Input, Output, EventEmitter } from '@angular/core'

@Component({
    selector: 'app-rating',
    templateUrl: 'src/rating/rating.component.html',
    styleUrls: ['src/rating/rating.component.css']
})
export class RatingComponent {
    @Input() rating: number;
    @Input() itemId: number;
    @Output() ratingClick: EventEmitter<any> = new EventEmitter<any>();

    inpustName:string;
    ngOnInit() {
      this.inpustName = this.itemId + '_rating';
    }
    onClick(rating: number): void {
        this.rating = rating;
        this.ratingClick.emit({
            itemId: this.itemId,
            rating: rating
        });
    }
}

.rating {
    float:left;
}

.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0.1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
}


.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
}
<fieldset class="rating">
    <input type="radio" [name]="inpustName" value="5" [checked]="rating===5" />
    <label title="Rocks!" (click)='onClick(5)'>5 stars</label>

    <input type="radio" [name]="inpustName" value="4" [checked]="rating===4" />
    <label title="Pretty good" (click)='onClick(4)'>4 stars</label>

    <input type="radio" [name]="inpustName" value="3" [checked]="rating===3" />
    <label title="Meh" (click)='onClick(3)'>3 stars</label>

    <input type="radio" [name]="inpustName" value="2" [checked]="rating===2" />
    <label title="Kinda bad" (click)='onClick(2)'>2 stars</label>

    <input type="radio" [name]="inpustName" value="1" [checked]="rating===1" />
    <label title="Sucks big time" (click)='onClick(1)'>1 star</label>
</fieldset>
<div>
  <div class='container'>
    <h2>Rating Component</h2>
    <div class="panel panel-primary">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Company</th>
              <th>Contact</th>
              <th>Rating</th>
              <th>Rating No.</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="#item of items">
              <td>
                {{item.company}}
              </td>
              <td>
                {{item.contact}} 
              </td>
              <td>
                <app-rating [rating]='item.rating' [itemId]='item.id' (ratingClick)='ratingComponetClick($event)'></app-rating>
              </td>
              <td>
                {{item.rating}} Stars
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <p *ngIf='ratingClicked'>The Item {{itemIdRatingClicked}} has been given {{ratingClicked}} stars</p>
  </div>
</div>