samedi 3 octobre 2020

Angular7: How to check parent-checkbox by ID in outer for-loop by checking child checkboxes present in innerloop?

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