├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.scss
    │   ├── about
    │   │   ├── about.component.scss
    │   │   ├── about.component.html
    │   │   ├── about.component.spec.ts
    │   │   └── about.component.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── data.service.ts
    │   ├── data.service.spec.ts
    │   ├── app-routing.module.ts
    │   ├── home
    │   │   ├── home.component.scss
    │   │   ├── home.component.spec.ts
    │   │   ├── home.component.html
    │   │   └── home.component.ts
    │   ├── app.module.ts
    │   └── app.component.spec.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── typings.d.ts
    ├── tsconfig.app.json
    ├── index.html
    ├── tsconfig.spec.json
    ├── main.ts
    ├── styles.scss
    ├── test.ts
    └── polyfills.ts
├── e2e
    ├── app.po.ts
    ├── tsconfig.e2e.json
    └── app.e2e-spec.ts
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── protractor.conf.js
├── karma.conf.js
├── README.md
├── .angular-cli.json
├── package.json
└── tslint.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/about/about.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/designcourse/ng5/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <!--The content below is only a placeholder and can be replaced.-->
2 | 
3 | <ul>
4 |   <li><a routerLink="">Home</a></li>
5 |   <li><a routerLink="about/48">About</a></li>
6 | </ul>
7 | 
8 | <router-outlet></router-outlet>


--------------------------------------------------------------------------------
/src/app/about/about.component.html:
--------------------------------------------------------------------------------
 1 | <p>
 2 |   This is what I'm all about. <a href="" (click)="sendMeHome()"><strong>Take me back</strong></a>.
 3 | </p>
 4 | 
 5 | <ul>
 6 |   <li *ngFor="let goal of goals">
 7 |     {{ goal }}
 8 |   </li>
 9 | </ul>
10 | 


--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.scss']
 7 | })
 8 | 
 9 | export class AppComponent {
10 |   title = 'app';
11 | }
12 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('ng5 App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Ng5</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   },
13 |   "files": [
14 |     "test.ts"
15 |   ],
16 |   "include": [
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/app/data.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 3 | 
 4 | @Injectable()
 5 | 
 6 | export class DataService {
 7 | 
 8 |   private goals = new BehaviorSubject<any>(['The initial goal', 'Another silly life goal']);
 9 |   goal = this.goals.asObservable();
10 | 
11 |   constructor() { }
12 | 
13 |   changeGoal(goal) {
14 |     this.goals.next(goal);
15 |   }
16 | 
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/data.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, inject } from '@angular/core/testing';
 2 | 
 3 | import { DataService } from './data.service';
 4 | 
 5 | describe('DataService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [DataService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([DataService], (service: DataService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | 
 3 | @import url('https://fonts.googleapis.com/css?family=Raleway:300,700');
 4 | 
 5 | body {
 6 |     background:#2E9CE6;
 7 |     padding: 3em;
 8 |     font-family: 'Raleway', 'Arial';
 9 |     color:#fff;
10 | }
11 | ul {
12 |     list-style-type:none;
13 |     margin:0 0 2em 0;
14 |     padding:0;
15 | }
16 | ul li {
17 |     display:inline;
18 |     margin-right: 30px;
19 | }
20 | ul li a {
21 |     font-size: 1.5em;
22 | }
23 | a {
24 |     color:#fff;
25 |     text-decoration:none;
26 | }


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | import { HomeComponent } from './home/home.component';     // Add this
 4 | import { AboutComponent } from './about/about.component';  // Add this
 5 | 
 6 | const routes: Routes = [
 7 |   {
 8 |     path: '',
 9 |     component: HomeComponent
10 |   },
11 |   {
12 |     path: 'about/:id',
13 |     component: AboutComponent
14 |   }
15 | ];
16 | 
17 | @NgModule({
18 |   imports: [RouterModule.forRoot(routes)],
19 |   exports: [RouterModule]
20 | })
21 | export class AppRoutingModule { }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     display: grid;
 3 |     grid-template-columns: 50% auto;
 4 | }
 5 | .col {
 6 |     padding: .4em 1.3em;
 7 | }
 8 | .color-dark {
 9 |     background: #2885C4;
10 | }
11 | .color-light {
12 |     background: #57B3F1;
13 | }
14 | 
15 | input.txt {
16 |     border: 0;
17 |     padding: 1em;
18 |     width: 80%;
19 |     margin-bottom: 2em;
20 | }
21 | input.btn {
22 |     border: 0;
23 |     display:block;
24 |     padding:1em 3em;
25 |     background:#A5F883;
26 |     color:#003A61;
27 |     margin-bottom:1em;
28 |     cursor:pointer;
29 | }
30 | .life-container {
31 |     background:#3FA0E1;
32 |     padding:.5em;
33 |     font-weight:bold;
34 |     cursor:pointer;
35 | }


--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HomeComponent } from './home.component';
 4 | 
 5 | describe('HomeComponent', () => {
 6 |   let component: HomeComponent;
 7 |   let fixture: ComponentFixture<HomeComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ HomeComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HomeComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/about/about.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { AboutComponent } from './about.component';
 4 | 
 5 | describe('AboutComponent', () => {
 6 |   let component: AboutComponent;
 7 |   let fixture: ComponentFixture<AboutComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ AboutComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(AboutComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/about/about.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { ActivatedRoute } from '@angular/router';
 3 | import { Router } from '@angular/router'; 
 4 | import { DataService } from '../data.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-about',
 8 |   templateUrl: './about.component.html',
 9 |   styleUrls: ['./about.component.scss']
10 | })
11 | export class AboutComponent implements OnInit {
12 | 
13 |   goals: any;
14 | 
15 |   constructor(private route: ActivatedRoute, private router: Router, private _data: DataService) { 
16 |     this.route.params.subscribe(res => console.log(res.id));
17 |   }
18 | 
19 |   ngOnInit() {
20 |     this._data.goal.subscribe(res => this.goals = res);
21 |   }
22 | 
23 | 
24 |   sendMeHome() {
25 |     this.router.navigate(['']);
26 |   }
27 | 
28 | }
29 | 


--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './e2e/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <div class="container color-dark">
 3 |   <div class="col">
 4 |     <p>Add a bucket list item</p>
 5 |   </div>
 6 |   <div class="col">
 7 |     <p>Your bucket list ({{ itemCount }})</p>
 8 |   </div>
 9 | </div>
10 | <div class="container color-light" [@goals]="goals.length">
11 |   <div class="col">
12 |     <p class="sm">Use this form below to add a new bucket list goal. What do you want to do with your life?</p>
13 | 
14 |     <form>
15 |       <input type="text" class="txt" name="item" placeholder="Life goal.." [(ngModel)]="goalText">
16 |       <input type="submit" class="btn" [value]="btnText" (click)="addItem()">
17 |     </form>
18 |   </div>
19 |   <div class="col">
20 |     <p class="life-container" *ngFor="let goal of goals; let i = index" (click)="removeItem(i)">
21 |       {{ goal }}
22 |     </p>
23 |   </div>
24 | </div>


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { DataService } from './data.service';
 5 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 6 | import { FormsModule } from '@angular/forms';
 7 | import { AppRoutingModule } from './app-routing.module';
 8 | import { AppComponent } from './app.component';
 9 | import { HomeComponent } from './home/home.component';
10 | import { AboutComponent } from './about/about.component';
11 | 
12 | @NgModule({
13 |   declarations: [
14 |     AppComponent,
15 |     HomeComponent,
16 |     AboutComponent
17 |   ],
18 |   imports: [
19 |     BrowserModule,
20 |     AppRoutingModule,
21 |     FormsModule,
22 |     BrowserAnimationsModule
23 |   ],
24 |   providers: [DataService],
25 |   bootstrap: [AppComponent]
26 | })
27 | export class AppModule { }
28 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular/cli'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Ng5
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
 4 | 
 5 | ## Development server
 6 | 
 7 | 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.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | 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.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | 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).
28 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | describe('AppComponent', () => {
 5 |   beforeEach(async(() => {
 6 |     TestBed.configureTestingModule({
 7 |       imports: [
 8 |         RouterTestingModule
 9 |       ],
10 |       declarations: [
11 |         AppComponent
12 |       ],
13 |     }).compileComponents();
14 |   }));
15 |   it('should create the app', async(() => {
16 |     const fixture = TestBed.createComponent(AppComponent);
17 |     const app = fixture.debugElement.componentInstance;
18 |     expect(app).toBeTruthy();
19 |   }));
20 |   it(`should have as title 'app'`, async(() => {
21 |     const fixture = TestBed.createComponent(AppComponent);
22 |     const app = fixture.debugElement.componentInstance;
23 |     expect(app.title).toEqual('app');
24 |   }));
25 |   it('should render title in a h1 tag', async(() => {
26 |     const fixture = TestBed.createComponent(AppComponent);
27 |     fixture.detectChanges();
28 |     const compiled = fixture.debugElement.nativeElement;
29 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
30 |   }));
31 | });
32 | 


--------------------------------------------------------------------------------
/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "project": {
 4 |     "name": "ng5"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico"
13 |       ],
14 |       "index": "index.html",
15 |       "main": "main.ts",
16 |       "polyfills": "polyfills.ts",
17 |       "test": "test.ts",
18 |       "tsconfig": "tsconfig.app.json",
19 |       "testTsconfig": "tsconfig.spec.json",
20 |       "prefix": "app",
21 |       "styles": [
22 |         "styles.scss"
23 |       ],
24 |       "scripts": [],
25 |       "environmentSource": "environments/environment.ts",
26 |       "environments": {
27 |         "dev": "environments/environment.ts",
28 |         "prod": "environments/environment.prod.ts"
29 |       }
30 |     }
31 |   ],
32 |   "e2e": {
33 |     "protractor": {
34 |       "config": "./protractor.conf.js"
35 |     }
36 |   },
37 |   "lint": [
38 |     {
39 |       "project": "src/tsconfig.app.json",
40 |       "exclude": "**/node_modules/**"
41 |     },
42 |     {
43 |       "project": "src/tsconfig.spec.json",
44 |       "exclude": "**/node_modules/**"
45 |     },
46 |     {
47 |       "project": "e2e/tsconfig.e2e.json",
48 |       "exclude": "**/node_modules/**"
49 |     }
50 |   ],
51 |   "test": {
52 |     "karma": {
53 |       "config": "./karma.conf.js"
54 |     }
55 |   },
56 |   "defaults": {
57 |     "styleExt": "scss",
58 |     "component": {}
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng5",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve",
 8 |     "build": "ng build",
 9 |     "test": "ng test",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^5.0.0",
16 |     "@angular/common": "^5.0.0",
17 |     "@angular/compiler": "^5.0.0",
18 |     "@angular/core": "^5.0.0",
19 |     "@angular/forms": "^5.0.0",
20 |     "@angular/http": "^5.0.0",
21 |     "@angular/platform-browser": "^5.0.0",
22 |     "@angular/platform-browser-dynamic": "^5.0.0",
23 |     "@angular/router": "^5.0.0",
24 |     "core-js": "^2.4.1",
25 |     "rxjs": "^5.5.2",
26 |     "zone.js": "^0.8.14"
27 |   },
28 |   "devDependencies": {
29 |     "@angular/cli": "1.5.0",
30 |     "@angular/compiler-cli": "^5.0.0",
31 |     "@angular/language-service": "^5.0.0",
32 |     "@types/jasmine": "~2.5.53",
33 |     "@types/jasminewd2": "~2.0.2",
34 |     "@types/node": "~6.0.60",
35 |     "codelyzer": "~3.2.0",
36 |     "jasmine-core": "~2.6.2",
37 |     "jasmine-spec-reporter": "~4.1.0",
38 |     "karma": "~1.7.0",
39 |     "karma-chrome-launcher": "~2.1.1",
40 |     "karma-cli": "~1.0.1",
41 |     "karma-coverage-istanbul-reporter": "^1.2.1",
42 |     "karma-jasmine": "~1.1.0",
43 |     "karma-jasmine-html-reporter": "^0.2.2",
44 |     "protractor": "~5.1.2",
45 |     "ts-node": "~3.2.0",
46 |     "tslint": "~5.7.0",
47 |     "typescript": "~2.4.2"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';
 3 | import { DataService } from '../data.service';
 4 | 
 5 | @Component({
 6 |   selector: 'app-home',
 7 |   templateUrl: './home.component.html',
 8 |   styleUrls: ['./home.component.scss'],
 9 |   animations: [
10 | 
11 |     trigger('goals', [
12 |       transition('* => *', [
13 |         query(':enter', style({ opacity: 0 }), {optional: true}),
14 | 
15 |         query(':enter', stagger('300ms', [
16 |           animate('.6s ease-in', keyframes([
17 |             style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
18 |             style({opacity: .5, transform: 'translateY(35px)', offset: .3}),
19 |             style({opacity: 1, transform: 'translateY(0)', offset: 1}),
20 |           ]))]), {optional: true}),
21 | 
22 |         query(':leave', stagger('300ms', [
23 |           animate('.6s ease-in', keyframes([
24 |             style({opacity: 1, transform: 'translateY(0)', offset: 0}),
25 |             style({opacity: .5, transform: 'translateY(35px)', offset: .3}),
26 |             style({opacity: 0, transform: 'translateY(-75%)', offset: 1}),
27 |           ]))]), {optional: true})
28 |       ])
29 |     ])
30 | 
31 |   ]
32 | })
33 | export class HomeComponent implements OnInit {
34 | 
35 |   itemCount: number;
36 |   btnText: string = 'Add an item';
37 |   goalText: string = 'My first life goal';
38 |   goals = [];
39 | 
40 |   constructor(private _data: DataService) { }
41 | 
42 |   ngOnInit() {
43 |     this._data.goal.subscribe(res => this.goals = res);
44 |     this.itemCount = this.goals.length;
45 |     this._data.changeGoal(this.goals);
46 |   }
47 | 
48 |   addItem() {
49 |     this.goals.push(this.goalText);
50 |     this.goalText = '';
51 |     this.itemCount = this.goals.length;
52 |     this._data.changeGoal(this.goals);
53 |   }
54 | 
55 |   removeItem(i) {
56 |     this.goals.splice(i, 1);
57 |     this._data.changeGoal(this.goals);
58 |   }
59 | 
60 | }
61 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Required to support Web Animations `@angular/platform-browser/animations`.
51 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
52 |  **/
53 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
54 | 
55 | 
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | 
64 | /***************************************************************************************************
65 |  * APPLICATION IMPORTS
66 |  */
67 | 
68 | /**
69 |  * Date, currency, decimal and percent pipes.
70 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
71 |  */
72 | // import 'intl';  // Run `npm install --save intl`.
73 | /**
74 |  * Need to import at least one locale-data with intl.
75 |  */
76 | // import 'intl/locale-data/jsonp/en';
77 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "eofline": true,
 15 |     "forin": true,
 16 |     "import-blacklist": [
 17 |       true,
 18 |       "rxjs",
 19 |       "rxjs/Rx"
 20 |     ],
 21 |     "import-spacing": true,
 22 |     "indent": [
 23 |       true,
 24 |       "spaces"
 25 |     ],
 26 |     "interface-over-type-literal": true,
 27 |     "label-position": true,
 28 |     "max-line-length": [
 29 |       true,
 30 |       140
 31 |     ],
 32 |     "member-access": false,
 33 |     "member-ordering": [
 34 |       true,
 35 |       {
 36 |         "order": [
 37 |           "static-field",
 38 |           "instance-field",
 39 |           "static-method",
 40 |           "instance-method"
 41 |         ]
 42 |       }
 43 |     ],
 44 |     "no-arg": true,
 45 |     "no-bitwise": true,
 46 |     "no-console": [
 47 |       true,
 48 |       "debug",
 49 |       "info",
 50 |       "time",
 51 |       "timeEnd",
 52 |       "trace"
 53 |     ],
 54 |     "no-construct": true,
 55 |     "no-debugger": true,
 56 |     "no-duplicate-super": true,
 57 |     "no-empty": false,
 58 |     "no-empty-interface": true,
 59 |     "no-eval": true,
 60 |     "no-inferrable-types": [
 61 |       true,
 62 |       "ignore-params"
 63 |     ],
 64 |     "no-misused-new": true,
 65 |     "no-non-null-assertion": true,
 66 |     "no-shadowed-variable": true,
 67 |     "no-string-literal": false,
 68 |     "no-string-throw": true,
 69 |     "no-switch-case-fall-through": true,
 70 |     "no-trailing-whitespace": true,
 71 |     "no-unnecessary-initializer": true,
 72 |     "no-unused-expression": true,
 73 |     "no-use-before-declare": true,
 74 |     "no-var-keyword": true,
 75 |     "object-literal-sort-keys": false,
 76 |     "one-line": [
 77 |       true,
 78 |       "check-open-brace",
 79 |       "check-catch",
 80 |       "check-else",
 81 |       "check-whitespace"
 82 |     ],
 83 |     "prefer-const": true,
 84 |     "quotemark": [
 85 |       true,
 86 |       "single"
 87 |     ],
 88 |     "radix": true,
 89 |     "semicolon": [
 90 |       true,
 91 |       "always"
 92 |     ],
 93 |     "triple-equals": [
 94 |       true,
 95 |       "allow-null-check"
 96 |     ],
 97 |     "typedef-whitespace": [
 98 |       true,
 99 |       {
100 |         "call-signature": "nospace",
101 |         "index-signature": "nospace",
102 |         "parameter": "nospace",
103 |         "property-declaration": "nospace",
104 |         "variable-declaration": "nospace"
105 |       }
106 |     ],
107 |     "typeof-compare": true,
108 |     "unified-signatures": true,
109 |     "variable-name": false,
110 |     "whitespace": [
111 |       true,
112 |       "check-branch",
113 |       "check-decl",
114 |       "check-operator",
115 |       "check-separator",
116 |       "check-type"
117 |     ],
118 |     "directive-selector": [
119 |       true,
120 |       "attribute",
121 |       "app",
122 |       "camelCase"
123 |     ],
124 |     "component-selector": [
125 |       true,
126 |       "element",
127 |       "app",
128 |       "kebab-case"
129 |     ],
130 |     "use-input-property-decorator": true,
131 |     "use-output-property-decorator": true,
132 |     "use-host-property-decorator": true,
133 |     "no-input-rename": true,
134 |     "no-output-rename": true,
135 |     "use-life-cycle-interface": true,
136 |     "use-pipe-transform-interface": true,
137 |     "component-class-suffix": true,
138 |     "directive-class-suffix": true,
139 |     "invoke-injectable": true
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------