Angular компонент для переключателей не привязан правильно

Question

У меня есть пользовательский компонент angular, который содержит некоторые элементы html для создания элемента управления радиоформой. Этому компоненту передается ряд свойств от родительского компонента, которые затем используются для заполнения свойств самого радио.

Однако радио не работает как группа, каждое из которых может быть выбрано независимо и сами переключатели выглядят так, что загружаются одна за другой на страницу, как будто она зависает при рендеринге.

Демонстрация Stackblitz: https://stackblitz.com/edit/angular-ceehgd

<!-- parent component -->
<app-radio-control
  [id]="'appointmentReason1'"
  [formControlName]="'appointmentReason'"
  [radioValue]="1"
  [label]="'Mortgage'"
></app-radio-control>

<app-radio-control
  [id]="'appointmentReason2'"
  [formControlName]="'appointmentReason'"
  [radioValue]="2"
  [label]="'Protection'"
></app-radio-control>

<app-radio-control
  [id]="'appointmentReason3'"
  [formControlName]="'appointmentReason'"
  [radioValue]="3"
  [label]="'Mortgage & Protection'"
></app-radio-control>


<!-- radio component -->
<div class="custom-control custom-radio">
  <input
    formControlName="{{ formControlName }}"
    name="{{ formControlName }}"
    class="custom-control-input"
    type="radio"
    id="{{ id }}"
    [value]="radioValue"
    required
  />
  <label for="{{ id }}" class="custom-control-label">{{ label }}</label>
</div>