My issue involves dynamically adding items to a todo list and wanting to exclude certain items. The challenge lies in the fact that the list itself is located outside of the task component:
Within the task.component.html file, I iterate through the list for display:
<ul class="list-group" *ngFor="let taskElement of taskElements; let i=index" [taskElement]="taskElement">
<div class="d-flex justify-content-center">
<li class="list-group-item">
<span>
{{element.description}}
</span>
<button class="btn btn-danger" style="float: right;" type="button">Remove
Task</button>
</li>
However, the list itself is defined in the app.component.ts file:
public containsTask = false;
taskElements: { description: string, isDone: boolean }[] = [];
onTaskCreated(taskData: { taskDescription: string }) {
this.taskElements.push({
description: taskData.taskDescription,
isDone: false
});
this.containsTask = true;
}
I am looking for a way to utilize the taskElements array declared in app.component.ts within the task.component.ts. Any suggestions would be greatly appreciated!
Thank you!