как заполнить выбранные выпадающие значения ANGULAR 8

Question

У меня есть кнопка редактирования

<button (click)="valueFunction(data, template)"> EDIT</button>

, это моя функция для кнопки в TS

valueFunction(data, template) {
  this.openModal(template);
  console.log(data);
}

, когда кнопка нажата, появляется всплывающее окно с выпадающим меню выбора.

это мой раскрывающийся список во всплывающем шаблоне

      <ng-template #template>
        <div >
          <table>
            <thead>
              <tr>
                <th ">value of a/th>

              </tr>
            </thead>
            <tbody>
              <tr>
                <td >
              <select
                    required
                    formControlName="vals"
                    (change)="onChange($event)"
                     class="form-control" >

                     <option>1</option >
                     <option>2</option >
                     <option>3</option >
                     <option>4</option >

                 </select>
                </td>

                </td>
              </tr>
            </tbody>
          </table>

          <div>
            <span>update ?</span>
          </div>

          <button

            (click)="confirm()"
          >
            Yes
          </button>

        </div>
      </ng-template>

В этом раскрывающемся списке должны отображаться значения сохраненных параметров. предположим, 1, 2, 3, 4 - это опции в этом раскрывающемся списке выбора, и я выбрал 2 ранее и «обновил» страницу, теперь, когда я снова открываю это всплывающее окно, я хочу, чтобы вариант 2 показывал уже выбранные.

Ts файл, это значение, которое я получаю, когда выбираю что-то из выпадающего списка

public onChange(event): void {
  const a = event.target.value;

  console.log("value of a :", a);
}