lundi 9 novembre 2020

click event in checkboxes angular

I need to show a form and hide a form using ngif when a click event takes place in a check box.

my column header and my column values code

  <th><label class="btn btn-filter">
    <input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)"> status
  </label>&nbsp;</th>

I have the status column name and have a checkbox nearby

 <td><ng-container *ngFor="let trd of trade">
    <label class="btn btn-filter">
      <input type="checkbox" name="trades" [checked]="trd.selected" (change)="yourfunc($event)" (change)="handleSelected($event)">
    </label>&nbsp;
  </ng-container></td>

I have the values of the status column and I have wrote in such a way that when I click the checkbox in my column header all the checkbox values in the column gets enabled and vice versa

The content I wanna show when checkbox gets enabled

What I need is that I wanna show the contents of this html chunk when the checkbox gets enabled and it should be hiddeen when the checkbox gets disabled.

    <div *ngif=ischeck>
  
    <mat-form-field class="example-full-width" >
        <input class="toolbar-search" type="text" matInput autocomplete="off" >
        <mat-placeholder>Name</mat-placeholder>
    </mat-form-field>
    <mat-form-field class="example-full-width" >
        <input class="toolbar-search" type="text" matInput autocomplete="off">
        <mat-placeholder>City</mat-placeholder>
    </mat-form-field>

</div>

my ts. Here the handleSelected($event) is the click event function I am trying to hide the html

 trade = [
  { label: ' Check', selected: false }, 

];



 allTrades(event) {
      const checked = event.target.checked;
      this.trade.forEach(item => item.selected = checked);
    }



handleSelected($event) {
  if ($event.target.checked === true) {
  // Handle your code
  this.ischeck=true

  }

}

NOTE: the checkbox code written here is in such a way that I have a checkbox near column name and when I enable it all checkboxes in column values gets enabled and vice versa.




Aucun commentaire:

Enregistrer un commentaire