import { Component } from "@angular/core";
import { RacePart } from "./race-part";
import { RACE_PARTS } from "./mocks";

@Component({
  selector: "my-app-custom-component",
  templateUrl: "app/app.custom.component.html",
  styleUrls: [ "app/app.custom.component.css" ]
})

export class AppCustomComponent {
  title = "Ultra Racing Schedule";
  races: RacePart[];

  getDate(currentDate: Date) {
    return currentDate;
  }

  ngOnInit() {
    this.races = RACE_PARTS;
  }
};

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

@Component({
  selector: "my-app-custom-component",
  templateUrl: "app/app.custom.component.html",
  styleUrls: [ "app/app.custom.component.css" ]
})

export class AppCustomComponent {
  title = "Ultra Racing Schedule";
  races = [{
    "id": 1,
    "name": "Daytona Thunderdome",
    "date": new Date('2512-01-04T14:00:00'),
    "about": "Race through the ruins of an ancient Florida battle arena.",
    "entryFee": 3200
  }, {
    "id": 2,
    "name": "San Francisco Ruins",
    "date": new Date('2512-07-03T20:00:00'),
    "about": "Drift down the streets of a city almost sunk under the ocean.",
    "entryFee": 4700
  }, {
    "id": 3,
    "name": "New York City Skyline",
    "date": new Date('2512-07-12T21:00:00'),
    "about": "Fly between buildings in the electronic sky.",
    "entryFee": 0
  }];
  getDate(currentDate: Date) {
    return currentDate;
  }
};

--- 
+++ 
@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
+import { RacePart } from "./race-part";
+import { RACE_PARTS } from "./mocks";
 
 @Component({
   selector: "my-app-custom-component",
@@ -8,26 +10,13 @@
 
 export class AppCustomComponent {
   title = "Ultra Racing Schedule";
-  races = [{
-    "id": 1,
-    "name": "Daytona Thunderdome",
-    "date": new Date('2512-01-04T14:00:00'),
-    "about": "Race through the ruins of an ancient Florida battle arena.",
-    "entryFee": 3200
-  }, {
-    "id": 2,
-    "name": "San Francisco Ruins",
-    "date": new Date('2512-07-03T20:00:00'),
-    "about": "Drift down the streets of a city almost sunk under the ocean.",
-    "entryFee": 4700
-  }, {
-    "id": 3,
-    "name": "New York City Skyline",
-    "date": new Date('2512-07-12T21:00:00'),
-    "about": "Fly between buildings in the electronic sky.",
-    "entryFee": 0
-  }];
+  races: RacePart[];
+
   getDate(currentDate: Date) {
     return currentDate;
   }
+
+  ngOnInit() {
+    this.races = RACE_PARTS;
+  }
 };
Replace data to separated files
