programm a todo-app in typescript

To create a todo-app in typescript, we can use Angular framework. Follow the steps below to create a basic todo-app in typescript:

1. Install Angular CLI by running the following command in the terminal:

   index.ts
    npm install -g @angular/cli
   29 chars
   2 lines

2. Create a new Angular project by running the following command in the terminal:

   index.ts
    ng new my-todo-app
   20 chars
   2 lines

3. Change directory to the newly created project and start the app by running:

   index.ts
    cd my-todo-app
    ng serve
   26 chars
   3 lines

4. Next, create a new component that renders the todo-list. Run the following command to generate a new component named "todo-list":

   index.ts
    ng generate component todo-list
   33 chars
   2 lines

5. Now, open the todo-list.component.ts file and define a tasks array that will store our todo items:

index.ts
  import { Component } from '@angular/core';

  @Component({
    selector: 'app-todo-list',
    templateUrl: './todo-list.component.html',
    styleUrls: ['./todo-list.component.css']
  })
  export class TodoListComponent {
    tasks: string[] = ['Task 1', 'Task 2', 'Task 3'];
  }
282 chars
11 lines

6. Then, open the todo-list.component.html file and render the tasks in an unordered list:

  <ul>
    <li *ngFor="let task of tasks">{{ task }}</li>
  </ul>
66 chars
4 lines

7. The above code will simply display the tasks hardcoded in the tasks array. Let's create a form to add new todo items dynamically. For that, add the following code to the todo-list.component.html file:

  <h2>Add New Task:</h2>
  <form>
    <input type="text">
    <button type="submit">Add</button>
  </form>
107 chars
6 lines

8. Finally, add an event listener to the add button and update the tasks array with the new task:

index.ts
  addTask(newTask: HTMLInputElement) {
    this.tasks.push(newTask.value);
    newTask.value = '';
  }
103 chars
5 lines

9. Update the form in the html code to call this method when submitted:

  <form (submit)="addTask(newTask)">
    <input type="text" #newTask>
    <button type="submit">Add</button>
  </form>
119 chars
5 lines

And that's it! A basic todo-app in typescript using Angular framework.