search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.29k stars 6.73k forks source link

ng-accordion is not working #6347

Closed AbhiInfy closed 7 years ago

AbhiInfy commented 7 years ago

Bug description:

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 .

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. 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.

I'm using ng2-accordion from below link: https://www.npmjs.com/package/ng2-accordion

`

{{title}}

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

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

<div class="data-source-list" [word-highlighter]="searchText"> <data-source-list-detail [selectedWorkItemGroup]="selectedWorkItemGroup"> <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>
                </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>

`

Angular:2

pkozlowski-opensource commented 7 years ago

I'm using ng2-accordion from below link: https://www.npmjs.com/package/ng2-accordion

The mentioned project has nothing to do with https://github.com/angular-ui/bootstrap (this repo).

If you are looking for accordion / bootstrap widgets for Angular 2 then use https://ng-bootstrap.github.io