Нажатие на скрытую радио-кнопку не работает в Angular 9

Question

Я использовал переключатель со следующими стилями в div (для его выбора, нажав div):

.plans-list {
  display: flex;
  justify-content: center;
  margin: 2rem 0;

  .plan {
    display: flex;
    margin: 0 0.5rem;
    position: relative;

    &:hover {
      ::ng-deep .card {
        cursor: pointer;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
          0 2px 10px 0 rgba(0, 0, 0, 0.12);
      }
    }

    &__type {
      display: block;
      width: 100%;
      height: 100%;
      visibility: hidden;
      position: absolute;
      z-index: 2;
    }
  }
}

<div class="plans-list">
        <div class="plan" *ngFor="let plan of planTypes">
            <input (click)="calculateTotal()" class="plan__type" type="radio" name="planType" [value]="plan.value"
                formControlName="planType" #planType>
            <app-plan-item [type]="plan.title" [active]="planType.checked" [params]="planParameters">
            </app-plan-item>
        </div>
    </div>

Нажатие на переключатель не работает и active класс не будет назначен элементу app-plan-item! Что не так?

Демо : https://stackblitz.com/edit/angular-ahw2bf?file=src%2Fapp%2Fapp.component.css

Answer 1

изменение css видимость до непрозрачности https://stackblitz.com/edit/angular-5v457f

.plan__type {
      display: block;
      width: 100%;
      height: 100%;
      opacity:0; 
      position: absolute;
      z-index: 2;
    }