Событие Angular click: как установить флажок внутри элемента?

Чтобы убедиться, что щелчок по метке переключает флажок, включите элемент ввода внутрь метки (как описано в MDN):

<a class="sub-item item">
  <div class="item-checkbox">
    <label><input type="checkbox" tabindex="0" class="hidden">4 GB</label>
  </div>
</a>

Если вы также хотите, чтобы метка заполнила элемент привязки, определите CSS, как показано ниже. С этим стилем нажатие на якорь приведет к переключению флажка.

.ui.secondary.menu a.item {
  padding: 0px;
}

div.item-checkbox {
  width: 100%;
  height: 100%;
}

div.item-checkbox > label {
  display: block;
  padding: .78571429em .92857143em;
}

div.item-checkbox > label > input {
  margin-right: 0.25rem;
}

См. этот stackblitz для демонстрации.

Если вы можете разместить все флажки в контейнере, вы можете установить один прослушиватель событий click в контейнере, и event.target даст вам элемент, по которому щелкнули, а previousElementSibling выберет одноуровневый ввод.

function doSomething() {
    const selectedInput = event.target.previousElementSibling;
    selectedInput.checked = selectedInput.checked? false : true;
}

Но если есть вероятность того, что вы документируете изменения структуры в будущем, скажем, если между вводом и меткой окажутся другие элементы или изменится их порядок, то селектор родственного элемента не сработает. Чтобы решить эту проблему, вы можете вместо этого использовать родительский селектор и выбрать элемент ввода chechbox внутри него.

document.getElementById('container').addEventListener('click', doSomething);

function doSomething() {
    const selectedElement = event.target.parentElement.querySelector('input[type="checkbox"]');
    selectedElement.checked = selectedElement.checked? false:true;
}

<div id= 'container'>
  <span class="caption">RAM</span>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="4 GB">
          <label>4 GB</label>
      </div>
  </a>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="8 GB">
          <label>8 GB</label>
      </div>
  </a>
  <a class="item">
      <div class="item-checkbox">
          <input type="checkbox" tabindex="0" class="hidden" value="16 GB">
          <label>16 GB</label>
      </div>
  </a>
</div>

Прежде всего, вы должны использовать *ngFor, чтобы перечислить все ваши варианты:

html:

<a class="item" *ngFor="let choice of checks; let i=index">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" [value]="choice.value" (change)="onCheckChange($event)">
        <label>{{choice.title}}</label>
    </div>
</a>

компонент:

public checks: Array<choices> = [
  {title: '4 GB', value: '4'},
  {title: "8 GB", value: '8'},
  {title: "16 GB", value: '16'}
];

public onCheckChange(event) {
    // do some things here
}

Кроме того, вы должны использовать Reactive Forms для проверки вашего выбора: https://angular.io/guide/reactive-forms

Вы должны создать логический массив и привязать его к своим флажкам.

.ts-файл

  myArray: any[] = [
 {
      "size": "2GB",
      "value":false
    },
    {
      "size": "4GB",
      "value":false
    },
    {
      "size": "8GB",
      "value":false
    }
]

.html файл

<div *ngFor="let data of myArray">
 <a class="item">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" [(ngModel)]="data.value" (ngModelChange)="changeHandler()">
        <label>{{data.size}}</label>
    </div>
 </a>
</div>

Рабочая демонстрация: ссылка

Вы можете сделать что-то вроде этого:

const ramOptions = [
  {
    id: 1,
    size: '4 GB'
  },
  {
    id: 2,
    size: '8 GB'
  },
  {
    id: 3,
    size: '16 GB'
  }
]

И в html:

<a class="item" *ngFor="let option of ramOptions">
    <div class="item-checkbox">
        <input type="checkbox" tabindex="0" class="hidden" (change)="onSelect(option.id)">
        <label>{{option.size}}</label>
    </div>
</a>

Если в файле .js/.ts вы можете создать интерфейс для определения обработчика. Как только:

onSelect(id: string) {
  ...
}