Skip to content
Permalink
Browse files

READ: Get all tasks

  • Loading branch information
amejiarosario committed Nov 7, 2019
1 parent 9e5d935 commit 83c0c17392d5ccc2341a3619f4a4e1c1296cc1f1
Showing with 31 additions and 18 deletions.
  1. +6 −15 src/app/todo/todo.component.html
  2. +14 −3 src/app/todo/todo.component.ts
  3. +11 −0 src/app/todo/todo.service.ts
@@ -9,31 +9,22 @@ <h1>Todo</h1>
<section class="main">

<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li class="completed">
<li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >
<div class="view">
<input class="toggle" type="checkbox" checked>
<label>Install angular-cli</label>
<input class="toggle" type="checkbox" [checked]="todo.isDone">
<label>{{todo.title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
<li>
<div class="view">
<input class="toggle" type="checkbox">
<label>Understand Angular2 apps</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Rule the web">
<input class="edit" value="{{todo.title}}">
</li>
</ul>

</section>

<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>0</strong> item left</span>
<span class="todo-count"><strong>{{activeTasks}}</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
@@ -1,15 +1,26 @@
import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service';

@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.scss']
styleUrls: ['./todo.component.scss'],
providers: [TodoService]
})
export class TodoComponent implements OnInit {
private todos;
private activeTasks;

constructor() { }
constructor(private todoService: TodoService) { }

ngOnInit() {
getTodos(){
return this.todoService.get().then(todos => {
this.todos = todos;
this.activeTasks = this.todos.filter(todo => todo.isDone).length;
});
}

ngOnInit() {
this.getTodos();
}
}
@@ -1,9 +1,20 @@
import { Injectable } from '@angular/core';

const TODOS = [
{ title: 'Install Angular CLI', isDone: true },
{ title: 'Style app', isDone: true },
{ title: 'Finish service functionality', isDone: false },
{ title: 'Setup API', isDone: false },
];

@Injectable({
providedIn: 'root'
})
export class TodoService {

constructor() { }

get() {
return new Promise(resolve => resolve(TODOS));
}
}

0 comments on commit 83c0c17

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