how can i pass values of an input box into an array and then display it using html list tag

user_9718909 0
Viewed 79

I'm a beginner in angular; I'm trying to pass values of an input box into an array, and then display it using the html list tag.

app.component.html

<form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >
    <div class="form-group">
    <h1 class="text-center ">Todo App</h1>
        <div class="input-group-prepend">
            <input type="text" #todo class="form-control" todo.value='' placeholder="Add Todo" name="todo" ngModel>
            <span class="input-group-text" (click)="addTodo(todo.value)">
            <i class="material-icons">add</i></span>
        </div>
    </div>
    <div class="data">
    <ul class="list-unstyled">
        <li [@moveInLeft]  *ngFor="let item of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
    </ul>
</div>
</form>

app.component.ts

import { Component} from '@angular/core';
import { trigger,animate,style,transition,keyframes } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations:[
  trigger("moveInLeft",[
   transition("void=> *",[style({transform:"translateX(300px)"}),
    animate(200,keyframes([
     style({transform:"translateX(300px)"}),
     style({transform:"translateX(0)"})
         ])
        )
       ]),
      transition("*=>void",[style({transform:"translateX(0px)"}),
       animate(100,keyframes([
       style({transform:"translateX(0px)"}),
       style({transform:"translateX(300px)"})
          ])
         )
       ])    
     ])
    ]
  })
  
  export class AppComponent {
   todoArray = [];
   todo;
   todoForm: any;

   addTodo(value){
    if(value!==""){
     this.todoArray.push(value) 
     }else{
     alert('Field required **')
    }
   }
  deleteItem(todo){
     for(let i=0 ;i<= this.todoArray.length ;i++){
      if(todo== this.todoArray[i]){
        this.todoArray.splice(i,1)
       }
     }
   }
 todoSubmit(value:any){
   if(value!==""){
     this.todoForm.reset()
   }else{
    alert('Field required **')
   }
  }
 }

the issue is on this.todoArray.push(value) error message: Argument of type 'any' is not assignable to parameter of type 'never'

angular typescript html
1 Answers

There is an issue in your html where you properly didn't bind todo value with input box.

Try below version:

 <div class="container">
<form
  #todoForm="ngForm"
  (submit)="todoSubmit(todoForm.value); todoForm.resetForm()"
>
  <div class="form-group">
    <h1 class="text-center">Todo App</h1>
    <div class="input-group-prepend">
      <input
        type="text"
        class="form-control"
        name="todo"
        placeholder="Add Todo"
        [(ngModel)]="todo"
      />
      <span class="input-group-text" (click)="addTodo()">
        <i class="material-icons">add</i></span
      >
    </div>
  </div>
  <div class="data">
    <ul class="list-unstyled">
      <li *ngFor="let item of todoArray; let i=index">
        <i (click)="deleteItem(i)" class="material-icons">
          {{item}} delete</i>
      </li>
    </ul>
  </div>
</form>
</div>

TS change -

    import { Component } from '@angular/core';
import {
  trigger,
  animate,
  style,
  transition,
  keyframes,
} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('moveInLeft', [
      transition('void=> *', [
        style({ transform: 'translateX(300px)' }),
        animate(
          200,
          keyframes([
            style({ transform: 'translateX(300px)' }),
            style({ transform: 'translateX(0)' }),
          ])
        ),
      ]),

      transition('*=>void', [
        style({ transform: 'translateX(0px)' }),
        animate(
          100,
          keyframes([
            style({ transform: 'translateX(0px)' }),
            style({ transform: 'translateX(300px)' }),
          ])
        ),
      ]),
    ]),
  ],
})
export class AppComponent {
  title = 'app';
  todoArray = [];
  todo: string = null;
  todoForm: any;

  addTodo() {
    if (this.todo !== '') {
      this.todoArray.push(this.todo);
    } else {
      alert('Field required **');
    }
  }

  /*delete item*/
  deleteItem(index: number) {
    this.todoArray.splice(index, 1);
  }

  // submit Form
  todoSubmit(value: any) {
    if (value !== '') {
      //this.todoArray.push(value.todo)
      this.todoForm.reset();
    } else {
      alert('Field required **');
    }
  }
}
user_32229710
Related