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 - a variable used only for example purposes. It is used to increment the id in tasks to avoid duplicates.newTask - the name for the new task, bound to the input via ngModel using [(ngModel)]="newTask".tasks - all of our task objects.export interface Task {id: number;label: string;}
You can adopt a more advanced, reactive-like approach using RxJS (avoiding subscriptions where possible). However, if you opt for subscriptions, remember to destroy them to prevent memory leaks.
You might create a service for maintaining the state. Inject the service in a smart component and create dumb components that only display and interact with the UI, with all events from dumb components being passed to the smart one.
If you're confident with the latest Angular versions, consider using the 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 them about the newly-added task. There is unlikely to be 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.{"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","defaultProject": "greatfrontend","projects": {"greatfrontend": {"projectType": "application","schematics": {},"root": "","sourceRoot": "src","prefix": "app","architect": {"build": {"builder": "@angular-devkit/build-angular:browser","options": {"outputPath": "dist/my-app","index": "src/index.html","main": "src/main.ts","polyfills": ["zone.js"],"tsConfig": "tsconfig.app.json","assets": ["src/favicon.ico", "src/assets"],"styles": ["src/styles.css"],"scripts": []},"configurations": {"production": {"budgets": [{"type": "initial","maximumWarning": "500kb","maximumError": "1mb"},{"type": "anyComponentStyle","maximumWarning": "2kb","maximumError": "4kb"}],"outputHashing": "all"},"development": {"buildOptimizer": false,"optimization": false,"vendorChunk": true,"extractLicenses": false,"sourceMap": true,"namedChunks": true}},"defaultConfiguration": "production"},"serve": {"builder": "@angular-devkit/build-angular:dev-server","configurations": {"production": {"browserTarget": "greatfrontend:build:production"},"development": {"browserTarget": "greatfrontend:build:development"}},"defaultConfiguration": "development"},"extract-i18n": {"builder": "@angular-devkit/build-angular:extract-i18n","options": {"browserTarget": "greatfrontend:build"}},"test": {"builder": "@angular-devkit/build-angular:karma","options": {"polyfills": ["zone.js", "zone.js/testing"],"tsConfig": "tsconfig.spec.json","assets": ["src/favicon.ico", "src/assets"],"styles": ["src/styles.css"],"scripts": []}}}}},"cli": {"analytics": "7ca5c4d0-e5db-4d23-9ffd-8c8c042e34e7"}}
console.log() statements will appear here.