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> </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>
</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