CODEWITHSUNDEEP
angularionic3floating-action-button
Punita
Punita

Reputation: 1387

By default open ion-fab-list

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

Upvotes: 2

Views: 3241

Answers (2)

Punita
Punita

Reputation: 1387

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

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58553

Here it is,

Component side :

import { FabContainer } from 'ionic-angular';

@ViewChild('fab')fab : FabContainer;

ionViewDidEnter(){
    this.fab.toggleList();
}

Template side :

<ion-fab top right edge #fab>
    <button ion-fab mini ><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

WORKING DEMO

Working with Dynamically generate buttons into ion-fab-list also:

Component side :

//Logic is same as above
buttonList = [
    { name : '1'},
    { name : '2'},
    { name : '3'},
    { name : '4'},
    { name : '5'},
]

Template side :

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

WORKING DEMO

Upvotes: 3

Related Questions