Angular Todo

app.component.html

<div class="container--todo-header">
  <h1>Todo App Angular</h1>
</div>
<app-todo-input (onTodoAdd)="handleTodoAdd($event)"></app-todo-input>
<hr>
<div class="margin-top-50">
  <app-todo-list 
    [todo]="todoEl" 
    [index]="i" 
    *ngFor="let todoEl of todos;let i = index">
  </app-todo-list>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { TodoService } from './shared/todo-storage.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  todos: any = [];
  constructor(private todoService: TodoService) {}

  ngOnInit() {
    this.todoService.
    todoObserverIndex.
    subscribe(todo_index => {
    this.todos.splice(todo_index, 1);
    });
  }
  handleTodoAdd(todo: String): void {
    this.todos.push(todo);
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TodoInputComponent } from './todo-input/todo-input.component';
import { TodoListComponent } from './todo-list/todo-list.component';
import { FormsModule } from '@angular/forms';
import { TodoService } from './shared/todo-storage.service';

@NgModule({
  declarations: [
    AppComponent,
    TodoInputComponent,
    TodoListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [
    TodoService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.css

/* You can add global styles to this file, and also import other style files */
/* Global Variables */
:root {
    --btn-save-color: #50af50;
    --btn-update-color: #337ab7;
    --btn-delete-color: #d9534f;

    --primary-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

/* Elements Styling */
body {
    margin: 0;
    padding: 0;
    font-family: Roboto,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}

.btn {
    width: 20%;
    cursor: pointer;
    color: white;
    font-size: 20px;
    margin-left: 20px;
    border-radius: 4px;
    font-weight: 700;
    padding: 12px 20px;
}

.btn:hover {
    box-shadow: var(--primary-shadow);
}

todo-input.component.css

.container {
    display: flex;
    justify-content: center;
    margin-bottom: 39px;
}
.todo--input {
    width: 40%;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 20px;
}
.container .save {
    background-color: var(--btn-save-color);
}
.todo--input:hover {
    box-shadow: var(--primary-shadow);
}
.container .btn:hover {
    box-shadow: var(--primary-shadow);
}
.container .btn[disabled],
.container .btn[disabled]:hover {
    cursor: not-allowed;
    background-color: var(--btn-delete-color);
    box-shadow: none;
}

todo-input.component.html

<div class="container">

    <input  
    [(ngModel)]="todo" 
    type="text" 
    placeholder="Enter Todo" 
    class="todo--input"/>

    <button 
    [disabled]="todo == ''" 
    type="button" 
    class="btn save" 
    (click)="onSaveTodo()">Save Todo!</button>

</div>

todo-input.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

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

    // tslint:disable-next-line:no-output-on-prefix
    @Output() onTodoAdd: EventEmitter<any> = new EventEmitter<any>();
    todo: String = '' ;

    onSaveTodo() {
        this
        .onTodoAdd
        .emit(this.todo);
    }
}

todo-list.component.css

.container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.todo--input {
    width: 40%;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 20px;
}
.container .delete {
    background-color: var(--btn-delete-color);
}
.todo--input:hover {
    box-shadow: var(--primary-shadow);
}

todo-list.component.html

<div class="container">

    <input  
    [disabled]="true" 
    type="text" 
    placeholder="Enter Todo" 
    class="todo--input" 
    [(ngModel)]="todo"/>
    
    <button 
    type="button" 
    class="btn delete" 
    (click)="onDeleteTodo()">Delete</button>

</div>

todo-list.component.ts

import { Component, Input } from '@angular/core';
import { TodoService } from '../shared/todo-storage.service';

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

export class TodoListComponent  {

    @Input() todo: string;
    @Input() index: number;

    constructor(private todoService: TodoService) { }

    onDeleteTodo() {
        this
        .todoService
        .changeTodo(this.index);
    }
}

todo-storage.service.ts

import { Subject } from 'rxjs';

export class TodoService {

    private todoSubjectIndex = new Subject<number>();
    public todoObserverIndex = this.todoSubjectIndex.asObservable();

    changeTodo(todoIndex: number) {
        this.todoSubjectIndex.next(todoIndex);
    }
}