Control div from a checked checkbox

Question

I have a checkbox list (*ngFor):

<div *ngFor="let item of listaProcesso">
  <input type="checkbox" ng-model="check" 
    (ngModelChange)="expression && expression[item.name]= $event ? true : undefined"
    [ngModel]="expression && expression[item.name]"
    name="referencia"
    value="{{item.value}}"
    id="{{item.value}}"
    (change)="checkValue(item.value)"
    (change)="onItemChange(item.value)" />
    <!-- (change)="checkValue(item.value)" (change)="onItemChange(item.value) -->
  {{item.name}}
</div>

<div>
  //Esta será controlada
</div>

From there, I need to control (show/hide) another div, since only one option of this checkboxes selected from this would control this div. I’m a beginner in

Answer 1

This is a very simple example that renders some checkboxes. By clicking on the checkbox the value of the field selecionado inside the array listaProcesso is updated. When updated this value is reflected in the logic of *ngIf to show/hide the div:

<div *ngFor="let item of listaProcesso">
   <input 
    type="checkbox"
    [checked]="item.selecionado"
    (change)="item.selecionado = $event.target.checked" /> {{item.label}}
</div>

<ng-container *ngFor="let item of listaProcesso">
  <div *ngIf="item.selecionado">
    {{item.label}}
  </div>
</ng-container>

https://stackblitz.com/edit/angular-boe7qz

Answer 2

Another solution would be:

<div *ngFor="let item of listaProcesso">
  <input type="checkbox" ng-model="item.value" (change)="isChecked($event)"
         (ngModelChange)="expression && expression[item.descricao]= $event ? true : undefined"
         [(ngModel)]="expression && expression[item.descricao]" name="classificacao"
         value="{{item.value}}" id="{{item.value}}" [checked]="item.selecionado"
         (change)="item.selecionado = $event.target.checked" />
  {{item.name}}
</div>

And in the file . ts, include this function for control:

checkedMarcado: boolean = false;
\\...
  isChecked(valor) {
    if (valor.target.value == 'value do item') {
      if (valor.target.checked) {
        this.checkedMarcado = true;
      } else {
        this.checkedMarcado = false;
      }
    }
  }

And finally in the control div:

<div class="row" *ngIf="checkedMarcado">
  \\...
</div>