Cant push object into array

Question

I have an issue with my Angular toDoApp project. I have 3 components (app,task-form.task-list). App component receives the final logic from other components. But when I try to push the final object into array, it says that the object values are undefined.

   export interface  toDoInterface {
        tittle: string,
        description:string;
    }

 ----------

 export class AppComponent {

  toDoList = [];      //**It returns undefined value**

  newToDo (formData: toDoInterface) {
    this.toDoList.push({
    tittle: formData.tittle,
    description: formData.description
  });  
 }
}

----------

  export class TaskFormComponent implements OnInit {

 @Output() toDo = new EventEmitter<{newTittleValue: string, newDescValue:string}>();

  tittleValue = '';
  descValue = '';

  constructor() { }

  ngOnInit() {
  }

  addToList () {

  this.toDo.emit({newTittleValue:this.tittleValue,newDescValue:this.descValue})

  }  
}


----------

export class TaskListComponent implements OnInit {

 @Input() name: toDoInterface;

  constructor() { }

  ngOnInit() {
  }

}

Are you handling the $event response param correctly?? angular.io/api/core/EventEmitter — Eloy Castelo Otero
– Eloy Castelo Otero, Commented Jul 8, 2018 at 21:45

bodorgergely · Accepted Answer · 2018-07-08 22:05:39Z

2

You are emitting a different object then you expecting to receive in your app.component.ts file newToDo method.

You emit the following object:

{
  newTittleValue: string;
  newDescValue: string;
}

But when you add it to your list you use the following structure (in your case the toDoInterface interface):

{
  tittle: string;
  description: string;
}

You want to use a parameter from the passed in formData object that doesn't exist.

The solutions is simple. Use the interface as the type of your EventEmitter.

Like so and so:

@Output() toDo = new EventEmitter<toDoInterface>();

tittleValue = '';
descValue = '';    

addToList() {
  this.toDo.emit({ tittle: this.tittleValue, description: this.descValue });
}

I also made a stackblitz project, so you can see it in action.

answered Jul 8, 2018 at 22:05

bodorgergely

5781 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bodorgergely Over a year ago

@Nosheep if so please mark my answer as the correct one, thank you.

Collectives™ on Stack Overflow

Cant push object into array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest