Angular 6 Stars Rating Component

<!DOCTYPE html>
<html>

<head>
  <base href="." />
  <title>Angular 6 Rating Component</title>
  <script src="https://unpkg.com/core-js@2.5.7/client/shim.min.js"></script>
  <script src="https://unpkg.com/zone.js@0.8.26?main=browser"></script>
  <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
  
  <script src="config.js"></script>
  <script>
    System.import('app').catch(console.error.bind(console));
  </script>
</head>

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

</html>

var angularVersion = '@6.0.7';

System.config({
  transpiler: 'ts',
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  meta: {
  'typescript': {
		"exports": "ts"
	  }
	},
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    app: "./src",
    '@angular/core': 'npm:@angular/core'+angularVersion+'/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common'+angularVersion+'/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler'+angularVersion+'/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser'+angularVersion+'/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic'+angularVersion+'/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http'+angularVersion+'/bundles/http.umd.js',
    '@angular/upgrade': 'npm:@angular/upgrade'+angularVersion+'/bundles/upgrade.umd.js',
    '@angular/upgrade/static': 'npm:@angular/upgrade'+angularVersion+'/bundles/upgrade-static.umd.js',

    // other libraries
    'rxjs':                      'npm:rxjs@6.2.1',
    'rxjs-compat':               'npm:rxjs-compat@6.2.1',
    'ts':                        'npm:plugin-typescript@8.0.0/lib/plugin.js',
    'typescript':                'npm:typescript@2.9.2/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
        main: 'index.js',
        defaultExtension: 'js'
    },
    "rxjs/operators": {
        main: 'index.js',
        defaultExtension: 'js'
    }
  }
});

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RatingComponent } from './rating/rating.component';
import { AppComponent } from './list/list.component';

@NgModule({
  declarations: [AppComponent, RatingComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

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

  inputName: string;
  ngOnInit() {
    this.inputName = 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]="inputName" value="5" [checked]="rating===5" />
  <label title="Rocks!" (click)='onClick(5)'>5 stars</label>

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

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

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

  <input type="radio" [name]="inputName" value="1" [checked]="rating===1" />
  <label title="Sucks big time" (click)='onClick(1)'>1 star</label>
</fieldset>

import { Component } from '@angular/core';

interface ICompany {
  id: number;
  rating: number;
  contact: string;
  company: string;
}
@Component({
  selector: 'app-root',
  templateUrl: 'src/list/list.component.html',
  styleUrls: ['src/list/list.component.css']
})
export class AppComponent {

  ratingClicked: number;
  itemIdRatingClicked: string;
  items: ICompany[] = [
    { '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' }
  ];
  ratingComponentClick(clickObj: any): void {
    const item = this.items.find(((i: any) => i.id === clickObj.itemId));
    if (!!item) {
      item.rating = clickObj.rating;
      this.ratingClicked = clickObj.rating;
      this.itemIdRatingClicked = item.company;
    }

  }
}

<!--The content below is only a placeholder and can be replaced.-->
<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="let item of items">
              <td>
                {{item.company}}
              </td>
              <td>
                {{item.contact}}
              </td>
              <td>
                <app-rating [rating]='item.rating' [itemId]='item.id' (ratingClick)='ratingComponentClick($event)'></app-rating>
              </td>
              <td>
                {{item.rating}} Stars
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <p *ngIf='ratingClicked'>The Company {{itemIdRatingClicked}} has been given {{ratingClicked}} stars</p>
  </div>
</div>

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)