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

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"

`// @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() { 
    
  }
}`
`