By default open ion-fab-list

Question

I need top open ion-fab-list open by-default when the ionic page loads.

Please provide some help.

I have tried following solutions but did not work:

1. write (click) event on fab-button in .html and call event from .ts.

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabButtonClicked(); 
}
fabButtonClicked() {
  console.log('Fab Button clicked.');
}

<ion-fab bottom right #fab class="space-fab-list">
      <button ion-fab #fabBtn mini class="fab-button" [disabled]="!isButtonsFound" (click)="fabButtonClicked()"><ion-icon name="add"></ion-icon></button>
      <ion-fab-list side="top" class="spaces-side-list">
      <button ion-fab *ngFor="let buttonObj of buttonList" class="button-fab-object" (click)="doSomthing(buttonObj)">buttonObj.title</button>
      </ion-fab-list>
</ion-fab>

2. Call setActiveLists method of FabContainer class

Issue: Using this solution ion-fab-list is opened by-default but buttons are not populated from *ngFor. Empty fab-list opened.

@ViewChild('fab') fabElement: FabContainer;

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabElement.setActiveLists(true);
}

This solution did not work for me.

Please help me to solve this issue.

Dynamically generate buttons into ion-fab-list: Button list fetched from web-service

<ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

Thanks, Punita

Answer 1

Thanks for your suggestion. I have solved this issue using ChangeDetectorRef.

call detectChange() method before setActiveLists() method execute

this.changeDetectorRef.detectChanges();
this.fabElement.setActiveLists(true);

Thanks