¿Cómo crear una lista de tareas pendientes en Angular 7?

La aplicación ToDo se utiliza para ayudarnos a recordar alguna tarea importante. Simplemente añadimos la tarea y cuando la hayamos realizado, la borramos. Esta lista de tareas pendientes utiliza varias clases de Bootstrap que hacen que nuestra aplicación web no solo sea atractiva sino también receptiva.

Acercarse:

Cree una nueva aplicación angular usando el siguiente comando:
```
ng new my-todo-list
```
Mover dentro de la aplicación por cd y ejecutar. Después de eso, abra el host local y verifique si la aplicación funciona.
```
cd my-todo-list
ng serve
```
Instale bootstrap usando el siguiente comando:
```
npm install bootstrap
```
Edite el archivo style.css en el proyecto

@import 'bootstrap/dist/css/bootstrap.css';

Abra la carpeta src/app y comience a editar app.component.html

<!--Division for GeeksForGeeks heading-->
<div class="container-fluid">
    <div class="row bg-success justify-content-center
            align-items-center" style="height:80px">
        <div class="col-3"></div>
        <div class="col-6 text-light h2">
            GeeksForGeeks
        </div>
    </div>
  
    <!--Division for taking input from user -->
    <div class="row mt-1" style="height:80px;">
        <div class="col-3 d-none col-md-3 d-md-block"></div>
        <div class="col-12 col-md-6 bg-success d-flex 
                    justify-content-center align-items-center 
                    text-light h3">
  
            <input [(ngModel)]="newTask" type="text" 
                    value="" class="col-7 form-control"
                        style="width:300px;">
  
            <div class="col-1"></div>
  
            <button (click)="addToList()" 
                class="btn btn-light text-success">
                ADD TASK
            </button>
        </div>
  
        <div class="col-3 d-none col-md-3 d-md-block"></div>
    </div>
  
    <!--Tasks added repeated divisions-->
    <div *ngFor="let x of items; let index = index;" 
            class="row mt-1" style="height:100px;">
  
        <div class="col-3 d-none col-md-3 d-md-block"></div>
  
        <div class="col-12 col-md-6 bg-success d-flex
                    justify-content-center align-items-center
                    text-light h3">
  
            <div class="col-9 text-light h3">{{x}}</div>
  
            <input (click)="deleteTask(index)" type="button"
                value="Delete" class="col-2 btn btn-danger">
        </div>
          
        <div class="col-3 d-none col-md-3 d-md-block"></div>
    </div>
</div>

Abra el archivo app.component.ts y escriba funciones para agregar y eliminar tareas.

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
  
    /* An empty array that is responsible
       to add a division */
    public items = [];
  
    /* A two-way binding performed which
       pushes text on division */
    public newTask;
  
  
    /* When input is empty, it will
       not create a new division */
    public addToList() {
        if (this.newTask == '') {
        }
        else {
            this.items.push(this.newTask);
            this.newTask = '';
        }
    }
  
    /* This function takes to input the
       task, that has to be deleted*/
    public deleteTask(index) {
        this.items.splice(index, 1);
    }
}

Para trabajar con formularios que reciben información, debemos importar FormsModule en el archivo app.module.ts .
```
import { FormsModule } from '@angular/forms'
```

Producción:

Publicación traducida automáticamente

Artículo escrito por ajaychawla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta