todo-input component

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);
    }
}