Ngx-bootstrap: bug(demo): accordian with caret

[mik-laj]

Hi.
I updated ng2-bootstrap and angular2 to latest version and I have a problem now. You also have a problem, but I do not know if you know.

Look at: http://valor-software.com/ng2-bootstrap/#accordion and last example "I can have markup, too!".
In this example, depending on whether the panel is opened, it should appear relevant icon.
But now it is broken. There is only one icon. Directive ngClass doesn't work properly.

Code example:

<accordion-group #group [isOpen]="status.open">
    <div accordion-heading>
        I can have markup, too!
        <i class="pull-right glyphicon"
        [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
    </div>
    This is just some content to illustrate fancy headings.
</accordion-group>

Thanks in advance

[mik-laj]

I solved this problem by fonts-awesome's helper class, but not every user has rejected a built-in set of icons.

<i class="pull-right fa fa-caret-down"
    [ngClass]="{'fa-rotate-180': group?.isOpen}"></i>

[valorkin]

thing is, it is a demo sample issue
if you can PR a fix I will appreciate
but please check that it works on bs3 and bs4 pages

[mik-laj]

I think it's related to: https://github.com/angular/angular/issues/8244

[valorkin]

This issue is back again with RC.1 :(

[xmlking]

this appears like working.

<accordion-group  #group [isOpen]  *ngFor="let zone of (myData | async)?.Zones">
      <div accordion-heading> {{zone.Name}}
        <i class="pull-right glyphicon" [ngClass]="group?.isOpen ? 'glyphicon-chevron-down': 'glyphicon-chevron-right'"></i>
      </div>
</accordion-group>

[xmlking]

is there a way to suppress the blue border for the accordion heading?

[msfanous]

@xmlking Adding the following to your CSS should do what you want. However, a lot of folks advise against this since it goes against accessibility guidelines.

a.accordion-toggle {outline:none !important;}

[msfanous]

Actually, without the outline, it's still clear that the heading is in focus since the heading text is underlined. So, from an accessibility perspective, it should be okay to remove the border.

[aqweider]

did you manage to solve accordion icon and animation ?

[msfanous]

@atallahquaider Yes, the snippet that @xmlking posted produces a working accordion with a caret that updates correctly. If you add the CSS that I posted, the blue outline is suppressed.

[mantupani17]

yep, i managed by doing some string interpolation...!