¿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:

  1. Cree una nueva aplicación angular usando el siguiente comando:
    ng new my-todo-list
  2. 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
  3. Instale bootstrap usando el siguiente comando:
    npm install bootstrap

    Edite el archivo style.css en el proyecto

    @import 'bootstrap/dist/css/bootstrap.css';
  4. 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>
  5. 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);
        }
    }
  6. 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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *