How can I toggle the visibility of a form using ngIf when a click event is triggered by a checkbox?
Below is the code for my column header and column values:
<th><label class="btn btn-filter">
<input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)"> status
</label> </th>The status column has checkboxes next to it like this:
<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)">{{ trd.label}}
</label>
</ng-container></td>When clicking the checkbox in the column header, all checkboxes in the column get enabled or disabled accordingly.
I want to show specific content when the checkbox is enabled. Here's the HTML chunk that should be shown/hidden based on the checkbox status:
<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>Here's the typescript file with the functions used to handle the checkbox behavior:
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
}
}Please note that the provided checkbox functionality will apply changes to all related checkboxes in the column.
You can find the interactive demo at this StackBlitz link.
Clicking the status checkbox will automatically update the other checkboxes. Now, the goal is to display additional content within the div tag when the checkbox is enabled.