cpanuphan

ng generate service TodoData

cpanuphan

h1 {
    text-align: center;
}

.example-full-width {
    width: 100%;
}

cpanuphan

<app-todo-add></app-todo-add>

cpanuphan

import { Component } from '@angular/core';
import { TodoItem } from '../todo-item';

@Component({
  selector: 'app-todo-add',
  templateUrl: './todo-add.component.html',
  styleUrls: ['./todo-add.component.css']
})
export class TodoAddComponent {

cpanuphan

import {MatInputModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatInputModule],
  ...
})

cpanuphan

export class TodoItem {
    id: number;
    name: string;
    isComplete: boolean;

    constructor(values: Object = {}) {
        Object.assign(this, values);
    }
}

cpanuphan

<h1>Todos</h1>
<mat-form-field class="example-full-width">
  <input matInput placeholder="What needs to be done?" autofocus="" 
  [(ngModel)]="newTodo.name" (keyup.enter)="onAddTodo()">
</mat-form-field>

cpanuphan

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

cpanuphan

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

cpanuphan

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})