How to show inputs element if checkbox is checked? angular

Question

I am trying to display a input element if a checkbox is checked using ng-if,and at the same time if I check multiple checkboxes multiple input is displayed because I want to enter the quantity of each item,but now even i check a checkbox no input displayed. thanks in advance

     <nz-form-item >
     <nz-form-label  nzRequired nzFor="item">items </nz-form-label>
      <nz-form-control   nzErrorTip="Ce champ est obligatoire">

      <div id="bloc1">
      <div nz-col >  <label nz-checkbox  nz-col  formControlName="checkedValue" *ngFor="let 
      item of items "  [nzValue]="item"  (ngModelChange)="showInput()"> 
      {{item.name}}</label>  </div>
    </div>
     </nz-form-control>

    <nz-form-label   nzRequired nzFor="quantite" >Quantité </nz-form-label>
        <nz-form-control   nzErrorTip="Ce champ est obligatoire">
          <div id="bloc2" >

          <nz-input-number *ngIf="showMe" formControlName="quantite"  [nzStep]="1" 
         [nzSize]="'small'"></nz-input-number>
          </div>

        </nz-form-control>


  </nz-form-item>

.ts

showMe:boolean=false;

showInput(){
    this.showMe!=this.showMe;
           }

Answer 1

what you have seems like it should be working. probably an issue with your directives.

or at least you can use the state of the checkbox directly like:

<label nz-checkbox  nz-col  formControlName="checkedValue" *ngFor="let 
      item of items "  [nzValue]="item" [(ngModel)]=isShowingInput> 
      {{item.name}}</label>
<div *ngIf=isShowingInput>

working demo: https://stackblitz.com/edit/angular-ivy-vj2qms?file=src/app/app.component.ts