PrimeNG accordion selected event

user_11852272 0
Viewed 826

I am using my project which is written Angular 11 with primeNG. One of the components has a p-autoComplete search field Which activates a search function (onSelect) event.

I want that when the function occurs, in another component, which contains p-accordion I will open the tab which contains the field found, in our case the layer Code:

Here you can see the p-autoComplete field of the html of the first component

<p-autoComplete dir="rtl" formControlName="layersSearch" type="text" placeholder="חיפוש שכבה"
            [class.invalid]="inputForm?.controls?.layersSearch?.invalid === true" [(ngModel)]="searchText"
            [suggestions]="layersResults" (onSelect)="searchLayer($event)"
            (completeMethod)="getLayerAutoComplete($event)">
        </p-autoComplete>

Here you can see the function of the search

searchLayer(event) {
var layer = this.layersService.getLayerByCaption(event);
if (!layer.visible) {
  this.layersService.setLayersOn(layer);
  
}

}

Here you can see the html file of our second component, which contains the p-accordion which I would like to open on the corresponding accordionTab that got the layer which is selected in the search (p-autoComplete).

<div class="scrolller">
<p-accordion>

    <p-accordionTab *ngFor="let group of layersService.tamarGroups" [selected]="false">
        <ng-template pTemplate="header">
            <span class="groups">{{group}}</span>
            <span *ngIf="getGroupStatus(group)"
                class="layerCount">{{layersService.selectedActiveLayers[group].length}}</span>

        </ng-template>

        <div class="tiny-scrolller">
            <div *ngFor="let layer of tamarGroups[group]" class="p-field-checkbox">

                <p-checkbox name="group2" [value]="layer" [(ngModel)]="layersService.selectedActiveLayers[group]"
                    [inputId]="layer.key" (onChange)="layersService.setLayersOnOff(layer)"></p-checkbox>
                <label [ngClass]="{'grayBtnLayer':getStatus(layer)}" [for]="layer.key">{{layer.caption}}</label>
                <span *ngIf="layer.maxScale>0 ||layer.minScale >0 " class="hideInfo">
                    השכבה פעילה בקנה מידה מ - {{layer.maxScale}} עד {{layer.minScale}}
                </span>

            </div>
        </div>
    </p-accordionTab>
</p-accordion>

There is some Hebrew content lol, try to ignore that :) Anyway, I tried to see how I could find the event and found only the [selected] = true option That really does the job, but for me everything is structured in a more generic and dynamic way, so I have to find another solution I would be happy for any help, spouse, recommendation If I was not clear enough I would be happy to elaborate even more :)

Many thanks in advance to all the helpers!

Matan

primeng angular-material angular accordion html
1 Answers

Ok so i changed the [selected] = "false" to [selected]="layersService.isGroupSelected[group]" "layersService" is basically a regular service (code attached) Which contains the variable named isGroupSelected

export class LayersService {
  isGroupSelected: any = {};
   
   constructor etc..
}

and then i just added a for loop to find the relevant group on searchLayer(event) function:

searchLayer(event) {
   var layer = this.layersService.getLayerByCaption(event);
   var group = this.layersService.getGroupByCaption(layer.layerGroup);
   //Just to make sure that isGroupSelected is empty
   this.layersService.isGroupSelected = [];

   for (let index = 0; index < this.layersService.tamarGroups.length; index++) {
     if (this.layersService.tamarGroups[index] == group) {
       this.layersService.isGroupSelected[group] = true;
      }

     }
   if (!layer.visible) {
     this.layersService.setLayersOn(layer);  
   }
}

now the p-accordionTab [selected] the relevant group only if layersService.isGroupSelected[group] is true.

user_118522720
Related