Rebuild the app

src/app/app.component.html

@@ -1,40 +1,29 @@
 <div class="container">
-  <div class="card p-6 mt-6">
-    <h1 class="title has-text-centered">{{ title }}</h1>
+  <h1 class="title has-text-centered mt-5">{{ title }}</h1>
 
-    <!-- Todolist -->
-    <div class="m-5">
-      <div *ngIf="list.length == 0">
-        <p class="empty-list subtitle has-text-centered">Empty list</p>
-      </div>
+  <div class="card">
+    <div class="card-content">
+      <table class="table is-striped is-narrow is-fullwidth">
+        <tr *ngFor="let todoItem of todoList">
+          <td>
+            <input class="checkbox is-primary" type="checkbox" (change)="saveList()"
+                   [checked]="todoItem.completed" name="task-{{ todoItem.id }}"
+                   id="task-{{ todoItem.id }}">
+          </td>
+          <td>
+            <label for="task-{{ todoItem.id }}">{{ todoItem.task }}</label>
+          </td>
+          <td>
+            <input class="button is-danger is-primary is-pulled-right" type="button"
+                   value="remove" (click)="removeItem(todoItem.id)">
+          </td>
+        </tr>
+      </table>
 
-      <div class="columns" *ngFor="let item of list">
-        <input type="checkbox" [(ngModel)]="item.checked" (ngModelChange)="saveList()" name="{{ item.text }}" id="{{ item.text }}">
-        <label class="checkbox pl-2" for="{{ item.text }}">
-          {{ item.text }}
-        </label>
-      </div>
-    </div>
-
-    <!-- Input -->
-    <div class="columns is-multiline">
-      <div class="column">
-        <input class="input" type="text" [(ngModel)]="inputValue" (keydown.enter)="addItem()">
-      </div>
-      <div class="column is-2">
-        <button class="button is-primary" (click)="addItem()">
-          <span class="icon">
-            <i class="fa fa-plus"></i>
-          </span>
-        </button>
-      </div>
-      <div class="column is-2">
-        <button class="button is-danger" (click)="removeCheckedItems()">
-          <span class="icon">
-            <i class="fa fa-trash"></i>
-          </span>
-        </button>
-      </div>
+      <input class="input is-primary" type="text" [(ngModel)]="todoInput"
+             (keydown.enter)="addItem()">
     </div>
   </div>
+
+
 </div>

src/app/app.component.scss

@@ -1,13 +0,0 @@
-input[type=checkbox] + label {
-  transition: all 500ms;
-}
-
-input[type=checkbox]:checked + label {
-  text-decoration: line-through;
-  color: gray;
-}
-
-.empty-list {
-  color: gray;
-  font-style: italic;
-}

src/app/app.component.ts

@@ -1,56 +1,57 @@
 import {Component, OnInit} from '@angular/core';
-import TodoItem from "../models/todo-item.model";
-import LocalService from "../services/local.service";
+import TodoItem from '../models/TodoItem';
+
+const LOCAL_STORAGE_KEY: string = "todoList";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit{
   public title = 'Todo List App';
-  public list: TodoItem[] = [];
+  public todoInput!: string;
+  public todoList!: TodoItem[];
 
-  private LOCAL_STORAGE_KEY = "todoList";
-  inputValue: any;
-
-  ngOnInit(): void {
-    const savedData: null | TodoItem[] = LocalService.getData(this.LOCAL_STORAGE_KEY)
-    if (savedData) this.list = savedData;
+  ngOnInit() {
+    this.todoInput = "";
+    this.todoList = this.getSavedList();
   }
 
-  /**
-   * Create a new item if input is not empty and the item doesn't exist already
-   */
-  addItem(): void {
-    const listOfTodoText = this.list.map(item => item.text);
+  private getSavedList(): TodoItem[] {
+    console.info("Load TodoList");
 
-    if (this.inputValue && !listOfTodoText.includes(this.inputValue)) {
-      this.list.push(new TodoItem(this.inputValue))
-      this.inputValue = "";
-      this.saveList()
-    }
+    const loadedValues: string|null = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+    if (loadedValues) return JSON.parse(loadedValues) as TodoItem[];
+    return [];
   }
 
-  /**
-   * Remove a specific item of the list
-   * @param toRemove TodoItem to remove
-   */
-  removeItem(toRemove: TodoItem): void {
-    this.list = this.list.filter(item => item !== toRemove);
-    this.saveList()
+  public saveList() {
+    console.info("Save todoList");
+
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.todoList))
   }
 
-  /**
-   * Remove all checked items of the list
-   */
-  removeCheckedItems(): void {
-    this.list = this.list.filter(item => !item.checked)
-    this.saveList()
+  public addItem(): void {
+    if (!this.todoInput) return;
+
+    const newItem: TodoItem = new TodoItem(this.getNextIndex(), this.todoInput);
+    this.todoList.push(newItem);
+    this.todoInput = "";
+
+    this.saveList();
   }
 
-  saveList(): void {
-    LocalService.saveData(this.LOCAL_STORAGE_KEY, this.list);
-    console.log(this.list)
+  public removeItem(index: number): void {
+    this.todoList = this.todoList.filter(item => {
+      return item.id !== index;
+    });
+    this.saveList();
+  }
+
+  private getNextIndex() {
+    if (this.todoList.length === 0) return 1;
+    return Math.max(...this.todoList.map(item => item.id)) + 1
   }
 }

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import {FormsModule} from "@angular/forms";
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -10,7 +10,7 @@ import {FormsModule} from "@angular/forms";
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]