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.
id - variable only for example id purpose. It is used to increment id in tasks to not get duplicationsnewTask - name for newTask that is bound with input by using ngModel [(ngModel)]="newTask".tasks - all of our tasks objectsexport interface Task {id: number;label: string;}
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.
<script>, <style> or <link>) and ensure there's no XSS.<input> is cleared after a task is added.<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>.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.You're given some existing HTML for a Todo List app. Add the following functionality to the app:
<input> field should be cleared upon successful addition.ids, data attributes, replacing some tags, etc), but the result should remain the same visually.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.
id - variable only for example id purpose. It is used to increment id in tasks to not get duplicationsnewTask - name for newTask that is bound with input by using ngModel [(ngModel)]="newTask".tasks - all of our tasks objectsexport interface Task {id: number;label: string;}
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.
<script>, <style> or <link>) and ensure there's no XSS.<input> is cleared after a task is added.<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>.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.console.log() statements will appear here.