From a5a2697cc9155bc4bd2d0721848e3a70165ec6d0 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 11:58:03 -0800
Subject: [PATCH 01/17] first app initial commit

---
 first-app/.editorconfig                       |  13 +++
 first-app/.gitignore                          |  35 ++++++
 first-app/README.md                           |  31 +++++
 first-app/angular-cli.json                    |  59 ++++++++++
 first-app/e2e/app.e2e-spec.ts                 |  14 +++
 first-app/e2e/app.po.ts                       |  11 ++
 first-app/e2e/tsconfig.json                   |  16 +++
 first-app/karma.conf.js                       |  43 +++++++
 first-app/package.json                        |  47 ++++++++
 first-app/protractor.conf.js                  |  32 ++++++
 first-app/src/app/app.component.css           |   0
 first-app/src/app/app.component.html          |   3 +
 first-app/src/app/app.component.spec.ts       |  34 ++++++
 first-app/src/app/app.component.ts            |  36 ++++++
 first-app/src/app/app.module.ts               |  28 +++++
 first-app/src/app/index.ts                    |   2 +
 first-app/src/assets/.gitkeep                 |   0
 .../src/environments/environment.prod.ts      |   3 +
 first-app/src/environments/environment.ts     |   8 ++
 first-app/src/favicon.ico                     | Bin 0 -> 5430 bytes
 first-app/src/index.html                      |  14 +++
 first-app/src/main.ts                         |  16 +++
 first-app/src/polyfills.ts                    |  19 ++++
 first-app/src/styles.css                      |   1 +
 first-app/src/test.ts                         |  32 ++++++
 first-app/src/tsconfig.json                   |  18 +++
 first-app/src/typings.d.ts                    |   2 +
 first-app/tslint.json                         | 107 ++++++++++++++++++
 28 files changed, 624 insertions(+)
 create mode 100644 first-app/.editorconfig
 create mode 100644 first-app/.gitignore
 create mode 100644 first-app/README.md
 create mode 100644 first-app/angular-cli.json
 create mode 100644 first-app/e2e/app.e2e-spec.ts
 create mode 100644 first-app/e2e/app.po.ts
 create mode 100644 first-app/e2e/tsconfig.json
 create mode 100644 first-app/karma.conf.js
 create mode 100644 first-app/package.json
 create mode 100644 first-app/protractor.conf.js
 create mode 100644 first-app/src/app/app.component.css
 create mode 100644 first-app/src/app/app.component.html
 create mode 100644 first-app/src/app/app.component.spec.ts
 create mode 100644 first-app/src/app/app.component.ts
 create mode 100644 first-app/src/app/app.module.ts
 create mode 100644 first-app/src/app/index.ts
 create mode 100644 first-app/src/assets/.gitkeep
 create mode 100644 first-app/src/environments/environment.prod.ts
 create mode 100644 first-app/src/environments/environment.ts
 create mode 100644 first-app/src/favicon.ico
 create mode 100644 first-app/src/index.html
 create mode 100644 first-app/src/main.ts
 create mode 100644 first-app/src/polyfills.ts
 create mode 100644 first-app/src/styles.css
 create mode 100644 first-app/src/test.ts
 create mode 100644 first-app/src/tsconfig.json
 create mode 100644 first-app/src/typings.d.ts
 create mode 100644 first-app/tslint.json

diff --git a/first-app/.editorconfig b/first-app/.editorconfig
new file mode 100644
index 0000000..6e87a00
--- /dev/null
+++ b/first-app/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/first-app/.gitignore b/first-app/.gitignore
new file mode 100644
index 0000000..ce200cb
--- /dev/null
+++ b/first-app/.gitignore
@@ -0,0 +1,35 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+/.vscode
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
diff --git a/first-app/README.md b/first-app/README.md
new file mode 100644
index 0000000..61dee81
--- /dev/null
+++ b/first-app/README.md
@@ -0,0 +1,31 @@
+# FirstApp
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.22-1.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to Github Pages
+
+Run `ng github-pages:deploy` to deploy to Github Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/first-app/angular-cli.json b/first-app/angular-cli.json
new file mode 100644
index 0000000..9feaea2
--- /dev/null
+++ b/first-app/angular-cli.json
@@ -0,0 +1,59 @@
+{
+  "project": {
+    "version": "1.0.0-beta.22-1",
+    "name": "first-app"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
+  }
+}
diff --git a/first-app/e2e/app.e2e-spec.ts b/first-app/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000..4851c5e
--- /dev/null
+++ b/first-app/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { FirstAppPage } from './app.po';
+
+describe('first-app App', function() {
+  let page: FirstAppPage;
+
+  beforeEach(() => {
+    page = new FirstAppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
diff --git a/first-app/e2e/app.po.ts b/first-app/e2e/app.po.ts
new file mode 100644
index 0000000..5f0b8f0
--- /dev/null
+++ b/first-app/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class FirstAppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
diff --git a/first-app/e2e/tsconfig.json b/first-app/e2e/tsconfig.json
new file mode 100644
index 0000000..656bdb1
--- /dev/null
+++ b/first-app/e2e/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/first-app/karma.conf.js b/first-app/karma.conf.js
new file mode 100644
index 0000000..1f2613a
--- /dev/null
+++ b/first-app/karma.conf.js
@@ -0,0 +1,43 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/first-app/package.json b/first-app/package.json
new file mode 100644
index 0000000..f3e2442
--- /dev/null
+++ b/first-app/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "first-app",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "start": "ng serve",
+    "lint": "tslint \"src/**/*.ts\"",
+    "test": "ng test",
+    "pree2e": "webdriver-manager update",
+    "e2e": "protractor"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "2.2.3",
+    "@angular/compiler": "2.2.3",
+    "@angular/core": "2.2.3",
+    "@angular/forms": "2.2.3",
+    "@angular/http": "2.2.3",
+    "@angular/platform-browser": "2.2.3",
+    "@angular/platform-browser-dynamic": "2.2.3",
+    "@angular/router": "3.2.3",
+    "core-js": "^2.4.1",
+    "rxjs": "5.0.0-beta.12",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.6.23"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "2.2.3",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
+    "angular-cli": "1.0.0-beta.22-1",
+    "codelyzer": "~2.0.0-beta.1",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "4.0.9",
+    "ts-node": "1.2.1",
+    "tslint": "^4.0.2",
+    "typescript": "~2.0.3",
+    "webdriver-manager": "10.2.5"
+  }
+}
diff --git a/first-app/protractor.conf.js b/first-app/protractor.conf.js
new file mode 100644
index 0000000..169743b
--- /dev/null
+++ b/first-app/protractor.conf.js
@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};
diff --git a/first-app/src/app/app.component.css b/first-app/src/app/app.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/first-app/src/app/app.component.html b/first-app/src/app/app.component.html
new file mode 100644
index 0000000..b6931b5
--- /dev/null
+++ b/first-app/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>
+  {{title}}
+</h1>
diff --git a/first-app/src/app/app.component.spec.ts b/first-app/src/app/app.component.spec.ts
new file mode 100644
index 0000000..3ad633e
--- /dev/null
+++ b/first-app/src/app/app.component.spec.ts
@@ -0,0 +1,34 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    let compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});
diff --git a/first-app/src/app/app.component.ts b/first-app/src/app/app.component.ts
new file mode 100644
index 0000000..ca13d3c
--- /dev/null
+++ b/first-app/src/app/app.component.ts
@@ -0,0 +1,36 @@
+
+// One important note here is: No matter if you import some @angular
+// package/ module or code from your own file, you never add the file extension
+// in the import.
+import { Component } from '@angular/core';
+
+
+// Decorators are basically functions which get attached to other code - in this case to a class.
+// A decorator simply leads to the execution of some code in the background which "does something".
+ // Here, the @Component()  decorator takes a JavaScript object as an argument and uses this argument
+ // to add some metadata (in the background) to this class.
+
+// That makes this class a Component which Angular 2 can recognize.
+
+// Angular 2 uses Decorators a lot (not only for Components) and you may simply
+// keep in mind that Decorators "do something in the background and transform whatever
+// they are attached to, to something else Angular 2 knows (like a Component)".
+
+@Component({
+
+  // i.e. <app-root></app-root>
+  selector: 'app-root',
+  // OR it could be '#app-root' => <div id="app-root">
+  // templates are not optional
+  templateUrl: './app.component.html',
+  // styling is optional
+  styleUrls: ['./app.component.css']
+})
+
+// Classes is a feature added by TypeScript which makes the creation of objects easier.
+ // You can think of a class as a blueprint for JS objects. Note that you rarely
+ // instantiate classes (= create objects based on them) yourself in an Angular 2 app.
+ // Most of the time, Angular 2 will do that for you.
+export class AppComponent {
+  title = 'hey hey hey';
+}
diff --git a/first-app/src/app/app.module.ts b/first-app/src/app/app.module.ts
new file mode 100644
index 0000000..f203df0
--- /dev/null
+++ b/first-app/src/app/app.module.ts
@@ -0,0 +1,28 @@
+// we'll always use the browser module
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+// needed for input fields
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+
+// Set up the components for the ng 2 app
+@NgModule({
+  // which directives you're going to be using
+  declarations: [
+    AppComponent
+  ],
+  // which other modules do I use
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule
+  ],
+  // for application wide services
+  providers: [],
+  // Here is the bootstrap component
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/first-app/src/app/index.ts b/first-app/src/app/index.ts
new file mode 100644
index 0000000..875bdb2
--- /dev/null
+++ b/first-app/src/app/index.ts
@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';
diff --git a/first-app/src/assets/.gitkeep b/first-app/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/first-app/src/environments/environment.prod.ts b/first-app/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/first-app/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/first-app/src/environments/environment.ts b/first-app/src/environments/environment.ts
new file mode 100644
index 0000000..00313f1
--- /dev/null
+++ b/first-app/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};
diff --git a/first-app/src/favicon.ico b/first-app/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517
GIT binary patch
literal 5430
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

literal 0
HcmV?d00001

diff --git a/first-app/src/index.html b/first-app/src/index.html
new file mode 100644
index 0000000..26d38dd
--- /dev/null
+++ b/first-app/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>FirstApp</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/first-app/src/main.ts b/first-app/src/main.ts
new file mode 100644
index 0000000..9f28066
--- /dev/null
+++ b/first-app/src/main.ts
@@ -0,0 +1,16 @@
+
+// main.ts is executed FIRST
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+// this is your bootstrap/main line of code
+// SEe app.module.ts
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/first-app/src/polyfills.ts b/first-app/src/polyfills.ts
new file mode 100644
index 0000000..3b4c55b
--- /dev/null
+++ b/first-app/src/polyfills.ts
@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/first-app/src/styles.css b/first-app/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/first-app/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/first-app/src/test.ts b/first-app/src/test.ts
new file mode 100644
index 0000000..81af890
--- /dev/null
+++ b/first-app/src/test.ts
@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+let context = require.context('./', true, /\.spec\.ts/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/first-app/src/tsconfig.json b/first-app/src/tsconfig.json
new file mode 100644
index 0000000..1cf713a
--- /dev/null
+++ b/first-app/src/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": "",
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/first-app/src/typings.d.ts b/first-app/src/typings.d.ts
new file mode 100644
index 0000000..ea52695
--- /dev/null
+++ b/first-app/src/typings.d.ts
@@ -0,0 +1,2 @@
+// Typings reference file, you can add your own global typings here
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
diff --git a/first-app/tslint.json b/first-app/tslint.json
new file mode 100644
index 0000000..640d02c
--- /dev/null
+++ b/first-app/tslint.json
@@ -0,0 +1,107 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}

From 6e2e28b69cd432eaf7de14dc9c4f3eeccfcbbec5 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 12:03:43 -0800
Subject: [PATCH 02/17] switch templateUrl and stylesUrl to use inline versions
 of themselves

---
 first-app/src/app/app.component.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/first-app/src/app/app.component.ts b/first-app/src/app/app.component.ts
index ca13d3c..9e7bce9 100644
--- a/first-app/src/app/app.component.ts
+++ b/first-app/src/app/app.component.ts
@@ -22,9 +22,21 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   // OR it could be '#app-root' => <div id="app-root">
   // templates are not optional
-  templateUrl: './app.component.html',
+  // templateUrl: './app.component.html',
+
+// note the backticks
+  template: `
+    <h1>here is an inline template</h1>
+  `,
   // styling is optional
-  styleUrls: ['./app.component.css']
+  // styleUrls: ['./app.component.css']
+
+ // inline styles example - also note the backticks
+  styles: [`
+    h1 {
+      color: red;
+    }
+    `]
 })
 
 // Classes is a feature added by TypeScript which makes the creation of objects easier.

From dffc9a7d72783e80a461660dee36ef465c08f87a Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 12:11:51 -0800
Subject: [PATCH 03/17] add a new component

---
 first-app/src/app/app.component.ts           |  1 +
 first-app/src/app/app.module.ts              |  6 +++++-
 first-app/src/app/other/other.component.html |  3 +++
 first-app/src/app/other/other.component.ts   | 14 ++++++++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 first-app/src/app/other/other.component.html
 create mode 100644 first-app/src/app/other/other.component.ts

diff --git a/first-app/src/app/app.component.ts b/first-app/src/app/app.component.ts
index 9e7bce9..49f91e3 100644
--- a/first-app/src/app/app.component.ts
+++ b/first-app/src/app/app.component.ts
@@ -27,6 +27,7 @@ import { Component } from '@angular/core';
 // note the backticks
   template: `
     <h1>here is an inline template</h1>
+    <hey-other></hey-other>
   `,
   // styling is optional
   // styleUrls: ['./app.component.css']
diff --git a/first-app/src/app/app.module.ts b/first-app/src/app/app.module.ts
index f203df0..82cf0e0 100644
--- a/first-app/src/app/app.module.ts
+++ b/first-app/src/app/app.module.ts
@@ -7,12 +7,16 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+// using the cli - this line was automatically added
+import { OtherComponent } from './other/other.component';
 
 // Set up the components for the ng 2 app
 @NgModule({
   // which directives you're going to be using
   declarations: [
-    AppComponent
+    AppComponent,
+    // using the cli - this line was automatically added
+    OtherComponent
   ],
   // which other modules do I use
   imports: [
diff --git a/first-app/src/app/other/other.component.html b/first-app/src/app/other/other.component.html
new file mode 100644
index 0000000..3983db9
--- /dev/null
+++ b/first-app/src/app/other/other.component.html
@@ -0,0 +1,3 @@
+<p>
+  other works!
+</p>
diff --git a/first-app/src/app/other/other.component.ts b/first-app/src/app/other/other.component.ts
new file mode 100644
index 0000000..c05390c
--- /dev/null
+++ b/first-app/src/app/other/other.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'hey-other',
+  templateUrl: './other.component.html'
+})
+export class OtherComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From b62d50141ecb96180c9f448b43d2758c3cf7c891 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 12:19:26 -0800
Subject: [PATCH 04/17] another component

---
 first-app/src/app/app.component.ts           |  1 +
 first-app/src/app/app.module.ts              |  4 +++-
 first-app/src/app/other/another.component.ts | 19 +++++++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 first-app/src/app/other/another.component.ts

diff --git a/first-app/src/app/app.component.ts b/first-app/src/app/app.component.ts
index 49f91e3..0029ceb 100644
--- a/first-app/src/app/app.component.ts
+++ b/first-app/src/app/app.component.ts
@@ -28,6 +28,7 @@ import { Component } from '@angular/core';
   template: `
     <h1>here is an inline template</h1>
     <hey-other></hey-other>
+    <hey-another><hey-another>
   `,
   // styling is optional
   // styleUrls: ['./app.component.css']
diff --git a/first-app/src/app/app.module.ts b/first-app/src/app/app.module.ts
index 82cf0e0..cf3a66c 100644
--- a/first-app/src/app/app.module.ts
+++ b/first-app/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 // using the cli - this line was automatically added
 import { OtherComponent } from './other/other.component';
+import { AnotherComponent } from './other/another.component';
 
 // Set up the components for the ng 2 app
 @NgModule({
@@ -16,7 +17,8 @@ import { OtherComponent } from './other/other.component';
   declarations: [
     AppComponent,
     // using the cli - this line was automatically added
-    OtherComponent
+    OtherComponent,
+    AnotherComponent
   ],
   // which other modules do I use
   imports: [
diff --git a/first-app/src/app/other/another.component.ts b/first-app/src/app/other/another.component.ts
new file mode 100644
index 0000000..027f249
--- /dev/null
+++ b/first-app/src/app/other/another.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'hey-another',
+  template: `
+    <p>
+      another Works!
+    </p>
+  `,
+  styles: []
+})
+export class AnotherComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From 213e2ef1662e742c5564849d0e04226f7ac08e7d Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 13:10:13 -0800
Subject: [PATCH 05/17] playing with ng-content

---
 first-app/src/app/app.component.ts           | 10 ++++++++--
 first-app/src/app/other/another.component.ts |  6 +++---
 first-app/src/app/other/other.component.html |  4 ++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/first-app/src/app/app.component.ts b/first-app/src/app/app.component.ts
index 0029ceb..5e24c9d 100644
--- a/first-app/src/app/app.component.ts
+++ b/first-app/src/app/app.component.ts
@@ -26,9 +26,15 @@ import { Component } from '@angular/core';
 
 // note the backticks
   template: `
-    <h1>here is an inline template</h1>
+    <h1>here is an inline template - huh?</h1>
     <hey-other></hey-other>
-    <hey-another><hey-another>
+    <hey-another>
+      <h1>Here is some passed through content</h1>
+    </hey-another>
+    <hey-another>
+      <p>Here is more stuff</p>
+    </hey-another>
+
   `,
   // styling is optional
   // styleUrls: ['./app.component.css']
diff --git a/first-app/src/app/other/another.component.ts b/first-app/src/app/other/another.component.ts
index 027f249..7346921 100644
--- a/first-app/src/app/other/another.component.ts
+++ b/first-app/src/app/other/another.component.ts
@@ -3,9 +3,9 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'hey-another',
   template: `
-    <p>
-      another Works!
-    </p>
+    <article>
+      <ng-content></ng-content>
+    </article>
   `,
   styles: []
 })
diff --git a/first-app/src/app/other/other.component.html b/first-app/src/app/other/other.component.html
index 3983db9..5d8a388 100644
--- a/first-app/src/app/other/other.component.html
+++ b/first-app/src/app/other/other.component.html
@@ -1,3 +1,3 @@
-<p>
+<h1>
   other works!
-</p>
+</h1>

From a7957fe47115103df63df9fd5607690cad0b52ae Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 13:24:55 -0800
Subject: [PATCH 06/17] databinding example

---
 first-app-databinding/.editorconfig           |  13 +++
 first-app-databinding/.gitignore              |  35 ++++++
 first-app-databinding/README.md               |  31 +++++
 first-app-databinding/angular-cli.json        |  59 ++++++++++
 first-app-databinding/e2e/app.e2e-spec.ts     |  14 +++
 first-app-databinding/e2e/app.po.ts           |  11 ++
 first-app-databinding/e2e/tsconfig.json       |  16 +++
 first-app-databinding/karma.conf.js           |  43 +++++++
 first-app-databinding/package.json            |  47 ++++++++
 first-app-databinding/protractor.conf.js      |  32 ++++++
 .../src/app/app.component.css                 |   0
 .../src/app/app.component.html                |   5 +
 .../src/app/app.component.spec.ts             |  34 ++++++
 .../src/app/app.component.ts                  |  10 ++
 first-app-databinding/src/app/app.module.ts   |  22 ++++
 .../app/databinding/databinding.component.css |   0
 .../databinding/databinding.component.html    |   3 +
 .../app/databinding/databinding.component.ts  |  12 ++
 first-app-databinding/src/app/index.ts        |   2 +
 first-app-databinding/src/assets/.gitkeep     |   0
 .../src/environments/environment.prod.ts      |   3 +
 .../src/environments/environment.ts           |   8 ++
 first-app-databinding/src/favicon.ico         | Bin 0 -> 5430 bytes
 first-app-databinding/src/index.html          |  14 +++
 first-app-databinding/src/main.ts             |  12 ++
 first-app-databinding/src/polyfills.ts        |  19 ++++
 first-app-databinding/src/styles.css          |   1 +
 first-app-databinding/src/test.ts             |  32 ++++++
 first-app-databinding/src/tsconfig.json       |  18 +++
 first-app-databinding/src/typings.d.ts        |   2 +
 first-app-databinding/tslint.json             | 107 ++++++++++++++++++
 31 files changed, 605 insertions(+)
 create mode 100644 first-app-databinding/.editorconfig
 create mode 100644 first-app-databinding/.gitignore
 create mode 100644 first-app-databinding/README.md
 create mode 100644 first-app-databinding/angular-cli.json
 create mode 100644 first-app-databinding/e2e/app.e2e-spec.ts
 create mode 100644 first-app-databinding/e2e/app.po.ts
 create mode 100644 first-app-databinding/e2e/tsconfig.json
 create mode 100644 first-app-databinding/karma.conf.js
 create mode 100644 first-app-databinding/package.json
 create mode 100644 first-app-databinding/protractor.conf.js
 create mode 100644 first-app-databinding/src/app/app.component.css
 create mode 100644 first-app-databinding/src/app/app.component.html
 create mode 100644 first-app-databinding/src/app/app.component.spec.ts
 create mode 100644 first-app-databinding/src/app/app.component.ts
 create mode 100644 first-app-databinding/src/app/app.module.ts
 create mode 100644 first-app-databinding/src/app/databinding/databinding.component.css
 create mode 100644 first-app-databinding/src/app/databinding/databinding.component.html
 create mode 100644 first-app-databinding/src/app/databinding/databinding.component.ts
 create mode 100644 first-app-databinding/src/app/index.ts
 create mode 100644 first-app-databinding/src/assets/.gitkeep
 create mode 100644 first-app-databinding/src/environments/environment.prod.ts
 create mode 100644 first-app-databinding/src/environments/environment.ts
 create mode 100644 first-app-databinding/src/favicon.ico
 create mode 100644 first-app-databinding/src/index.html
 create mode 100644 first-app-databinding/src/main.ts
 create mode 100644 first-app-databinding/src/polyfills.ts
 create mode 100644 first-app-databinding/src/styles.css
 create mode 100644 first-app-databinding/src/test.ts
 create mode 100644 first-app-databinding/src/tsconfig.json
 create mode 100644 first-app-databinding/src/typings.d.ts
 create mode 100644 first-app-databinding/tslint.json

diff --git a/first-app-databinding/.editorconfig b/first-app-databinding/.editorconfig
new file mode 100644
index 0000000..6e87a00
--- /dev/null
+++ b/first-app-databinding/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/first-app-databinding/.gitignore b/first-app-databinding/.gitignore
new file mode 100644
index 0000000..ce200cb
--- /dev/null
+++ b/first-app-databinding/.gitignore
@@ -0,0 +1,35 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+/.vscode
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
diff --git a/first-app-databinding/README.md b/first-app-databinding/README.md
new file mode 100644
index 0000000..2cb2b20
--- /dev/null
+++ b/first-app-databinding/README.md
@@ -0,0 +1,31 @@
+# FirstAppDatabinding
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.22-1.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to Github Pages
+
+Run `ng github-pages:deploy` to deploy to Github Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/first-app-databinding/angular-cli.json b/first-app-databinding/angular-cli.json
new file mode 100644
index 0000000..14eeecc
--- /dev/null
+++ b/first-app-databinding/angular-cli.json
@@ -0,0 +1,59 @@
+{
+  "project": {
+    "version": "1.0.0-beta.22-1",
+    "name": "first-app-databinding"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
+  }
+}
diff --git a/first-app-databinding/e2e/app.e2e-spec.ts b/first-app-databinding/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000..7887f3c
--- /dev/null
+++ b/first-app-databinding/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { FirstAppDatabindingPage } from './app.po';
+
+describe('first-app-databinding App', function() {
+  let page: FirstAppDatabindingPage;
+
+  beforeEach(() => {
+    page = new FirstAppDatabindingPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
diff --git a/first-app-databinding/e2e/app.po.ts b/first-app-databinding/e2e/app.po.ts
new file mode 100644
index 0000000..fc62df9
--- /dev/null
+++ b/first-app-databinding/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class FirstAppDatabindingPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
diff --git a/first-app-databinding/e2e/tsconfig.json b/first-app-databinding/e2e/tsconfig.json
new file mode 100644
index 0000000..656bdb1
--- /dev/null
+++ b/first-app-databinding/e2e/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/first-app-databinding/karma.conf.js b/first-app-databinding/karma.conf.js
new file mode 100644
index 0000000..1f2613a
--- /dev/null
+++ b/first-app-databinding/karma.conf.js
@@ -0,0 +1,43 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/first-app-databinding/package.json b/first-app-databinding/package.json
new file mode 100644
index 0000000..e316f78
--- /dev/null
+++ b/first-app-databinding/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "first-app-databinding",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "start": "ng serve",
+    "lint": "tslint \"src/**/*.ts\"",
+    "test": "ng test",
+    "pree2e": "webdriver-manager update",
+    "e2e": "protractor"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "2.2.3",
+    "@angular/compiler": "2.2.3",
+    "@angular/core": "2.2.3",
+    "@angular/forms": "2.2.3",
+    "@angular/http": "2.2.3",
+    "@angular/platform-browser": "2.2.3",
+    "@angular/platform-browser-dynamic": "2.2.3",
+    "@angular/router": "3.2.3",
+    "core-js": "^2.4.1",
+    "rxjs": "5.0.0-beta.12",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.6.23"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "2.2.3",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
+    "angular-cli": "1.0.0-beta.22-1",
+    "codelyzer": "~2.0.0-beta.1",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "4.0.9",
+    "ts-node": "1.2.1",
+    "tslint": "^4.0.2",
+    "typescript": "~2.0.3",
+    "webdriver-manager": "10.2.5"
+  }
+}
diff --git a/first-app-databinding/protractor.conf.js b/first-app-databinding/protractor.conf.js
new file mode 100644
index 0000000..169743b
--- /dev/null
+++ b/first-app-databinding/protractor.conf.js
@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};
diff --git a/first-app-databinding/src/app/app.component.css b/first-app-databinding/src/app/app.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/first-app-databinding/src/app/app.component.html b/first-app-databinding/src/app/app.component.html
new file mode 100644
index 0000000..f52a02b
--- /dev/null
+++ b/first-app-databinding/src/app/app.component.html
@@ -0,0 +1,5 @@
+<h1>
+  {{title}}
+</h1>
+
+<hey-databinding></hey-databinding>
diff --git a/first-app-databinding/src/app/app.component.spec.ts b/first-app-databinding/src/app/app.component.spec.ts
new file mode 100644
index 0000000..3ad633e
--- /dev/null
+++ b/first-app-databinding/src/app/app.component.spec.ts
@@ -0,0 +1,34 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    let compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});
diff --git a/first-app-databinding/src/app/app.component.ts b/first-app-databinding/src/app/app.component.ts
new file mode 100644
index 0000000..ff63e05
--- /dev/null
+++ b/first-app-databinding/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app works!';
+}
diff --git a/first-app-databinding/src/app/app.module.ts b/first-app-databinding/src/app/app.module.ts
new file mode 100644
index 0000000..01f22e7
--- /dev/null
+++ b/first-app-databinding/src/app/app.module.ts
@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { DatabindingComponent } from './databinding/databinding.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    DatabindingComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/first-app-databinding/src/app/databinding/databinding.component.css b/first-app-databinding/src/app/databinding/databinding.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/first-app-databinding/src/app/databinding/databinding.component.html b/first-app-databinding/src/app/databinding/databinding.component.html
new file mode 100644
index 0000000..49eafe7
--- /dev/null
+++ b/first-app-databinding/src/app/databinding/databinding.component.html
@@ -0,0 +1,3 @@
+<p>
+  {{stringInterpolation}} | {{numberInterpolation}}
+</p>
diff --git a/first-app-databinding/src/app/databinding/databinding.component.ts b/first-app-databinding/src/app/databinding/databinding.component.ts
new file mode 100644
index 0000000..3d371e0
--- /dev/null
+++ b/first-app-databinding/src/app/databinding/databinding.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'hey-databinding',
+  templateUrl: './databinding.component.html',
+  styleUrls: ['./databinding.component.css']
+})
+export class DatabindingComponent {
+
+  stringInterpolation = 'this is string interpoloation';
+  numberInterpolation = 42;
+}
diff --git a/first-app-databinding/src/app/index.ts b/first-app-databinding/src/app/index.ts
new file mode 100644
index 0000000..875bdb2
--- /dev/null
+++ b/first-app-databinding/src/app/index.ts
@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';
diff --git a/first-app-databinding/src/assets/.gitkeep b/first-app-databinding/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/first-app-databinding/src/environments/environment.prod.ts b/first-app-databinding/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/first-app-databinding/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/first-app-databinding/src/environments/environment.ts b/first-app-databinding/src/environments/environment.ts
new file mode 100644
index 0000000..00313f1
--- /dev/null
+++ b/first-app-databinding/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};
diff --git a/first-app-databinding/src/favicon.ico b/first-app-databinding/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517
GIT binary patch
literal 5430
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

literal 0
HcmV?d00001

diff --git a/first-app-databinding/src/index.html b/first-app-databinding/src/index.html
new file mode 100644
index 0000000..8bbe79c
--- /dev/null
+++ b/first-app-databinding/src/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>FirstAppDatabinding</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>
diff --git a/first-app-databinding/src/main.ts b/first-app-databinding/src/main.ts
new file mode 100644
index 0000000..5c3c520
--- /dev/null
+++ b/first-app-databinding/src/main.ts
@@ -0,0 +1,12 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/first-app-databinding/src/polyfills.ts b/first-app-databinding/src/polyfills.ts
new file mode 100644
index 0000000..3b4c55b
--- /dev/null
+++ b/first-app-databinding/src/polyfills.ts
@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/first-app-databinding/src/styles.css b/first-app-databinding/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/first-app-databinding/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/first-app-databinding/src/test.ts b/first-app-databinding/src/test.ts
new file mode 100644
index 0000000..81af890
--- /dev/null
+++ b/first-app-databinding/src/test.ts
@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+let context = require.context('./', true, /\.spec\.ts/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/first-app-databinding/src/tsconfig.json b/first-app-databinding/src/tsconfig.json
new file mode 100644
index 0000000..1cf713a
--- /dev/null
+++ b/first-app-databinding/src/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": "",
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/first-app-databinding/src/typings.d.ts b/first-app-databinding/src/typings.d.ts
new file mode 100644
index 0000000..ea52695
--- /dev/null
+++ b/first-app-databinding/src/typings.d.ts
@@ -0,0 +1,2 @@
+// Typings reference file, you can add your own global typings here
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
diff --git a/first-app-databinding/tslint.json b/first-app-databinding/tslint.json
new file mode 100644
index 0000000..640d02c
--- /dev/null
+++ b/first-app-databinding/tslint.json
@@ -0,0 +1,107 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}

From baf594eb2f420b346401665b6d22c57bb948a1a7 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 13:43:34 -0800
Subject: [PATCH 07/17] ngClass and ngStyle property binding examples

---
 .../app/databinding/databinding.component.css   |  3 +++
 .../app/databinding/databinding.component.html  | 17 +++++++++++++++++
 .../app/databinding/databinding.component.ts    |  4 ++++
 3 files changed, 24 insertions(+)

diff --git a/first-app-databinding/src/app/databinding/databinding.component.css b/first-app-databinding/src/app/databinding/databinding.component.css
index e69de29..f8941f7 100644
--- a/first-app-databinding/src/app/databinding/databinding.component.css
+++ b/first-app-databinding/src/app/databinding/databinding.component.css
@@ -0,0 +1,3 @@
+.redBorder {
+  border: solid 1px red;
+}
diff --git a/first-app-databinding/src/app/databinding/databinding.component.html b/first-app-databinding/src/app/databinding/databinding.component.html
index 49eafe7..72142cc 100644
--- a/first-app-databinding/src/app/databinding/databinding.component.html
+++ b/first-app-databinding/src/app/databinding/databinding.component.html
@@ -1,3 +1,20 @@
+
+<h1>String interpoloation</h1>
+
 <p>
   {{stringInterpolation}} | {{numberInterpolation}}
 </p>
+
+
+<h1>Property Binding</h1>
+<p>Using curly brackets
+<input type="text" value="{{stringInterpolation}}"/>
+<p>Using [value]="thing" syntax</p>
+<input type="text" [value]="stringInterpolation"/>
+
+<h2>ngClass examples</h2>
+<p>ngClass example of property binding</p>
+<p [ngClass]="{ redBorder: true }">Is this styled?</p>
+<p [ngClass]="{ redBorder: onSomething() }">Is this styled?</p>
+<h2>ngStyle examples</h2>
+<p [ngStyle]="{color: 'green'}">Is this styled?</p>
diff --git a/first-app-databinding/src/app/databinding/databinding.component.ts b/first-app-databinding/src/app/databinding/databinding.component.ts
index 3d371e0..c7c60f5 100644
--- a/first-app-databinding/src/app/databinding/databinding.component.ts
+++ b/first-app-databinding/src/app/databinding/databinding.component.ts
@@ -9,4 +9,8 @@ export class DatabindingComponent {
 
   stringInterpolation = 'this is string interpoloation';
   numberInterpolation = 42;
+
+  onSomething() {
+    return true;
+  }
 }

From f43ffde5545e818d1a39af181b0892732c5d8461 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 13:51:43 -0800
Subject: [PATCH 08/17] custom property binding example

---
 first-app-databinding/src/app/app.module.ts         |  4 +++-
 .../src/app/databinding/databinding.component.html  |  3 +++
 .../app/databinding/property-binding.component.ts   | 13 +++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 first-app-databinding/src/app/databinding/property-binding.component.ts

diff --git a/first-app-databinding/src/app/app.module.ts b/first-app-databinding/src/app/app.module.ts
index 01f22e7..8214ac8 100644
--- a/first-app-databinding/src/app/app.module.ts
+++ b/first-app-databinding/src/app/app.module.ts
@@ -5,11 +5,13 @@ import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 import { DatabindingComponent } from './databinding/databinding.component';
+import { PropertyBindingComponent } from './databinding/property-binding.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DatabindingComponent
+    DatabindingComponent,
+    PropertyBindingComponent
   ],
   imports: [
     BrowserModule,
diff --git a/first-app-databinding/src/app/databinding/databinding.component.html b/first-app-databinding/src/app/databinding/databinding.component.html
index 72142cc..f6ed205 100644
--- a/first-app-databinding/src/app/databinding/databinding.component.html
+++ b/first-app-databinding/src/app/databinding/databinding.component.html
@@ -18,3 +18,6 @@ <h2>ngClass examples</h2>
 <p [ngClass]="{ redBorder: onSomething() }">Is this styled?</p>
 <h2>ngStyle examples</h2>
 <p [ngStyle]="{color: 'green'}">Is this styled?</p>
+
+<h2>Custom Property BInding</h2>
+<hey-property-binding [result]="10"></hey-property-binding>
diff --git a/first-app-databinding/src/app/databinding/property-binding.component.ts b/first-app-databinding/src/app/databinding/property-binding.component.ts
new file mode 100644
index 0000000..577acd9
--- /dev/null
+++ b/first-app-databinding/src/app/databinding/property-binding.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'hey-property-binding',
+  template: `
+    {{result}}
+  `,
+  styles: []
+})
+export class PropertyBindingComponent {
+  // makes 'result' bindable from outside
+  @Input() result: number = 0;
+}

From bb94be39dd85791e11c20ee928a6a9dbc5084aea Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 14:11:18 -0800
Subject: [PATCH 09/17] event databinding

---
 first-app-databinding/src/app/app.module.ts    |  4 +++-
 .../app/databinding/databinding.component.html |  3 +++
 .../app/databinding/databinding.component.ts   |  4 ++++
 .../app/databinding/event-binding.component.ts | 18 ++++++++++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 first-app-databinding/src/app/databinding/event-binding.component.ts

diff --git a/first-app-databinding/src/app/app.module.ts b/first-app-databinding/src/app/app.module.ts
index 8214ac8..d659f76 100644
--- a/first-app-databinding/src/app/app.module.ts
+++ b/first-app-databinding/src/app/app.module.ts
@@ -6,12 +6,14 @@ import { HttpModule } from '@angular/http';
 import { AppComponent } from './app.component';
 import { DatabindingComponent } from './databinding/databinding.component';
 import { PropertyBindingComponent } from './databinding/property-binding.component';
+import { EventBindingComponent } from './databinding/event-binding.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     DatabindingComponent,
-    PropertyBindingComponent
+    PropertyBindingComponent,
+    EventBindingComponent
   ],
   imports: [
     BrowserModule,
diff --git a/first-app-databinding/src/app/databinding/databinding.component.html b/first-app-databinding/src/app/databinding/databinding.component.html
index f6ed205..ffb178e 100644
--- a/first-app-databinding/src/app/databinding/databinding.component.html
+++ b/first-app-databinding/src/app/databinding/databinding.component.html
@@ -21,3 +21,6 @@ <h2>ngStyle examples</h2>
 
 <h2>Custom Property BInding</h2>
 <hey-property-binding [result]="10"></hey-property-binding>
+
+<h2> Event Binding</h2>
+<hey-event-binding (clicked)="onFooBaz($event)"></hey-event-binding>
diff --git a/first-app-databinding/src/app/databinding/databinding.component.ts b/first-app-databinding/src/app/databinding/databinding.component.ts
index c7c60f5..c71ab41 100644
--- a/first-app-databinding/src/app/databinding/databinding.component.ts
+++ b/first-app-databinding/src/app/databinding/databinding.component.ts
@@ -13,4 +13,8 @@ export class DatabindingComponent {
   onSomething() {
     return true;
   }
+
+  onFooBaz(value: string){
+    alert(`foo baz sez ${value}`);
+  }
 }
diff --git a/first-app-databinding/src/app/databinding/event-binding.component.ts b/first-app-databinding/src/app/databinding/event-binding.component.ts
new file mode 100644
index 0000000..1eaa627
--- /dev/null
+++ b/first-app-databinding/src/app/databinding/event-binding.component.ts
@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'hey-event-binding',
+  template: `
+  <button (click)="onClicked()">Click me</button>
+  `,
+  styles: []
+})
+export class EventBindingComponent  {
+  onClicked() {
+    this.clicked.emit('it worked');
+  }
+
+  // with the @Output decorator, this is now
+  // listenable outside of the component
+  @Output() clicked = new EventEmitter<string>();
+}

From ac9383932f215fa83f4b3712c0611072914fd21b Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 14:16:29 -0800
Subject: [PATCH 10/17] two way databinding example

---
 first-app-databinding/src/app/app.module.ts     |  4 +++-
 .../app/databinding/databinding.component.html  |  3 +++
 .../two-way-databinding.component.ts            | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 first-app-databinding/src/app/databinding/two-way-databinding.component.ts

diff --git a/first-app-databinding/src/app/app.module.ts b/first-app-databinding/src/app/app.module.ts
index d659f76..71adcc8 100644
--- a/first-app-databinding/src/app/app.module.ts
+++ b/first-app-databinding/src/app/app.module.ts
@@ -7,13 +7,15 @@ import { AppComponent } from './app.component';
 import { DatabindingComponent } from './databinding/databinding.component';
 import { PropertyBindingComponent } from './databinding/property-binding.component';
 import { EventBindingComponent } from './databinding/event-binding.component';
+import { TwoWayDatabindingComponent } from './databinding/two-way-databinding.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     DatabindingComponent,
     PropertyBindingComponent,
-    EventBindingComponent
+    EventBindingComponent,
+    TwoWayDatabindingComponent
   ],
   imports: [
     BrowserModule,
diff --git a/first-app-databinding/src/app/databinding/databinding.component.html b/first-app-databinding/src/app/databinding/databinding.component.html
index ffb178e..d10f78c 100644
--- a/first-app-databinding/src/app/databinding/databinding.component.html
+++ b/first-app-databinding/src/app/databinding/databinding.component.html
@@ -24,3 +24,6 @@ <h2>Custom Property BInding</h2>
 
 <h2> Event Binding</h2>
 <hey-event-binding (clicked)="onFooBaz($event)"></hey-event-binding>
+
+<h2>Two way binding</h2>
+<hey-two-way-databinding></hey-two-way-databinding>
diff --git a/first-app-databinding/src/app/databinding/two-way-databinding.component.ts b/first-app-databinding/src/app/databinding/two-way-databinding.component.ts
new file mode 100644
index 0000000..878d96f
--- /dev/null
+++ b/first-app-databinding/src/app/databinding/two-way-databinding.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hey-two-way-databinding',
+  template: `
+    <input type="text" [(ngModel)]="person.name">
+    <input type="text" [(ngModel)]="person.name">
+
+  `,
+  styles: []
+})
+export class TwoWayDatabindingComponent {
+  person = {
+    name: 'Streamless',
+    age: 42
+  }
+}

From 020b4b4223f5da1cad2b35153f1b38adcdd21b7a Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 14:40:12 -0800
Subject: [PATCH 11/17] lifecycle demo

---
 .../src/app/app.component.html                |  2 +
 .../src/app/app.component.ts                  |  1 +
 first-app-databinding/src/app/app.module.ts   |  4 +-
 .../src/app/lifecycle/lifecycle.component.ts  | 67 +++++++++++++++++++
 4 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 first-app-databinding/src/app/lifecycle/lifecycle.component.ts

diff --git a/first-app-databinding/src/app/app.component.html b/first-app-databinding/src/app/app.component.html
index f52a02b..5781658 100644
--- a/first-app-databinding/src/app/app.component.html
+++ b/first-app-databinding/src/app/app.component.html
@@ -2,4 +2,6 @@ <h1>
   {{title}}
 </h1>
 
+<hey-lifecycle *ngIf="!delete"></hey-lifecycle>
+<button (click)="delete = true">Click to delete</button>
 <hey-databinding></hey-databinding>
diff --git a/first-app-databinding/src/app/app.component.ts b/first-app-databinding/src/app/app.component.ts
index ff63e05..346f952 100644
--- a/first-app-databinding/src/app/app.component.ts
+++ b/first-app-databinding/src/app/app.component.ts
@@ -7,4 +7,5 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app works!';
+  delete = false;
 }
diff --git a/first-app-databinding/src/app/app.module.ts b/first-app-databinding/src/app/app.module.ts
index 71adcc8..712ce31 100644
--- a/first-app-databinding/src/app/app.module.ts
+++ b/first-app-databinding/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { DatabindingComponent } from './databinding/databinding.component';
 import { PropertyBindingComponent } from './databinding/property-binding.component';
 import { EventBindingComponent } from './databinding/event-binding.component';
 import { TwoWayDatabindingComponent } from './databinding/two-way-databinding.component';
+import { LifecycleComponent } from './lifecycle/lifecycle.component';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { TwoWayDatabindingComponent } from './databinding/two-way-databinding.co
     DatabindingComponent,
     PropertyBindingComponent,
     EventBindingComponent,
-    TwoWayDatabindingComponent
+    TwoWayDatabindingComponent,
+    LifecycleComponent
   ],
   imports: [
     BrowserModule,
diff --git a/first-app-databinding/src/app/lifecycle/lifecycle.component.ts b/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
new file mode 100644
index 0000000..31113d9
--- /dev/null
+++ b/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
@@ -0,0 +1,67 @@
+import { Component,
+  OnChanges,
+  DoCheck,
+  AfterContentInit,
+  AfterContentChecked,
+  AfterViewInit,
+  AfterViewChecked,
+  OnDestroy,
+  OnInit } from '@angular/core';
+
+@Component({
+  selector: 'hey-lifecycle',
+  template: `
+    <p>
+      lifecycle Works!
+    </p>
+  `,
+  styles: []
+})
+
+
+export class LifecycleComponent implements OnInit, OnChanges, DoCheck, AfterViewInit, AfterViewChecked, AfterContentChecked, AfterContentInit, OnDestroy {
+
+  constructor() { }
+
+  ngOnInit() {
+    this.log('ngOnInit');
+  }
+
+  ngOnChanges(){
+    this.log('ngOnChanges');
+
+  }
+
+  ngDoCheck() {
+    this.log('ngDoCheck');
+
+  }
+
+  ngAfterViewInit(){
+    this.log('ngAfterViewInit');
+
+  }
+
+  ngAfterViewChecked(){
+    this.log('ngAfterViewChecked');
+
+  }
+
+  ngAfterContentChecked(){
+    this.log('ngAfterContentChecked');
+
+  }
+  ngAfterContentInit(){
+    this.log('ngAfterContentInit');
+
+  }
+  ngOnDestroy(){
+    this.log('ngOnDestroy');
+
+  }
+
+  private log(message: string){
+    console.log(message);
+  }
+
+}

From ab7300d76eb698a0b07c0266d5ce1205d30d17f7 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 14:52:25 -0800
Subject: [PATCH 12/17] more lifecycle - OnChanges demo

---
 first-app-databinding/src/app/app.component.html   |  8 +++++++-
 first-app-databinding/src/app/app.component.ts     |  2 ++
 .../src/app/lifecycle/lifecycle.component.ts       | 14 ++++++++------
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/first-app-databinding/src/app/app.component.html b/first-app-databinding/src/app/app.component.html
index 5781658..d78e4ca 100644
--- a/first-app-databinding/src/app/app.component.html
+++ b/first-app-databinding/src/app/app.component.html
@@ -2,6 +2,12 @@ <h1>
   {{title}}
 </h1>
 
-<hey-lifecycle *ngIf="!delete"></hey-lifecycle>
+<hey-lifecycle *ngIf="!delete" [bindable]="boundValue">
+  <p>{{test}}</p>
+</hey-lifecycle>
 <button (click)="delete = true">Click to delete</button>
+
+<button (click)="test = 'changed value'">Click to change</button>
+
+<button (click)="boundValue = 2000">Click to change bound value</button>
 <hey-databinding></hey-databinding>
diff --git a/first-app-databinding/src/app/app.component.ts b/first-app-databinding/src/app/app.component.ts
index 346f952..343600c 100644
--- a/first-app-databinding/src/app/app.component.ts
+++ b/first-app-databinding/src/app/app.component.ts
@@ -8,4 +8,6 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'app works!';
   delete = false;
+  test = 'Starting value';
+  boundValue = 1000;
 }
diff --git a/first-app-databinding/src/app/lifecycle/lifecycle.component.ts b/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
index 31113d9..7fae9ed 100644
--- a/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
+++ b/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
@@ -1,4 +1,5 @@
 import { Component,
+  Input,
   OnChanges,
   DoCheck,
   AfterContentInit,
@@ -11,9 +12,10 @@ import { Component,
 @Component({
   selector: 'hey-lifecycle',
   template: `
-    <p>
-      lifecycle Works!
-    </p>
+  <ng-content></ng-content>
+  <br/><br/>
+  bindable={{bindable}}
+  <br/>
   `,
   styles: []
 })
@@ -23,23 +25,23 @@ export class LifecycleComponent implements OnInit, OnChanges, DoCheck, AfterView
 
   constructor() { }
 
+  @Input() bindable = 1000;
+
+
   ngOnInit() {
     this.log('ngOnInit');
   }
 
   ngOnChanges(){
     this.log('ngOnChanges');
-
   }
 
   ngDoCheck() {
     this.log('ngDoCheck');
-
   }
 
   ngAfterViewInit(){
     this.log('ngAfterViewInit');
-
   }
 
   ngAfterViewChecked(){

From 12f524856b6d45c8e2ef4a52b4a0eac24f5376de Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 15:53:33 -0800
Subject: [PATCH 13/17] ViewChild example

---
 .../src/app/lifecycle/lifecycle.component.ts              | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/first-app-databinding/src/app/lifecycle/lifecycle.component.ts b/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
index 7fae9ed..a7a9f9d 100644
--- a/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
+++ b/first-app-databinding/src/app/lifecycle/lifecycle.component.ts
@@ -1,5 +1,6 @@
 import { Component,
   Input,
+  ViewChild,
   OnChanges,
   DoCheck,
   AfterContentInit,
@@ -14,7 +15,8 @@ import { Component,
   template: `
   <ng-content></ng-content>
   <br/><br/>
-  bindable={{bindable}}
+  <p #boundParagraph>{{bindable}}</p>
+  <p>{{boundParagraph.textContent}}</p>
   <br/>
   `,
   styles: []
@@ -27,6 +29,9 @@ export class LifecycleComponent implements OnInit, OnChanges, DoCheck, AfterView
 
   @Input() bindable = 1000;
 
+  // if we want access to the local 'boundParagraph' value in the template use ViewChild
+  @ViewChild('boundParagraph')
+  myBoundParagraph: HTMLElement;
 
   ngOnInit() {
     this.log('ngOnInit');
@@ -42,6 +47,7 @@ export class LifecycleComponent implements OnInit, OnChanges, DoCheck, AfterView
 
   ngAfterViewInit(){
     this.log('ngAfterViewInit');
+    console.log(this.myBoundParagraph);
   }
 
   ngAfterViewChecked(){

From a8595a991200895a7904df47076e3a8ad2a23f15 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 16:02:39 -0800
Subject: [PATCH 14/17] initial setup

---
 recipe-book/.editorconfig                     |  13 +++
 recipe-book/.gitignore                        |  35 ++++++
 recipe-book/README.md                         |  31 +++++
 recipe-book/angular-cli.json                  |  59 ++++++++++
 recipe-book/e2e/app.e2e-spec.ts               |  14 +++
 recipe-book/e2e/app.po.ts                     |  11 ++
 recipe-book/e2e/tsconfig.json                 |  16 +++
 recipe-book/karma.conf.js                     |  43 +++++++
 recipe-book/package.json                      |  47 ++++++++
 recipe-book/protractor.conf.js                |  32 ++++++
 recipe-book/src/app/app.component.html        |   3 +
 recipe-book/src/app/app.component.ts          |   8 ++
 recipe-book/src/app/app.module.ts             |  20 ++++
 recipe-book/src/app/index.ts                  |   2 +
 recipe-book/src/assets/.gitkeep               |   0
 .../src/environments/environment.prod.ts      |   3 +
 recipe-book/src/environments/environment.ts   |   8 ++
 recipe-book/src/favicon.ico                   | Bin 0 -> 5430 bytes
 recipe-book/src/index.html                    |  16 +++
 recipe-book/src/main.ts                       |  12 ++
 recipe-book/src/polyfills.ts                  |  19 ++++
 recipe-book/src/styles.css                    |   1 +
 recipe-book/src/test.ts                       |  32 ++++++
 recipe-book/src/tsconfig.json                 |  18 +++
 recipe-book/src/typings.d.ts                  |   2 +
 recipe-book/tslint.json                       | 107 ++++++++++++++++++
 26 files changed, 552 insertions(+)
 create mode 100644 recipe-book/.editorconfig
 create mode 100644 recipe-book/.gitignore
 create mode 100644 recipe-book/README.md
 create mode 100644 recipe-book/angular-cli.json
 create mode 100644 recipe-book/e2e/app.e2e-spec.ts
 create mode 100644 recipe-book/e2e/app.po.ts
 create mode 100644 recipe-book/e2e/tsconfig.json
 create mode 100644 recipe-book/karma.conf.js
 create mode 100644 recipe-book/package.json
 create mode 100644 recipe-book/protractor.conf.js
 create mode 100644 recipe-book/src/app/app.component.html
 create mode 100644 recipe-book/src/app/app.component.ts
 create mode 100644 recipe-book/src/app/app.module.ts
 create mode 100644 recipe-book/src/app/index.ts
 create mode 100644 recipe-book/src/assets/.gitkeep
 create mode 100644 recipe-book/src/environments/environment.prod.ts
 create mode 100644 recipe-book/src/environments/environment.ts
 create mode 100644 recipe-book/src/favicon.ico
 create mode 100644 recipe-book/src/index.html
 create mode 100644 recipe-book/src/main.ts
 create mode 100644 recipe-book/src/polyfills.ts
 create mode 100644 recipe-book/src/styles.css
 create mode 100644 recipe-book/src/test.ts
 create mode 100644 recipe-book/src/tsconfig.json
 create mode 100644 recipe-book/src/typings.d.ts
 create mode 100644 recipe-book/tslint.json

diff --git a/recipe-book/.editorconfig b/recipe-book/.editorconfig
new file mode 100644
index 0000000..6e87a00
--- /dev/null
+++ b/recipe-book/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/recipe-book/.gitignore b/recipe-book/.gitignore
new file mode 100644
index 0000000..ce200cb
--- /dev/null
+++ b/recipe-book/.gitignore
@@ -0,0 +1,35 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+/.vscode
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
diff --git a/recipe-book/README.md b/recipe-book/README.md
new file mode 100644
index 0000000..0e315d6
--- /dev/null
+++ b/recipe-book/README.md
@@ -0,0 +1,31 @@
+# RecipeBook
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.22-1.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to Github Pages
+
+Run `ng github-pages:deploy` to deploy to Github Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/recipe-book/angular-cli.json b/recipe-book/angular-cli.json
new file mode 100644
index 0000000..2050e59
--- /dev/null
+++ b/recipe-book/angular-cli.json
@@ -0,0 +1,59 @@
+{
+  "project": {
+    "version": "1.0.0-beta.22-1",
+    "name": "recipe-book"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "rb",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
+  }
+}
diff --git a/recipe-book/e2e/app.e2e-spec.ts b/recipe-book/e2e/app.e2e-spec.ts
new file mode 100644
index 0000000..92f1511
--- /dev/null
+++ b/recipe-book/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { RecipeBookPage } from './app.po';
+
+describe('recipe-book App', function() {
+  let page: RecipeBookPage;
+
+  beforeEach(() => {
+    page = new RecipeBookPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('rb works!');
+  });
+});
diff --git a/recipe-book/e2e/app.po.ts b/recipe-book/e2e/app.po.ts
new file mode 100644
index 0000000..5973126
--- /dev/null
+++ b/recipe-book/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class RecipeBookPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('rb-root h1')).getText();
+  }
+}
diff --git a/recipe-book/e2e/tsconfig.json b/recipe-book/e2e/tsconfig.json
new file mode 100644
index 0000000..656bdb1
--- /dev/null
+++ b/recipe-book/e2e/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/recipe-book/karma.conf.js b/recipe-book/karma.conf.js
new file mode 100644
index 0000000..1f2613a
--- /dev/null
+++ b/recipe-book/karma.conf.js
@@ -0,0 +1,43 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/recipe-book/package.json b/recipe-book/package.json
new file mode 100644
index 0000000..f48d606
--- /dev/null
+++ b/recipe-book/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "recipe-book",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "start": "ng serve",
+    "lint": "tslint \"src/**/*.ts\"",
+    "test": "ng test",
+    "pree2e": "webdriver-manager update",
+    "e2e": "protractor"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "2.2.3",
+    "@angular/compiler": "2.2.3",
+    "@angular/core": "2.2.3",
+    "@angular/forms": "2.2.3",
+    "@angular/http": "2.2.3",
+    "@angular/platform-browser": "2.2.3",
+    "@angular/platform-browser-dynamic": "2.2.3",
+    "@angular/router": "3.2.3",
+    "core-js": "^2.4.1",
+    "rxjs": "5.0.0-beta.12",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.6.23"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "2.2.3",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
+    "angular-cli": "1.0.0-beta.22-1",
+    "codelyzer": "~2.0.0-beta.1",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "4.0.9",
+    "ts-node": "1.2.1",
+    "tslint": "^4.0.2",
+    "typescript": "~2.0.3",
+    "webdriver-manager": "10.2.5"
+  }
+}
diff --git a/recipe-book/protractor.conf.js b/recipe-book/protractor.conf.js
new file mode 100644
index 0000000..169743b
--- /dev/null
+++ b/recipe-book/protractor.conf.js
@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};
diff --git a/recipe-book/src/app/app.component.html b/recipe-book/src/app/app.component.html
new file mode 100644
index 0000000..b6931b5
--- /dev/null
+++ b/recipe-book/src/app/app.component.html
@@ -0,0 +1,3 @@
+<h1>
+  {{title}}
+</h1>
diff --git a/recipe-book/src/app/app.component.ts b/recipe-book/src/app/app.component.ts
new file mode 100644
index 0000000..9c18b57
--- /dev/null
+++ b/recipe-book/src/app/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'rb-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+}
diff --git a/recipe-book/src/app/app.module.ts b/recipe-book/src/app/app.module.ts
new file mode 100644
index 0000000..67ae491
--- /dev/null
+++ b/recipe-book/src/app/app.module.ts
@@ -0,0 +1,20 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/recipe-book/src/app/index.ts b/recipe-book/src/app/index.ts
new file mode 100644
index 0000000..875bdb2
--- /dev/null
+++ b/recipe-book/src/app/index.ts
@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';
diff --git a/recipe-book/src/assets/.gitkeep b/recipe-book/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/recipe-book/src/environments/environment.prod.ts b/recipe-book/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/recipe-book/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
diff --git a/recipe-book/src/environments/environment.ts b/recipe-book/src/environments/environment.ts
new file mode 100644
index 0000000..00313f1
--- /dev/null
+++ b/recipe-book/src/environments/environment.ts
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};
diff --git a/recipe-book/src/favicon.ico b/recipe-book/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517
GIT binary patch
literal 5430
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

literal 0
HcmV?d00001

diff --git a/recipe-book/src/index.html b/recipe-book/src/index.html
new file mode 100644
index 0000000..e8dbca8
--- /dev/null
+++ b/recipe-book/src/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>RecipeBook</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+  <rb-root>Loading...</rb-root>
+</body>
+</html>
diff --git a/recipe-book/src/main.ts b/recipe-book/src/main.ts
new file mode 100644
index 0000000..5c3c520
--- /dev/null
+++ b/recipe-book/src/main.ts
@@ -0,0 +1,12 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/recipe-book/src/polyfills.ts b/recipe-book/src/polyfills.ts
new file mode 100644
index 0000000..3b4c55b
--- /dev/null
+++ b/recipe-book/src/polyfills.ts
@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
diff --git a/recipe-book/src/styles.css b/recipe-book/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/recipe-book/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/recipe-book/src/test.ts b/recipe-book/src/test.ts
new file mode 100644
index 0000000..81af890
--- /dev/null
+++ b/recipe-book/src/test.ts
@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+let context = require.context('./', true, /\.spec\.ts/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/recipe-book/src/tsconfig.json b/recipe-book/src/tsconfig.json
new file mode 100644
index 0000000..1cf713a
--- /dev/null
+++ b/recipe-book/src/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "baseUrl": "",
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}
diff --git a/recipe-book/src/typings.d.ts b/recipe-book/src/typings.d.ts
new file mode 100644
index 0000000..ea52695
--- /dev/null
+++ b/recipe-book/src/typings.d.ts
@@ -0,0 +1,2 @@
+// Typings reference file, you can add your own global typings here
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
diff --git a/recipe-book/tslint.json b/recipe-book/tslint.json
new file mode 100644
index 0000000..f0314f6
--- /dev/null
+++ b/recipe-book/tslint.json
@@ -0,0 +1,107 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "rb", "camelCase"],
+    "component-selector": [true, "element", "rb", "kebab-case"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}

From 70fd903d667f7184123adda10eda73129b98e35d Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 16:42:53 -0800
Subject: [PATCH 15/17] add a header with a simple recipe detail view

---
 recipe-book/src/app/app.component.html        |  8 +++--
 recipe-book/src/app/app.module.ts             | 10 ++++++-
 recipe-book/src/app/header.component.html     | 29 +++++++++++++++++++
 recipe-book/src/app/header.component.ts       | 14 +++++++++
 .../recipe-list/recipe-item.component.html    | 11 +++++++
 .../recipe-list/recipe-item.component.ts      | 18 ++++++++++++
 .../recipe-list/recipe-list.component.html    | 12 ++++++++
 .../recipe-list/recipe-list.component.ts      | 19 ++++++++++++
 recipe-book/src/app/recipes/recipe.ts         |  6 ++++
 .../src/app/recipes/recipes.component.html    |  9 ++++++
 .../src/app/recipes/recipes.component.ts      | 14 +++++++++
 11 files changed, 146 insertions(+), 4 deletions(-)
 create mode 100644 recipe-book/src/app/header.component.html
 create mode 100644 recipe-book/src/app/header.component.ts
 create mode 100644 recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
 create mode 100644 recipe-book/src/app/recipes/recipe-list/recipe-item.component.ts
 create mode 100644 recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
 create mode 100644 recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
 create mode 100644 recipe-book/src/app/recipes/recipe.ts
 create mode 100644 recipe-book/src/app/recipes/recipes.component.html
 create mode 100644 recipe-book/src/app/recipes/recipes.component.ts

diff --git a/recipe-book/src/app/app.component.html b/recipe-book/src/app/app.component.html
index b6931b5..2fdcf5e 100644
--- a/recipe-book/src/app/app.component.html
+++ b/recipe-book/src/app/app.component.html
@@ -1,3 +1,5 @@
-<h1>
-  {{title}}
-</h1>
+<rb-header></rb-header>
+
+<div class="container">
+  <rb-recipes></rb-recipes>
+</div>
diff --git a/recipe-book/src/app/app.module.ts b/recipe-book/src/app/app.module.ts
index 67ae491..046e5fb 100644
--- a/recipe-book/src/app/app.module.ts
+++ b/recipe-book/src/app/app.module.ts
@@ -4,10 +4,18 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { HeaderComponent } from './header.component';
+import { RecipesComponent } from './recipes/recipes.component';
+import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
+import { RecipeItemComponent } from './recipes/recipe-list/recipe-item.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    RecipesComponent,
+    RecipeListComponent,
+    RecipeItemComponent
   ],
   imports: [
     BrowserModule,
diff --git a/recipe-book/src/app/header.component.html b/recipe-book/src/app/header.component.html
new file mode 100644
index 0000000..9825c52
--- /dev/null
+++ b/recipe-book/src/app/header.component.html
@@ -0,0 +1,29 @@
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">Recipe Book</a>
+    </div>
+
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li><a href="#">Recipes</a></li>
+        <li><a href="#">Shopping List</a></li>
+
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="#">Link</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Login</a></li>
+            <li><a href="#">Another action</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>
diff --git a/recipe-book/src/app/header.component.ts b/recipe-book/src/app/header.component.ts
new file mode 100644
index 0000000..cf76ae5
--- /dev/null
+++ b/recipe-book/src/app/header.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'rb-header',
+  templateUrl: './header.component.html'
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
new file mode 100644
index 0000000..cd4abcf
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
@@ -0,0 +1,11 @@
+<a href="#" class="list-group-item clearfix">
+  <div class="pull-left">
+    <h4 class="list-group-item-heading">{{recipe.name}}</h4>
+    <p class="list-group-item-text">{{recipe.description}}</p>
+  </div>
+  <span class="pull-right">
+    <img class="img-responsive"
+    src="{{recipe.imagePath}}"
+    style="..."/>
+  </span>
+</a>
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-item.component.ts b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.ts
new file mode 100644
index 0000000..c761564
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Recipe } from '../recipe';
+
+@Component({
+  selector: 'rb-recipe-item',
+  templateUrl: './recipe-item.component.html'
+})
+export class RecipeItemComponent implements OnInit {
+  @Input() recipe:Recipe;
+  recipeId;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
new file mode 100644
index 0000000..89d4ae1
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
@@ -0,0 +1,12 @@
+<div class="row">
+  <div class="col-xs-12">
+    <a class="btn btn-success">New Recipe</a>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    <ul class="list-group">
+      <rb-recipe-item [recipe]="recipe"></rb-recipe-item>
+    </ul>
+  </div>
+</div>
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
new file mode 100644
index 0000000..992b70f
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Recipe } from '../recipe';
+
+@Component({
+  selector: 'rb-recipe-list',
+  templateUrl: './recipe-list.component.html'
+})
+export class RecipeListComponent implements OnInit {
+  recipeList: Recipe[] = [];
+
+  recipe:Recipe = new Recipe('Dummy', 'Dummy', 'https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067');
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/recipe-book/src/app/recipes/recipe.ts b/recipe-book/src/app/recipes/recipe.ts
new file mode 100644
index 0000000..541f05d
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe.ts
@@ -0,0 +1,6 @@
+export class Recipe {
+
+  constructor(public name:string, public description:string, public imagePath:string) {
+
+  }
+}
diff --git a/recipe-book/src/app/recipes/recipes.component.html b/recipe-book/src/app/recipes/recipes.component.html
new file mode 100644
index 0000000..4fe9567
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipes.component.html
@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-md-5">
+    <rb-recipe-list></rb-recipe-list>
+
+  </div>
+  <div class="col-md-7">
+    Recipe Detail
+  </div>
+</div>
diff --git a/recipe-book/src/app/recipes/recipes.component.ts b/recipe-book/src/app/recipes/recipes.component.ts
new file mode 100644
index 0000000..6d81b2c
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipes.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'rb-recipes',
+  templateUrl: './recipes.component.html'
+})
+export class RecipesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From a1170e5b672812c7f3b2870231b9a4204da1cd92 Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 17:04:22 -0800
Subject: [PATCH 16/17] recipe detail with data binding

---
 recipe-book/src/app/app.module.ts             |  4 ++-
 .../recipe-detail.component.html              | 26 +++++++++++++++++++
 .../recipe-detail/recipe-detail.component.ts  | 16 ++++++++++++
 .../recipe-list/recipe-item.component.html    |  2 +-
 .../recipe-list/recipe-list.component.html    |  2 +-
 .../recipe-list/recipe-list.component.ts      | 10 ++++---
 .../src/app/recipes/recipes.component.html    |  4 +--
 .../src/app/recipes/recipes.component.ts      |  2 ++
 8 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.html
 create mode 100644 recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.ts

diff --git a/recipe-book/src/app/app.module.ts b/recipe-book/src/app/app.module.ts
index 046e5fb..4249d6f 100644
--- a/recipe-book/src/app/app.module.ts
+++ b/recipe-book/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { HeaderComponent } from './header.component';
 import { RecipesComponent } from './recipes/recipes.component';
 import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
 import { RecipeItemComponent } from './recipes/recipe-list/recipe-item.component';
+import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { RecipeItemComponent } from './recipes/recipe-list/recipe-item.component
     HeaderComponent,
     RecipesComponent,
     RecipeListComponent,
-    RecipeItemComponent
+    RecipeItemComponent,
+    RecipeDetailComponent
   ],
   imports: [
     BrowserModule,
diff --git a/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.html b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.html
new file mode 100644
index 0000000..8ff3e37
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.html
@@ -0,0 +1,26 @@
+<div class="row">
+  <div class="col-xs-12">
+    <img src="{{selectedRecipe?.imagePath}}" alt="" class="img-responsive">
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    <h1>{{selectedRecipe?.name}}</h1>
+  </div>
+  <div class="col-xs-12">
+    <button class="btn btn-success">To Shopping List</button>
+    <button class="btn btn-primary">Edit</button>
+    <button class="btn btn-danger">Delete</button>
+  </div>
+</div>
+<hr>
+<div class="row">
+  <div class="col-xs-12">
+    <p>{{selectedRecipe?.description}}</p>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    Ingredients
+  </div>
+</div>
diff --git a/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.ts b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.ts
new file mode 100644
index 0000000..d9b1b89
--- /dev/null
+++ b/recipe-book/src/app/recipes/recipe-detail/recipe-detail.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Recipe } from '../recipe';
+
+@Component({
+  selector: 'rb-recipe-detail',
+  templateUrl: './recipe-detail.component.html'
+})
+export class RecipeDetailComponent implements OnInit {
+  @Input() selectedRecipe:Recipe;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
index cd4abcf..f59f543 100644
--- a/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-item.component.html
@@ -6,6 +6,6 @@ <h4 class="list-group-item-heading">{{recipe.name}}</h4>
   <span class="pull-right">
     <img class="img-responsive"
     src="{{recipe.imagePath}}"
-    style="..."/>
+    style="max-height: 50px"/>
   </span>
 </a>
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
index 89d4ae1..515d669 100644
--- a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.html
@@ -6,7 +6,7 @@
 <div class="row">
   <div class="col-xs-12">
     <ul class="list-group">
-      <rb-recipe-item [recipe]="recipe"></rb-recipe-item>
+      <rb-recipe-item [recipe]="recipe" (click)="onSelectedRecipe(recipe)"></rb-recipe-item>
     </ul>
   </div>
 </div>
diff --git a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
index 992b70f..b3b6fff 100644
--- a/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
+++ b/recipe-book/src/app/recipes/recipe-list/recipe-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
 
 import { Recipe } from '../recipe';
 
@@ -8,11 +8,13 @@ import { Recipe } from '../recipe';
 })
 export class RecipeListComponent implements OnInit {
   recipeList: Recipe[] = [];
-
+  @Output() recipeSelected = new EventEmitter<Recipe>();
   recipe:Recipe = new Recipe('Dummy', 'Dummy', 'https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067');
-  
-  constructor() { }
 
+  constructor() { }
+  onSelectedRecipe(recipe:Recipe) {
+    this.recipeSelected.emit(recipe);
+  }
   ngOnInit() {
   }
 
diff --git a/recipe-book/src/app/recipes/recipes.component.html b/recipe-book/src/app/recipes/recipes.component.html
index 4fe9567..49d9ff3 100644
--- a/recipe-book/src/app/recipes/recipes.component.html
+++ b/recipe-book/src/app/recipes/recipes.component.html
@@ -1,9 +1,9 @@
 <div class="row">
   <div class="col-md-5">
-    <rb-recipe-list></rb-recipe-list>
+    <rb-recipe-list (recipeSelected)="selectedRecipe = $event"></rb-recipe-list>
 
   </div>
   <div class="col-md-7">
-    Recipe Detail
+    <rb-recipe-detail [selectedRecipe]="selectedRecipe"></rb-recipe-detail>
   </div>
 </div>
diff --git a/recipe-book/src/app/recipes/recipes.component.ts b/recipe-book/src/app/recipes/recipes.component.ts
index 6d81b2c..0246909 100644
--- a/recipe-book/src/app/recipes/recipes.component.ts
+++ b/recipe-book/src/app/recipes/recipes.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { Recipe } from './recipe';
 
 @Component({
   selector: 'rb-recipes',
   templateUrl: './recipes.component.html'
 })
 export class RecipesComponent implements OnInit {
+  selectedRecipe:Recipe;
 
   constructor() { }
 

From 06116b3b50888eb7be4bfb9cd556f3ee845b887f Mon Sep 17 00:00:00 2001
From: Streamless Waveson <streamlesswaveson@gmail.com>
Date: Mon, 19 Dec 2016 17:14:38 -0800
Subject: [PATCH 17/17] shopping list

---
 recipe-book/src/app/app.component.html        |  1 +
 recipe-book/src/app/app.module.ts             |  6 ++++-
 .../shopping-list-add.component.html          | 24 +++++++++++++++++++
 .../shopping-list-add.component.ts            | 14 +++++++++++
 .../shopping-list.component.html              |  9 +++++++
 .../shopping-list/shopping-list.component.ts  | 14 +++++++++++
 6 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 recipe-book/src/app/shopping-list/shopping-list-add.component.html
 create mode 100644 recipe-book/src/app/shopping-list/shopping-list-add.component.ts
 create mode 100644 recipe-book/src/app/shopping-list/shopping-list.component.html
 create mode 100644 recipe-book/src/app/shopping-list/shopping-list.component.ts

diff --git a/recipe-book/src/app/app.component.html b/recipe-book/src/app/app.component.html
index 2fdcf5e..5697472 100644
--- a/recipe-book/src/app/app.component.html
+++ b/recipe-book/src/app/app.component.html
@@ -2,4 +2,5 @@
 
 <div class="container">
   <rb-recipes></rb-recipes>
+  <rb-shopping-list></rb-shopping-list>
 </div>
diff --git a/recipe-book/src/app/app.module.ts b/recipe-book/src/app/app.module.ts
index 4249d6f..e3de57d 100644
--- a/recipe-book/src/app/app.module.ts
+++ b/recipe-book/src/app/app.module.ts
@@ -9,6 +9,8 @@ import { RecipesComponent } from './recipes/recipes.component';
 import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
 import { RecipeItemComponent } from './recipes/recipe-list/recipe-item.component';
 import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
+import { ShoppingListComponent } from './shopping-list/shopping-list.component';
+import { ShoppingListAddComponent } from './shopping-list/shopping-list-add.component';
 
 @NgModule({
   declarations: [
@@ -17,7 +19,9 @@ import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.com
     RecipesComponent,
     RecipeListComponent,
     RecipeItemComponent,
-    RecipeDetailComponent
+    RecipeDetailComponent,
+    ShoppingListComponent,
+    ShoppingListAddComponent
   ],
   imports: [
     BrowserModule,
diff --git a/recipe-book/src/app/shopping-list/shopping-list-add.component.html b/recipe-book/src/app/shopping-list/shopping-list-add.component.html
new file mode 100644
index 0000000..2ad7a73
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list-add.component.html
@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="col-xs-12">
+    <form id="shopping-list-add">
+      <div class="row">
+        <div class="col-sm-5 form-group">
+          <label for="item-name">Name</label>
+          <input type="text" id="item-name" required class="form-control">
+        </div>
+
+        <div class="col-sm-2 form-group">
+          <label for="item-amount">Amount</label>
+          <input type="text" id="item-amount" required class="form-control">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12">
+          <button class="btn btn-success" type="submit">Add</button>
+          <button class="btn btn-danger" type="button">Delete Item</button>
+          <button class="btn btn-primary" type="button">Clear</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/recipe-book/src/app/shopping-list/shopping-list-add.component.ts b/recipe-book/src/app/shopping-list/shopping-list-add.component.ts
new file mode 100644
index 0000000..1d1bf77
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list-add.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'rb-shopping-list-add',
+  templateUrl: './shopping-list-add.component.html'
+})
+export class ShoppingListAddComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/recipe-book/src/app/shopping-list/shopping-list.component.html b/recipe-book/src/app/shopping-list/shopping-list.component.html
new file mode 100644
index 0000000..fe10c1e
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list.component.html
@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-xs-10">
+    <rb-shopping-list-add></rb-shopping-list-add>
+    <hr>
+    <ul class="list-group">
+      <a class="list-group-item" style="cursor: pointer"></a>
+    </ul>
+  </div>
+</div>
diff --git a/recipe-book/src/app/shopping-list/shopping-list.component.ts b/recipe-book/src/app/shopping-list/shopping-list.component.ts
new file mode 100644
index 0000000..a95ee85
--- /dev/null
+++ b/recipe-book/src/app/shopping-list/shopping-list.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'rb-shopping-list',
+  templateUrl: './shopping-list.component.html'
+})
+export class ShoppingListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}