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
  1. 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
  1. 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
  1. 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
  1. 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.

gistlibby LogSnag