Creating a phone book in Angular js when submit button is clicked previous data must displayed on the form table

Hi Team

How can write a form table when the instructions are as follows;

"Once the submit button is pressed, the information should be displayed in a list below (automatically sorted by last name) along with all the previous information that was entered. This way the application can function as a simple phone book. When your application loads, the input fields (not the phone book list) should be prepopulated with the following values already:
First name = Coder
Last name = Byte
Phone = 8885559999"

// code in Angular
`// @ts-ignore
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-area',
template:
<div class="form-wrapper">
<form>
<div>
<label for="firstName">First name</label>
<input type="text" name="firstName" id="firstName" class="userFirstname">
</div>
<div>
<label for="lastName">Last name</label>
<input type="text" name="lastName" id="lastName" class="userLastname">
</div>
<div>
<label for="phoneNumber">Phone number</label>
<input type="tel" name="phoneNumber" id="phoneNumber" class="userPhone">
</div>
<div>
<input type="submit" value="submit" class="submitButton">
</div>
</form>
<div>
<div class="informationTable">
Table of contacts should go here...
</div>,
styles: []
})

export class MainAppComponent implements OnInit {
// code goes here
ngOnInit() {

}
}`