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