ng-accordian in Angularjs 2

[abhishek chaturvedi]

We are facing issue when trying to highlight the entity name which is getting rendered on accordion header. To make it working we need to set one attribute (searchon=”true”) to identify the element where we want highlighting functionality. Following are the problems we are facing .

1. If we talk about the header that’s been constructed by ng-accordian which is third party. So if we want to set the attribute we need to find the element in life cycle hook of the component using DOM manipulations.
2. If we manage to fix the point 1 above then we will lose the click function of the heading (if clicked on the entity name). This click function is also not controlled by us, it’s been handled by ng-accordian internally.

Note:- entity name is the only property binding to the UI of entry screen, we are filtering on the other properties (fund name, product name etc.) but not visible on UI as per current design, So highlighting will only available on entity name if above issue is resolved somehow.

[Sander Elias]

Hi Abhishek,

What accordion are you using? from what library? Can you show us some code, making it easier to help you?

Regards

Sander

[abhishek chaturvedi]

Thanks for that.

I'm using ng2-accordion from below link:

https://www.npmjs.com/package/ng2-accordion

And using like below:

<section class="widget-header">

    <div class="row">

        <div class="col-xs-6">

            <h1 class="widget-title">{{title}}</h1>

        </div>

        <div class="col-xs-6">

            <ul class="list-inline pull-right">

                <li>

                    <button class="btn btn-sm btn-link action-bar-toggle" (click)="isDataSourceSearchBarActive = !isDataSourceSearchBarActive" 

                            [ngClass]="{active: isDataSourceSearchBarActive}"><i class="fa fa-search" ></i></button>

                </li>

            </ul>

        </div>

    </div>

</section>

<div class="action-bar document-search-bar row" [ngClass]="{active: isDataSourceSearchBarActive}">

    <div class="col-xs-6">

        <input class="form-control input-sm document-search-form" [(ngModel)]="searchText" placeholder="Search&hellip;" (keyup)="search($event)">

    </div>

    <div class="col-xs-6">

    </div>

</div>

<div class="data-source-list" [word-highlighter]="searchText">

    <data-source-list-detail [selectedWorkItemGroup]="selectedWorkItemGroup"></data-source-list-detail>

    <div *ngIf="selectedWorkItemGroup?.workItemEntities.length !== 0" class="scrollable" >

        <accordion *ngFor="let workItemEntity of selectedWorkItemGroup.workItemEntities; let workItemEntityIndex=index" [showArrows]="true"  >

            <accordion-group heading="{{workItemEntity.entityName}}" [isOpened]="accordianGroupStats[workItemEntityIndex]"  >

                <div id="accordian-index-{{workItemEntityIndex}}" class="panel-body">

                    <form #datapoint="ngForm">

                        <div *ngFor="let workItem of workItemEntity.workItems; let workItemIndex=index">

                            <div *ngIf="workItem?.dataPointName==='Holding Performance'">

                                        <holding-performance [workItem]="workItem" [highlightPriority]="highlightPriorities[currentWorkItemIndex][priorityindex]" 

                                                    (formSubmitted)="childFormSubmitted($event)"  [loadedFirstTime]="priorityindex" [accordionGroupStats]="accordionCopy"

                                                    [processStageName]="selectedWorkItemGroup?.processStageName" [workItemIndex]="workItemEntityIndex" [currentWorkItemIndex]="currentWorkItemIndex"

                                                    name="holdingPerformance" [ngModel]="workItem">

                                        </holding-performance>

                            </div>

                            </div>

                    </form>

                     <div class="panel-footer m-t-3">

                    <div class="row">

                        <div  class="col-sm-12">

                            <button class="btn btn-sm btn-outline-primary pull-right" type="submit"  (click)="submit($event,workItemEntity,workItemEntityIndex)" [disabled]="!accordianGroupStats[workItemEntityIndex] || !datapoint.valid">Submit</button>

                            <button *ngIf="selectedWorkItemGroup?.processStageName==='Entry'" class="btn btn-sm btn-outline-defaultt" id="clearAll{{workItemEntityIndex}}" [disabled]="!accordianGroupStats[workItemEntityIndex]" (click)="clearDatapoints(workItemEntity?.workItems)">Clear</button>

                            <button *ngIf="selectedWorkItemGroup?.processStageName==='Entry'" class="btn btn-sm btn-outline-default" [disabled]="!accordianGroupStats[workItemEntityIndex] || !datapoint.valid" id="save{{workItemEntityIndex}}" (click)="save()">Save</button>

                        </div>

                    </div>

                </div>

                 

                </div>

            </accordion-group>       

        </accordion>

    </div>

</div>

or if we have any better option of accordion then it will be appreciated.

[Sander Elias]

Hi Abhishek,

Isn't this cusecase covered by the library like this:

    <!-- accordion with custom "clickable zone" -->
    <accordion>
        <accordion-group heading="About me">
            Its all about me.
        </accordion-group>
        <accordion-group heading="Contacts">
            This is content of the contacts
        </accordion-group>
        <accordion-group heading="Map">
            Content of the Map
        </accordion-group>
        <accordion-group>
            <accordion-heading>
                <input type="checkbox"> <accordion-toggle>Custom clickable heading</accordion-toggle>
            </accordion-heading>
            Its all about me.
        </accordion-group>
    </accordion>

If not, the sourcecode for the library is readily available. Or you can ask the creator, by filing an issue in it's repo.

Regards

Sander