this is just a very basic simple angluar mock example i created to show you how you can mock data from a file in angular and typescript. This is a very good way to load data fast when the data you have is static instead of fetching the data from a database.

to follow this short tutorial, i created a blank project with angular cli, the project name i gave it was example. i am using the current Angular CLI version which is: angular-cli: 1.0.0-beta.26

Command to create example project

$ng new example

Command to start the project

$ng serve --port 4401

NOTE: i am using port 4401, but the default port os 4400, with this option, you can setup a specific port
you can find this script in my computer under: /c/apachefriends/xampp/htdocs/angular2/MYNOTES/my-tutorial

now that you have a the default angular quickstart project we are going to edit the following files with the following content. in this example i will be using some jason data for car parts. we will create a file called mock.ts and car-part.ts


crea a new flie called car-part.ts and add the following class:

export class CarPart {


Create a new file called mock.ts and add the following object

import { CarPart } from './car-part';

export const CARPARTS: CarPart[] = [{ // : carPart[] is typscript wich comes from the file called car-part.ts
'id' : 1,
'name' : 'Super Tires'
'description' : 'These tires are the very best',
'inStock' : 5,
'price' : 4.99
'id' : 2,
'name' : 'Reinforced Shocks'
'description' : 'Shocks are made from kryptonite',
'inStock' : 4,
'price' : 9.99
'id' : 3,
'name' : 'Padded Seats'
'description' : 'super soft seats for a smotth ride',
'inStock' : 0,
'price' : 17.99


Open app.component.ts and add the following:

import { CARPARTS } from './mock';
import { CarPart } from './car-part';

in app.component.ts  change class AppComponent to:

export class AppComponent {
     carParts : carPart[];   
        this.carParts = CARPARTS;


Open app.component.html and change the code to the following:

<pre>{{carParts[0] | json}}</pre>

now, go to the http://localhost:4201/ in your browser, you should see the object data for the first element in the carParts object