I am new to Angular so need some guidance. I am making a cookie-banner where i want to automatically check switch label on present in accordian headers by checking any one of the child plugin checkboxes present in them and vice-versa. Now i have implemented it via property & event binding but the problem is when i check any plugin, it checks the Switch label of all the accordian headers not only its parent accordian. So what can i do so only the parent header accordian switch label gets checked by its plugin not all others?
Here is my code:-
accordian.component.html
<ngb-accordion #acc0rdian="ngbAccordion" [destroyOnHide]="false" *ngIf="accordianData.length >= 1">
<!-- Looping through accordianData Array to create panels -->
<ngb-panel #panelStyle [id]="'toggle-' + data.CategoyId" *ngFor="let data of accordianData; let i = index">
<ng-template ngbPanelTitle>
<!-- Pannel Header Swith Label -->
<label [attr.for]="data.CategoyHeading" class="switch mr-3">
<input type="checkbox" [checked]="isChecked" [id]="i" class="parent-checkbox" [value]="data.CategoyId"
#headerSwitch />
<span class="slider round"></span>
</label>
<!-- Label End -->
<a type="button" class="inner-head-text" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne"> <i class="fa fa-caret-down"></i></a>
</ng-template>
<ng-template ngbPanelContent>
<div id="collapseOne" class="collapse show" aria-labelledby="data.CategoyHeading"
data-parent="#customize-accordian">
<div class="card-body">
<p></p>
<div class="plugins-options">
<table class="table">
<tr>
<th class="plugins-name">Plugins</th>
<th>Block/Enable</th>
</tr>
<tr *ngFor="let plugin of data.PluginList">
<td></td>
<td>
<div class="plugin-enable-option d-inline-flex align-items-center w-100">
<label [accessKey]="data.CategoyHeading" class="switch mr-3">
<input type="checkbox" [id]="plugin.ComplianceTypeID" [accessKey]="data.CategoyId" #childPlugin
(input)="turnOnHeaderSwitch($event,data.CategoyId)" />
<span class="slider round"></span>
</label>
<a *ngIf="plugin.optOutExternalLink; else noSiteUrl" [href]="plugin.optOutExternalLink"
class="ml-auto">Go To Site</a>
<ng-template #noSiteUrl>
<a href="#" class="ml-auto">Go To Site</a>
</ng-template>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
</ngb-accordion>
accordian.component.ts
@Component({
selector: "app-accordian",
templateUrl: "./accordian.component.html",
})
export class AccordianComponent implements OnInit {
@ViewChild("accordian") accordionComponent: NgbAccordion;
@ViewChild("headerSwitch") headerSwitch: any;
@ViewChild("childPlugin") childPlugin: any;
@Input() accordianData: Accordian[];
isChecked: Boolean;
constructor(private elem: ElementRef) {}
ngOnInit() {}
ngAfterViewInit() {
let elements = this.elem.nativeElement.querySelectorAll(".parent-checkbox");
}
toggle(id: string): void {
this.accordionComponent.toggle(id);
}
turnOnHeaderSwitch(event: Event, headerSwitchId: String) {
// here i want to apply the logic
if (this.arePluginsChecked) {
this.isChecked = true;
}
}
arePluginsChecked(id: String) {
console.log(this.childPlugin.nativeElement.checked);
if (this.childPlugin.nativeElement.checked == true)
return this.childPlugin.nativeElement.checked;
return false;
}
}
Here what i can tell is parent element Ref value is not updating. Any help is appreciated. Thank you.
Aucun commentaire:
Enregistrer un commentaire