Object pushed into an array on runtime not displaying correctly

Ionic Framework ionic-v3
1

Hi, I am new to Ionic and Angular (web programming generally) so I may be very poorly informed about some more advanced stuff like JSON, HTTP, etc.

I have a TS file with an object array infoElements, which has property ‘name’, I intend to add more to it, but to keep it simple lets just go with one property in each object. There are two objects in infoElements.

My page TS file:

export class Tab2Page {
  newName = '';
  name = '';
  infoElements = [{name: 'Justin'}, {name:'Alfredo'}]

  updateInfo(value:string){
    this.newName = value;
  }

  onSubmit(){
    this.infoElements.push({name: this.newName});
  }

The updateInfo(string) is for user input, such that the input will be saved to the variable newName
The onSubmit() is bind to a button to push a new object into the array infoElements, and afterwards displayed on the page.

My page HTML file:

<ion-content>
  <div style="max-width: 30%; left: 3%; position: relative;">
    <ion-item>
      <ion-label position="floating">Name</ion-label>
      <ion-input (keyup)="updateInfo($event)"></ion-input>
    </ion-item><br>
    <ion-button color="primary" (click)="onSubmit()">Submit</ion-button>
  </div>
  <div style="position:relative; left: 3%; max-width: 30%;" *ngFor="let infoElement of infoElements">
    {{ infoElement.name }}
  </div>
  <div style="left: 2%; position:relative;">
  </div>
</ion-content>

However, the names that are properly printed are only ‘Justin’ and ‘Alfredo’
any other subsequent name inputs shows ‘[object KeyboardEvent]’ after clicking the Submit button.

I have tried searching for solutions online, like using {{ infoElement?.name }} and JSON.stringify() but no avail.