Skip to content
Permalink
Browse files

CREATE: using the input form

  • Loading branch information
amejiarosario committed Nov 7, 2019
1 parent 83c0c17 commit dd432b490f5553acabe82327a9c68073dc60af24
Showing with 27 additions and 2 deletions.
  1. +5 −1 src/app/app.module.ts
  2. +5 −1 src/app/todo/todo.component.html
  3. +9 −0 src/app/todo/todo.component.ts
  4. +8 −0 src/app/todo/todo.service.ts
@@ -1,18 +1,22 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TodoComponent } from './todo/todo.component';



@NgModule({
declarations: [
AppComponent,
TodoComponent
],
imports: [
BrowserModule,
AppRoutingModule
AppRoutingModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
@@ -2,7 +2,11 @@

<header class="header">
<h1>Todo</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus>
<input class="new-todo"
placeholder="What needs to be done?"
[(ngModel)]="newTodo"
(keyup.enter)="addTodo()"
autofocus>
</header>

<!-- This section should be hidden by default and shown when there are todos -->
@@ -10,9 +10,18 @@ import { TodoService } from './todo.service';
export class TodoComponent implements OnInit {
private todos;
private activeTasks;
private newTodo;

constructor(private todoService: TodoService) { }

addTodo(){
this.todoService.add({ title: this.newTodo, isDone: false }).then(() => {
return this.getTodos();
}).then(() => {
this.newTodo = ''; // clear input form value
});
}

getTodos(){
return this.todoService.get().then(todos => {
this.todos = todos;
@@ -17,4 +17,12 @@ export class TodoService {
get() {
return new Promise(resolve => resolve(TODOS));
}

add(data) {
return new Promise(resolve => {
TODOS.push(data);
resolve(data);
});
}

}

0 comments on commit dd432b4

Please sign in to comment.
You can’t perform that action at this time.