title: By default open ion-fab-list
body: <p>I need top open ion-fab-list open by-default when the ionic page loads.</p>
  
  <p>Please provide some help.</p>
  
  <p>I have tried following solutions but did not work:</p>
  
  <p><strong>1. write (click) event on fab-button in .html and call event from .ts.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ionViewDidEnter() {
    this.calculateButtons();
  }
  
  calculateButtons() {
    // buttonList list populated code
    this.fabButtonClicked(); 
  }
  fabButtonClicked() {
    console.log('Fab Button clicked.');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-fab bottom right #fab class="space-fab-list"&gt;
        &lt;button ion-fab #fabBtn mini class="fab-button" [disabled]="!isButtonsFound" (click)="fabButtonClicked()"&gt;&lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
        &lt;ion-fab-list side="top" class="spaces-side-list"&gt;
        &lt;button ion-fab *ngFor="let buttonObj of buttonList" class="button-fab-object" (click)="doSomthing(buttonObj)"&gt;buttonObj.title&lt;/button&gt;
        &lt;/ion-fab-list&gt;
  &lt;/ion-fab&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>2. Call setActiveLists method of FabContainer class</strong></p>
  
  <p>Issue: Using this solution ion-fab-list is opened by-default but buttons are not populated from *ngFor. Empty fab-list opened.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@ViewChild('fab') fabElement: FabContainer;
  
  ionViewDidEnter() {
    this.calculateButtons();
  }
  
  calculateButtons() {
    // buttonList list populated code
    this.fabElement.setActiveLists(true);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This solution did not work for me.</p>
  
  <p>Please help me to solve this issue.</p>
  
  <p><strong>Dynamically generate buttons into ion-fab-list:</strong>
  Button list fetched from web-service</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;ion-fab bottom right #fab class="space-fab-list"&gt;
    &lt;button ion-fab #fabBtn mini class="fab-button" &gt;&lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
    &lt;ion-fab-list #fabList side="top" class="side-list"&gt;
        &lt;button ion-fab class="space-fab-button home" (click)="openHome()"&gt;Home&lt;/button&gt;
        &lt;button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)"&gt;{{ button.name }}&lt;/button&gt;
    &lt;/ion-fab-list&gt;
  &lt;/ion-fab&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks,
  Punita</p>