I have been working on a form to capture user inputs for name and age, and adding them to a list. However, I am struggling with the implementation in my Typescript file. Can anyone guide me on how to successfully add items to the list?
My HTML and Typescript files are ready with the necessary code. I have set up an onClick function in my Button element, but I need help with what code should be written inside this function to add items to the list.
In the HTML code, I have included the ngRepeat directive, but I am uncertain about how to utilize it in the Typescript file.
Here is a snippet of the HTML code:
<div class="shadow-lg p-5 mb-5 bg-white rounded">
<ul class = "list-group">
<li *ngFor="let person of people" class = "list-group-item list-group-item-success">
{{ person.name }} - {{ person.age }}
</li>
</ul>
<br/>
<ul class = "list-group">
<li class = "list-group-item list-group-item-warning">
<input type="name" class="form-control ng-untouched ng-pristine ng-valid" placeholder="Enter Name" [(ngModel)]="name" ngRepeat="detail in people"> <hr/>
<input type="number" class="form-control ng-untouched ng-pristine ng-valid" placeholder="Enter Age" [(ngModel)]="age" ngRepeat="detail in people"> <hr/>
<button type="button" class="btn btn-danger btn-block" (click)="onClick()"> Add </button>
</li>
</ul>
</div>
This is a snippet of the Typescript code:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
name: string;
age: number;
people: any[] = [{
"name" : "abdul",
"age" : 20
}, {
"name" : "david",
"age" : 30
}, {
"name" : "ben",
"age" : 40
}]
onClick() {
this.people.push();
}
constructor() { }
ngOnInit(): void {
}
}