Hey guys! I'm working on creating a to-do list but I've encountered a problem. Whenever I enter a value in the text field, it doesn't get added to the array of list elements. Strangely enough, when I console.log it, it seems to work. Can anyone spot what I might be missing? Here is the code snippet:
<div class="row">
<div class="col-xs-12">
<input type='text' name='unos' #unos placeholder="Enter task" />
<button class="btn btn-primary" (click)="addTask(unos.value)">Add</button>
<ul class="list-group">
<li class="list-group-item" *ngFor="let el of tasks">
<span>{{ el.content }}</span> <span><input type='checkbox'></span>
<button class="btn btn-danger" (click)="removeTask(el)">Remove</button>
</li>
</ul>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Task } from '../task.model';
@Component({
selector: 'app-task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
tasks: Task[] = [
{content: 'Buy milk'},
{content: 'Go for a run'},
{content: 'Eat pizza'}
];
removeTask(task: Task){
this.tasks.splice(this.tasks.indexOf(task), 1);
}
addTask(task: Task) {
this.tasks.push(task);
console.log(task);
}
constructor() { }
ngOnInit() {
}
}