From af8c2a127b34bfa9fcb8c842cdb730dae7d941c0 Mon Sep 17 00:00:00 2001
From: Bulat <bulatkazan@yahoo.com>
Date: Wed, 11 Oct 2023 21:36:55 +0300
Subject: [PATCH 1/4] feat: extract logic from to todo-item to todo-edit

---
 src/app/app.module.ts                         |  4 ++-
 src/app/todo-edit/todo-edit.component.css     |  0
 src/app/todo-edit/todo-edit.component.html    | 13 ++++++++
 src/app/todo-edit/todo-edit.component.spec.ts | 21 +++++++++++++
 src/app/todo-edit/todo-edit.component.ts      | 30 +++++++++++++++++++
 src/app/todo-item/todo-item.component.html    | 20 +++++--------
 6 files changed, 74 insertions(+), 14 deletions(-)
 create mode 100644 src/app/todo-edit/todo-edit.component.css
 create mode 100644 src/app/todo-edit/todo-edit.component.html
 create mode 100644 src/app/todo-edit/todo-edit.component.spec.ts
 create mode 100644 src/app/todo-edit/todo-edit.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 61dcb3f..92831f8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { AppComponent } from './app.component';
 import { TaskFormComponent } from './task-form/task-form.component';
 import { TodosListComponent } from './todos-list/todos-list.component';
 import { TodoItemComponent } from './todo-item/todo-item.component';
+import { TodoEditComponent } from './todo-edit/todo-edit.component';
 
 
 @NgModule({
@@ -24,7 +25,8 @@ import { TodoItemComponent } from './todo-item/todo-item.component';
     AppComponent,
     TaskFormComponent,
     TodosListComponent,
-    TodoItemComponent
+    TodoItemComponent,
+    TodoEditComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/todo-edit/todo-edit.component.css b/src/app/todo-edit/todo-edit.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/todo-edit/todo-edit.component.html b/src/app/todo-edit/todo-edit.component.html
new file mode 100644
index 0000000..a67552a
--- /dev/null
+++ b/src/app/todo-edit/todo-edit.component.html
@@ -0,0 +1,13 @@
+<mat-form-field>
+  <mat-label>Input</mat-label>
+  <input
+    matInput
+    [ngClass]="onStylesChange()"
+    type="text"
+    #inputRef
+    (change)="onChildInputChange(todoItemChild, inputRef.value)"
+    formControlName="todoItemForm"
+    [attr.disabled]="isDisabledChild"
+  >
+  <mat-error *ngIf="todoFormChild.invalid">{{onErrorChildHandle()}}</mat-error>
+</mat-form-field>
diff --git a/src/app/todo-edit/todo-edit.component.spec.ts b/src/app/todo-edit/todo-edit.component.spec.ts
new file mode 100644
index 0000000..ba0204c
--- /dev/null
+++ b/src/app/todo-edit/todo-edit.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoEditComponent } from './todo-edit.component';
+
+describe('TodoEditComponent', () => {
+  let component: TodoEditComponent;
+  let fixture: ComponentFixture<TodoEditComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TodoEditComponent]
+    });
+    fixture = TestBed.createComponent(TodoEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/todo-edit/todo-edit.component.ts b/src/app/todo-edit/todo-edit.component.ts
new file mode 100644
index 0000000..add6737
--- /dev/null
+++ b/src/app/todo-edit/todo-edit.component.ts
@@ -0,0 +1,30 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Todo} from "../todo";
+import {FormGroup} from "@angular/forms";
+
+@Component({
+  selector: 'app-todo-edit',
+  templateUrl: './todo-edit.component.html',
+  styleUrls: ['./todo-edit.component.css']
+})
+export class TodoEditComponent {
+  @Output() getErrorMessageChild = new EventEmitter();
+  // @Output() updateTodoChild = new EventEmitter();
+  @Output() updateClassesChild = new EventEmitter();
+
+  @Input() todoFormChild!: FormGroup;
+  @Input() isDisabledChild!: true | null;
+  // @Input() todoItemChild!: Todo;
+
+  onErrorChildHandle() {
+    this.getErrorMessageChild.emit();
+  }
+
+  onStylesChange():any {
+    this.updateClassesChild.emit();
+  }
+
+  // onChildInputChange(todo: Todo, val: string) {
+  //   this.updateTodoChild({id: todo.id, name: val});
+  // }
+}
diff --git a/src/app/todo-item/todo-item.component.html b/src/app/todo-item/todo-item.component.html
index 93bd1b7..6d37d7c 100644
--- a/src/app/todo-item/todo-item.component.html
+++ b/src/app/todo-item/todo-item.component.html
@@ -2,19 +2,13 @@
   <mat-card-content>
     <form [formGroup]="todoForm">
       <mat-checkbox [checked]="isChecked" (click)="onCheckboxChange()" color="primary">Done</mat-checkbox>
-      <mat-form-field>
-        <mat-label>Input</mat-label>
-        <input
-          matInput
-          [ngClass]="setClasses()"
-          type="text"
-          #inputRef
-          (change)="updateTodo(todoItem, inputRef.value)"
-          formControlName="todoItemForm"
-          [attr.disabled]="isDisabled"
-        >
-        <mat-error *ngIf="todoForm.invalid">{{getErrorMessage()}}</mat-error>
-      </mat-form-field>
+      <app-todo-edit
+        [todoFormChild]="todoForm"
+        (getErrorMessageChild)="getErrorMessage()"
+        [isDisabledChild]="isDisabled"
+        (updateClassesChild)="setClasses()"
+      >
+      </app-todo-edit>
       <mat-form-field>
         <mat-label>Priorities</mat-label>
         <select matNativeControl required (change)="onSelectChange($event)" [disabled]="isChecked">

From d8a07648123d3c43202e9a0883b9906fc6a2a707 Mon Sep 17 00:00:00 2001
From: Bulat <bulatkazan@yahoo.com>
Date: Thu, 12 Oct 2023 14:00:07 +0300
Subject: [PATCH 2/4] feat: lift updateTodo event binding

---
 src/app/todo-edit/todo-edit.component.ts   | 10 +++++-----
 src/app/todo-item/todo-item.component.html |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/todo-edit/todo-edit.component.ts b/src/app/todo-edit/todo-edit.component.ts
index add6737..e8d840c 100644
--- a/src/app/todo-edit/todo-edit.component.ts
+++ b/src/app/todo-edit/todo-edit.component.ts
@@ -9,12 +9,12 @@ import {FormGroup} from "@angular/forms";
 })
 export class TodoEditComponent {
   @Output() getErrorMessageChild = new EventEmitter();
-  // @Output() updateTodoChild = new EventEmitter();
+  @Output() updateTodoChildEvent = new EventEmitter();
   @Output() updateClassesChild = new EventEmitter();
 
   @Input() todoFormChild!: FormGroup;
   @Input() isDisabledChild!: true | null;
-  // @Input() todoItemChild!: Todo;
+  @Input() todoItemChild!: Todo;
 
   onErrorChildHandle() {
     this.getErrorMessageChild.emit();
@@ -24,7 +24,7 @@ export class TodoEditComponent {
     this.updateClassesChild.emit();
   }
 
-  // onChildInputChange(todo: Todo, val: string) {
-  //   this.updateTodoChild({id: todo.id, name: val});
-  // }
+  onChildInputChange(todo: Todo, val: string) {
+    this.updateTodoChildEvent.emit({id: todo.id, name: val});
+  }
 }
diff --git a/src/app/todo-item/todo-item.component.html b/src/app/todo-item/todo-item.component.html
index 6d37d7c..5057700 100644
--- a/src/app/todo-item/todo-item.component.html
+++ b/src/app/todo-item/todo-item.component.html
@@ -4,8 +4,9 @@
       <mat-checkbox [checked]="isChecked" (click)="onCheckboxChange()" color="primary">Done</mat-checkbox>
       <app-todo-edit
         [todoFormChild]="todoForm"
-        (getErrorMessageChild)="getErrorMessage()"
         [isDisabledChild]="isDisabled"
+        [todoItemChild]="todoItem"
+        (getErrorMessageChild)="getErrorMessage()"
         (updateClassesChild)="setClasses()"
       >
       </app-todo-edit>

From 938c0146ccb81a39e875daf867332d928666f720 Mon Sep 17 00:00:00 2001
From: Bulat <bulatkazan@yahoo.com>
Date: Thu, 12 Oct 2023 17:24:08 +0300
Subject: [PATCH 3/4] feat: move logic to todo-edit

---
 src/app/todo-edit/todo-edit.component.css    | 16 +++++++
 src/app/todo-edit/todo-edit.component.html   | 28 +++++------
 src/app/todo-edit/todo-edit.component.ts     | 49 ++++++++++++++++----
 src/app/todo-item/todo-item.component.css    | 17 ++-----
 src/app/todo-item/todo-item.component.html   | 13 +++---
 src/app/todo-item/todo-item.component.ts     | 36 +-------------
 src/app/todo.service.ts                      |  2 -
 src/app/todos-list/todos-list.component.html |  2 +-
 8 files changed, 84 insertions(+), 79 deletions(-)

diff --git a/src/app/todo-edit/todo-edit.component.css b/src/app/todo-edit/todo-edit.component.css
index e69de29..b736363 100644
--- a/src/app/todo-edit/todo-edit.component.css
+++ b/src/app/todo-edit/todo-edit.component.css
@@ -0,0 +1,16 @@
+.textDeprecated {
+  color: grey;
+  text-decoration: line-through;
+}
+
+.high {
+  background-color: red;
+}
+
+.medium {
+  background-color: yellow;
+}
+
+.low {
+  background-color: green;
+}
diff --git a/src/app/todo-edit/todo-edit.component.html b/src/app/todo-edit/todo-edit.component.html
index a67552a..98d4270 100644
--- a/src/app/todo-edit/todo-edit.component.html
+++ b/src/app/todo-edit/todo-edit.component.html
@@ -1,13 +1,15 @@
-<mat-form-field>
-  <mat-label>Input</mat-label>
-  <input
-    matInput
-    [ngClass]="onStylesChange()"
-    type="text"
-    #inputRef
-    (change)="onChildInputChange(todoItemChild, inputRef.value)"
-    formControlName="todoItemForm"
-    [attr.disabled]="isDisabledChild"
-  >
-  <mat-error *ngIf="todoFormChild.invalid">{{onErrorChildHandle()}}</mat-error>
-</mat-form-field>
+<form [formGroup]="todoFormChild">
+  <mat-form-field>
+    <mat-label>Input</mat-label>
+    <input
+      matInput
+      [ngClass]="setClasses()"
+      type="text"
+      #inputRef
+      (change)="onChildInputChange(todoItemChild, inputRef.value)"
+      formControlName="todoItemForm"
+      [attr.disabled]="isDisabledChild"
+    >
+    <mat-error *ngIf="todoFormChild.invalid">{{getErrorMessage()}}</mat-error>
+  </mat-form-field>
+</form>
diff --git a/src/app/todo-edit/todo-edit.component.ts b/src/app/todo-edit/todo-edit.component.ts
index e8d840c..cfa1686 100644
--- a/src/app/todo-edit/todo-edit.component.ts
+++ b/src/app/todo-edit/todo-edit.component.ts
@@ -8,23 +8,54 @@ import {FormGroup} from "@angular/forms";
   styleUrls: ['./todo-edit.component.css']
 })
 export class TodoEditComponent {
-  @Output() getErrorMessageChild = new EventEmitter();
+  // @Output() getErrorMessageChild = new EventEmitter();
   @Output() updateTodoChildEvent = new EventEmitter();
-  @Output() updateClassesChild = new EventEmitter();
 
   @Input() todoFormChild!: FormGroup;
-  @Input() isDisabledChild!: true | null;
   @Input() todoItemChild!: Todo;
 
-  onErrorChildHandle() {
-    this.getErrorMessageChild.emit();
-  }
+  @Input() isDisabledChild!: true | null;
+  @Input() tasksStatusChild: string = 'low';
+  @Input() isCheckedChild: boolean = false;
 
-  onStylesChange():any {
-    this.updateClassesChild.emit();
-  }
+  // onErrorChildHandle() {
+  //   this.getErrorMessageChild.emit();
+  // }
 
   onChildInputChange(todo: Todo, val: string) {
     this.updateTodoChildEvent.emit({id: todo.id, name: val});
   }
+
+  setInputBackground() {
+    switch(this.tasksStatusChild) {
+      case 'high':
+        return 'high';
+      case 'medium':
+        return 'medium';
+      case 'low':
+        return 'low';
+      default:
+        return '';
+    }
+  }
+
+  setInputDecorations() {
+    return this.isCheckedChild ? 'textDeprecated' : '';
+  }
+
+  setClasses() {
+    return {
+      [this.setInputDecorations()]: true,
+      [this.setInputBackground()]: true
+    };
+  }
+
+  getErrorMessage() {
+    console.log(this.todoFormChild)
+    if (this.todoFormChild.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    return this.todoFormChild.hasError('minlength') ? 'Too short, should be at least 3 symbols' : '';
+  }
 }
diff --git a/src/app/todo-item/todo-item.component.css b/src/app/todo-item/todo-item.component.css
index 0719309..11c6f05 100644
--- a/src/app/todo-item/todo-item.component.css
+++ b/src/app/todo-item/todo-item.component.css
@@ -1,16 +1,7 @@
-.textDepricated {
-  color: grey;
-  text-decoration: line-through;
+.formContainer {
+  display: flex;
 }
 
-.high {
-  background-color: red;
-}
-
-.medium {
-  background-color: yellow;
-}
-
-.low {
-  background-color: green;
+.wrapper {
+  display: flex;
 }
diff --git a/src/app/todo-item/todo-item.component.html b/src/app/todo-item/todo-item.component.html
index 5057700..4f2861d 100644
--- a/src/app/todo-item/todo-item.component.html
+++ b/src/app/todo-item/todo-item.component.html
@@ -1,13 +1,13 @@
-<mat-card>
-  <mat-card-content>
-    <form [formGroup]="todoForm">
+<div [ngClass]="'wrapper'">
+    <form [formGroup]="todoForm" [ngClass]="'formContainer'">
       <mat-checkbox [checked]="isChecked" (click)="onCheckboxChange()" color="primary">Done</mat-checkbox>
       <app-todo-edit
         [todoFormChild]="todoForm"
         [isDisabledChild]="isDisabled"
         [todoItemChild]="todoItem"
-        (getErrorMessageChild)="getErrorMessage()"
-        (updateClassesChild)="setClasses()"
+        (updateTodoChildEvent)="updateTodo($event)"
+        [tasksStatusChild]="taskStatus"
+        [isCheckedChild]="isChecked"
       >
       </app-todo-edit>
       <mat-form-field>
@@ -19,6 +19,5 @@
         </select>
       </mat-form-field>
     </form>
-  </mat-card-content>
-</mat-card>
 <button mat-raised-button color="warn" (click)="deleteTodo(todoItem)">Delete Todo</button>
+</div>
diff --git a/src/app/todo-item/todo-item.component.ts b/src/app/todo-item/todo-item.component.ts
index 1ed1acf..a2a47f9 100644
--- a/src/app/todo-item/todo-item.component.ts
+++ b/src/app/todo-item/todo-item.component.ts
@@ -33,32 +33,8 @@ export class TodoItemComponent implements OnInit {
     this.deleteTodoEvent.emit(todo);
   }
 
-  updateTodo(todo: Todo, val: string) {
-    this.updateTodoEvent.emit({id: todo.id, name: val});
-  }
-
-  setInputBackground() {
-    switch(this.taskStatus) {
-      case 'high':
-        return 'high';
-      case 'medium':
-        return 'medium';
-      case 'low':
-        return 'low';
-      default:
-        return '';
-    }
-  }
-
-  setInputDecorations() {
-    return this.isChecked ? 'textDepricated' : '';
-  }
-
-  setClasses() {
-    return {
-      [this.setInputDecorations()]: true,
-      [this.setInputBackground()]: true
-    };
+  updateTodo(todo: Todo) {
+    this.updateTodoEvent.emit(todo);
   }
 
   onCheckboxChange() {
@@ -69,12 +45,4 @@ export class TodoItemComponent implements OnInit {
   onSelectChange(event: Event) {
     this.taskStatus = (event.target as unknown as HTMLInputElement).value;
   }
-
-  getErrorMessage() {
-    if (this.todoForm.hasError('required')) {
-      return 'You must enter a value';
-    }
-
-    return this.todoForm.hasError('minlength') ? 'Too short, should be at least 3 symbols' : '';
-  }
 }
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index a19ba27..c94ef31 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -29,9 +29,7 @@ export class TodoService {
   }
 
   updateTodo(todoItem: Todo): void {
-    // debugger
     this.todos = this.todos.map((todo) => {
-      console.log(todo.id === todoItem.id, todo.id, todoItem.id)
       if (todo.id === todoItem.id) {
         return todoItem;
       }
diff --git a/src/app/todos-list/todos-list.component.html b/src/app/todos-list/todos-list.component.html
index 93926ac..ad97494 100644
--- a/src/app/todos-list/todos-list.component.html
+++ b/src/app/todos-list/todos-list.component.html
@@ -1,5 +1,5 @@
 <app-task-form (newItemEvent)="addTodo($event)"></app-task-form>
-<mat-grid-list cols="1" rowHeight="200px">
+<mat-grid-list cols="1" rowHeight="100px">
   <mat-grid-tile *ngFor="let todo of todosList">
     <app-todo-item
       [todoItem]="todo"

From 6f5315b82f9514a4289e8391fb98802f68b220d9 Mon Sep 17 00:00:00 2001
From: Bulat <bulatkazan@yahoo.com>
Date: Thu, 12 Oct 2023 21:39:56 +0300
Subject: [PATCH 4/4] feat: use formControl instead of forGroup

---
 src/app/todo-edit/todo-edit.component.html   |  8 ++++----
 src/app/todo-edit/todo-edit.component.ts     | 21 ++++++++++----------
 src/app/todo-item/todo-item.component.html   |  3 +--
 src/app/todo-item/todo-item.component.ts     | 10 +---------
 src/app/todos-list/todos-list.component.html |  2 +-
 5 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/src/app/todo-edit/todo-edit.component.html b/src/app/todo-edit/todo-edit.component.html
index 98d4270..c88953e 100644
--- a/src/app/todo-edit/todo-edit.component.html
+++ b/src/app/todo-edit/todo-edit.component.html
@@ -1,15 +1,15 @@
-<form [formGroup]="todoFormChild">
+<form>
   <mat-form-field>
-    <mat-label>Input</mat-label>
+    <mat-label>Edit Todo</mat-label>
     <input
       matInput
       [ngClass]="setClasses()"
       type="text"
       #inputRef
       (change)="onChildInputChange(todoItemChild, inputRef.value)"
-      formControlName="todoItemForm"
+      [formControl]="formControlChild"
       [attr.disabled]="isDisabledChild"
     >
-    <mat-error *ngIf="todoFormChild.invalid">{{getErrorMessage()}}</mat-error>
+    <mat-error *ngIf="formControlChild.invalid">{{getErrorMessage()}}</mat-error>
   </mat-form-field>
 </form>
diff --git a/src/app/todo-edit/todo-edit.component.ts b/src/app/todo-edit/todo-edit.component.ts
index cfa1686..c3f78ce 100644
--- a/src/app/todo-edit/todo-edit.component.ts
+++ b/src/app/todo-edit/todo-edit.component.ts
@@ -1,26 +1,26 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Todo} from "../todo";
-import {FormGroup} from "@angular/forms";
+import {FormControl, FormGroup, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-todo-edit',
   templateUrl: './todo-edit.component.html',
   styleUrls: ['./todo-edit.component.css']
 })
-export class TodoEditComponent {
-  // @Output() getErrorMessageChild = new EventEmitter();
+export class TodoEditComponent implements OnInit {
   @Output() updateTodoChildEvent = new EventEmitter();
 
-  @Input() todoFormChild!: FormGroup;
   @Input() todoItemChild!: Todo;
 
   @Input() isDisabledChild!: true | null;
   @Input() tasksStatusChild: string = 'low';
   @Input() isCheckedChild: boolean = false;
 
-  // onErrorChildHandle() {
-  //   this.getErrorMessageChild.emit();
-  // }
+  formControlChild = new FormControl('', [Validators.required, Validators.minLength(3)])
+
+  ngOnInit() {
+    this.formControlChild.setValue(this.todoItemChild.name);
+  }
 
   onChildInputChange(todo: Todo, val: string) {
     this.updateTodoChildEvent.emit({id: todo.id, name: val});
@@ -51,11 +51,10 @@ export class TodoEditComponent {
   }
 
   getErrorMessage() {
-    console.log(this.todoFormChild)
-    if (this.todoFormChild.hasError('required')) {
+    if (this.formControlChild.hasError('required')) {
       return 'You must enter a value';
     }
 
-    return this.todoFormChild.hasError('minlength') ? 'Too short, should be at least 3 symbols' : '';
+    return this.formControlChild.hasError('minlength') ? 'Too short, should be at least 3 symbols' : '';
   }
 }
diff --git a/src/app/todo-item/todo-item.component.html b/src/app/todo-item/todo-item.component.html
index 4f2861d..a9a0f0b 100644
--- a/src/app/todo-item/todo-item.component.html
+++ b/src/app/todo-item/todo-item.component.html
@@ -1,8 +1,7 @@
 <div [ngClass]="'wrapper'">
-    <form [formGroup]="todoForm" [ngClass]="'formContainer'">
+    <form [ngClass]="'formContainer'">
       <mat-checkbox [checked]="isChecked" (click)="onCheckboxChange()" color="primary">Done</mat-checkbox>
       <app-todo-edit
-        [todoFormChild]="todoForm"
         [isDisabledChild]="isDisabled"
         [todoItemChild]="todoItem"
         (updateTodoChildEvent)="updateTodo($event)"
diff --git a/src/app/todo-item/todo-item.component.ts b/src/app/todo-item/todo-item.component.ts
index a2a47f9..1af1202 100644
--- a/src/app/todo-item/todo-item.component.ts
+++ b/src/app/todo-item/todo-item.component.ts
@@ -8,7 +8,7 @@ import {TodoService} from "../todo.service";
   templateUrl: './todo-item.component.html',
   styleUrls: ['./todo-item.component.css']
 })
-export class TodoItemComponent implements OnInit {
+export class TodoItemComponent {
   @Input() todoItemsList: Todo[] = [];
   @Input() todoItem!: Todo;
   @Output() deleteTodoEvent = new EventEmitter<Todo>();
@@ -18,14 +18,6 @@ export class TodoItemComponent implements OnInit {
   isDisabled: true | null =  null;
   taskStatus: string = 'low';
 
-  todoForm: FormGroup = new FormGroup({
-    todoItemForm: new FormControl('', [Validators.required, Validators.minLength(3)])
-  });
-
-  ngOnInit() {
-    this.todoForm.setValue({todoItemForm: this.todoItem.name});
-  }
-
   constructor(private todoService: TodoService) {
   }
 
diff --git a/src/app/todos-list/todos-list.component.html b/src/app/todos-list/todos-list.component.html
index ad97494..f72683a 100644
--- a/src/app/todos-list/todos-list.component.html
+++ b/src/app/todos-list/todos-list.component.html
@@ -1,5 +1,5 @@
 <app-task-form (newItemEvent)="addTodo($event)"></app-task-form>
-<mat-grid-list cols="1" rowHeight="100px">
+<mat-grid-list cols="1" rowHeight="150px">
   <mat-grid-tile *ngFor="let todo of todosList">
     <app-todo-item
       [todoItem]="todo"