Accordion: templateRef Error when using nested accordions

[Numalama]

Based on #2240

Bug description:

When I work in a nested accordion without attribute [disabled] = "false" or with [disabled] = "true". I have a templateRef error in the console and some display, styles and action bugs.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/IVQrJ00mSGAa5syAxGrC?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.2.5
ng-bootstrap: 1.0.3
(Same bug in 1.0.2)

EXAMPLE:
Work :
Case: [disabled] = "false"

<ngb-accordion  [closeOthers]="true"  activeIds="static-0">
  <ngb-panel  *ngFor=" let children of laptop.children; let index = index" id="static-{{index}}" title="[{{children.id}}] - {{children.name}}">
    <ng-template ngbPanelContent>
        <ngb-accordion activeIds="static2-0">
            <ngb-panel  *ngFor=" let children2 of children.children; let index2 = index" [disabled]="false"   id="static2-{{index2}}" >
              <ng-template ngbPanelTitle>
                  <span>&#9733; <b>[{{children2.id}}]</b> {{children2.name}} &#9733;
                    <div style="float:right; border: solid 0.3em; border-color: gold;">+{{children2.price}}€</div>
                  </span>
              </ng-template>
            </ngb-panel>
          </ngb-accordion>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Don't work:
Case: [disabled] = "true"

<ngb-accordion  [closeOthers]="true"  activeIds="static-0">
  <ngb-panel  *ngFor=" let children of laptop.children; let index = index" id="static-{{index}}" title="[{{children.id}}] - {{children.name}}">
    <ng-template ngbPanelContent>
        <ngb-accordion activeIds="static2-0">
            <ngb-panel  *ngFor=" let children2 of children.children; let index2 = index" [disabled]="true"   id="static2-{{index2}}" >
              <ng-template ngbPanelTitle>
                  <span>&#9733; <b>[{{children2.id}}]</b> {{children2.name}} &#9733;
                    <div style="float:right; border: solid 0.3em; border-color: gold;">+{{children2.price}}€</div>
                  </span>
              </ng-template>
            </ngb-panel>
          </ngb-accordion>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Don't work:
Case without: [disabled] = "false"

<ngb-accordion  [closeOthers]="true"  activeIds="static-0">
  <ngb-panel  *ngFor=" let children of laptop.children; let index = index" id="static-{{index}}" title="[{{children.id}}] - {{children.name}}">
    <ng-template ngbPanelContent>
        <ngb-accordion activeIds="static2-0">
            <ngb-panel  *ngFor=" let children2 of children.children; let index2 = index"  id="static2-{{index2}}" >
              <ng-template ngbPanelTitle>
                  <span>&#9733; <b>[{{children2.id}}]</b> {{children2.name}} &#9733;
                    <div style="float:right; border: solid 0.3em; border-color: gold;">+{{children2.price}}€</div>
                  </span>
              </ng-template>
            </ngb-panel>
          </ngb-accordion>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

[pkozlowski-opensource]

It is because you were missing the content for a nested accordion, see it working properly when you add content: http://plnkr.co/edit/Ewi1iiF0tzdPgAWsmlq6?p=preview

Having said this I agree that we should have a better error message (or just ignore empty content). Keeping this open to improve code for this corner case.

[Numalama]

Thanks a lot, ( and for the 1.0.3 release too)