angular4 example

HTML

<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5/dist/zone.min.js"></script>
<script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/core@4.0.1/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/common@4.0.1/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/compiler@4.0.1/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	<li *ngFor="let object of groups">{{object.color}}</li>
  `,
})
class HomeComponent {
    
    myArray = [
        {
            name: "Apple",
            color: "Green",
            grade: "A1"
        },
        {
            name: "Apple",
            color: "Red",
            grade: "A1"
        },
        {
            name: "Apple",
            color: "Green",
            grade: "A2"
        },
        {
            name: "Apple",
            color: "Red",
            grade: "A2"
        },
    ];
    
    groups = Object.values(this.myArray.reduce(function(r, e) {
      var key = e.name + '|' + e.grade;
      if (!r[key]) r[key] = e;
      else {
        r[key].color = e.color;
      }
      return r;
    }, {}));
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);