Solution

To add a new task, we need to enter text into the input field and click the 'Submit' button. Subsequently, the addTask() method is invoked. If the provided string is not empty, it adds that element to tasks. Once the task is added, we clear the newTask variable.

While displaying the list of tasks in the template, we also assign a button to them to remove the task by calling deleteTask(task.id), which simply filters out the given task with the specified ID.

State

• id - variable only for example id purpose. It is used to increment id in tasks to not get duplications
• newTask - name for newTask that is bound with input by using ngModel [(ngModel)]="newTask".
• tasks - all of our tasks objects

Models

export interface Task {
  id: number;
  label: string;
}

Angular Insights

• You can adopt a more advanced, reactive-like approach using RxJS (without using subscriptions as possible). However, if you opt for subscriptions, remember about destroying them to prevent memory leaks.

• You might create service for maintaining the state. Inject the service in smart component and crete dumb components that only display and interact with the UI and all events from dumb components are passed to the smart one.

• If you're confident with the latest Angular versions, consider using signals standalone API.

• You can try to focus more on keywords such as readonly, private, public and void.

• If you're creating a bigger application it would be good practice to use styles per component instead of putting all styles in one file.

Test Cases

• Add tasks
  • Add a new task.
  • Add multiple tasks.
  • Add tasks with potentially malicious content like HTML (e.g. <script>, <style> or <link>) and ensure there's no XSS.
  • Check that <input> is cleared after a task is added.
• Delete tasks
  • Delete an existing task.
  • Delete multiple tasks.
  • Delete newly-added tasks.

Accessibility

• All form <input>s should be labelled either via <label>s or aria-label attributes. Since the original markup doesn't contain a <label>, we can add aria-label to the <input>.
• For screen reader users, they won't be aware that a new task has been added. An aria-live region can be added to inform about the newly-added task. There is unlikely enough time to do this during an interview but you will get bonus points for mentioning it. Read more about ARIA live regions on MDN.