Angular2 + ng2-restangular + restdb.io

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>AngularCli Todo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    
    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.6/hammer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <app-root>
    loading...
  </app-root>
  </body>

</html>

body {
  background-color: lightgray;
}

### Angular Starter Plunker - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/',
    'ng2-restangular': 'http://code.2muchcoffee.com/ng2-restangular/0.1.22/esm/src'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
    'materialize-css': 'npm:materialize-css',
    'materialize': 'npm:angular2-materialize',
    'angular2-materialize': 'npm:angular2-materialize',
    //'angular2-materialize': 'npm:angular2-materialize@6.3.0/dist',
    
    'ng2-restangular':                      'ng2-restangular',
    'rxjs':                      'npm:rxjs',
    'lodash':                    'npm:lodash'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      main: "./Rx.js",
      defaultExtension: 'js'
    },
    lodash: {
      main: './index.js',
      defaultExtension: 'js'
    },
    "ng2-restangular": {
      main: './index',
      defaultExtension: 'js'
    },
    "materialize-css": {
      "main": "dist/js/materialize"
    },
    "materialize": {
      "main": "dist/materialize-directive",
      "defaultExtension": "js"
    },
    "angular2-materialize": {
      "main": "dist/index",
      "defaultExtension": "js"
    }
  }
});

//main entry point

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import {NgModule} from '@angular/core';
import {CoreModule} from './core/core.module'
import {AppComponent} from './app.component';
import {MaterializeDirective} from "angular2-materialize";
import {FormsModule} from "@angular/forms";
import {CommonModule} from "@angular/common";


@NgModule({
  declarations: [AppComponent,
                 MaterializeDirective
                ],
  imports: [ CoreModule,
             FormsModule,
             CommonModule
             ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

export class TodoModel {
    completed: boolean;
    title: string;

    constructor(title: string) {
        this.completed = false;
        this.title = title;
    }
}

import {Injectable} from '@angular/core'
import {Restangular} from "ng2-restangular";

@Injectable()
export class RestService {
    constructor(private restangular: Restangular) {}
    //methods
    getTodoList() {
        let list = this.restangular.all("list").getList();
        return list;
    }
    addTodo(todo) {
        return this.restangular.all("list").post(todo);
    }
    removeTodo(todo) {
        return todo.remove();
    }
}

export const TITLE: string = 'My todo list';

import {BrowserModule} from '@angular/platform-browser';
import {NgModule, Optional, SkipSelf} from '@angular/core';
import {HttpModule} from '@angular/http';

import {RestangularModule} from 'ng2-restangular';
import {RestService} from "../services/rest.service";

export function restangular (RestangularProvider) {
    RestangularProvider.setBaseUrl('https://todos-876a.restdb.io/rest/');
    RestangularProvider.setDefaultRequestParams({
        apikey: '586680ad69ce295b1738efe5'
    });
    RestangularProvider.setRestangularFields({
        id: "_id"
    });
}

@NgModule({
    declarations: [
    ],
    imports: [
        BrowserModule,
        HttpModule,
        RestangularModule.forRoot( restangular
        ),
    ],
    providers: [RestService],
})

export class CoreModule {
    constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
        if (parentModule) {
            throw new Error(
                'CoreModule is already loaded. Import it in the AppModule only');
        }
    }
}

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

import {RestService} from "./services/rest.service";
import {TodoModel} from "./models/todo.model";
import {TITLE} from "./share/const"

import * as _ from 'lodash';
import {Subject} from "rxjs";

@Component({
    selector: 'app-root',
    templateUrl: './src/app/app.component.html',
    styleUrls: ['./src/app/app.component.css']
})

export class AppComponent {
    title = TITLE;
    inputText: string;
    edit: boolean = false;
    public todoList;
    private _editTodo;
    private changeStatus$ = new Subject();

    constructor(private restService: RestService,) {
    }

    ngOnInit() {
        this.restService.getTodoList().subscribe(
            (res) => {
                this.todoList = res;
            },
            (err) => {
                console.log(err);
            });
        this.changeStatus$.debounceTime(1500)
            .subscribe(todo => {
                this.saveTodo(todo);
            })
    }

    addTodo() {
        let todo: TodoModel = new TodoModel(this.inputText); //!
        this.restService.addTodo(todo).subscribe(
            (res) => {
                this.todoList.push(res);
            },
            (err) => {
                console.log(err)
            }
        );
        this.inputText = "";
    }

    removeTodo(todo): void {
        this.restService.removeTodo(todo).subscribe(
            (res) => {
                _.remove(this.todoList, {_id: res.result[0]});
            },
            (err) => {
                console.log(err)
            }
        );
    }

    editTodo(todo): void {
        this.edit = true;
        this._editTodo = todo;
        this.inputText = todo.title;
    }

    saveTodo(editTodo) {
        editTodo.put().subscribe(
            (res) => {
            },
            (err) => {
                console.log(err);
            }
        );
    }

    changeCompleted(todo) {
        this.changeStatus$.next(todo);
    }

    saveTodoTittle() {
        this._editTodo.title = this.inputText;
        this.saveTodo(this._editTodo);
        this.edit = false;
        this._editTodo = null;
        this.inputText = "";
    }
}

.center-align {
  font-size: 70px;
  color: white;
}

li.row {
  margin-bottom: 0;
}
li.row > div > .card > .card-content {
  font-size: 20px;
  padding-bottom: 2px;
}
li.row > div > .card > .card-content > .card-action {
  padding-left: 0;
}

<section class="container">
    <h1 class="center-align">
        {{title}}
    </h1>
    <input type=text name="todo" id="todo" placeholder="What needs to be done?"
           [(ngModel)]="inputText">
    <button *ngIf="!edit" (click)="addTodo()" class="waves-effect waves-light btn">Add</button>
    <button *ngIf="edit" (click)="saveTodoTittle()" class="waves-effect waves-light btn">Save</button>
    <ul *ngIf="todoList">
        <li *ngFor="let todo of todoList" class="row">
            <div class="col s12 m8 offset-m2">
                <div class="card blue-grey darken-1">
                    <div class="card-content white-text">
                        <div class="switch">
                            <label>
                                Uncompleted
                                <input type="checkbox"
                                       [(ngModel)]="todo.completed"
                                       (change)="changeCompleted(todo)">
                                <span class="lever"></span>
                                Completed
                            </label>
                        </div>
                        <span (dblclick)="editTodo(todo)">{{todo.title}}</span>
                        <div class="card-action">
                            <a (click)="removeTodo(todo)" class="waves-effect waves-light btn">Delete</a>
                            <a (click)="editTodo(todo)" class="waves-effect waves-light btn">Edit</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</section>