[ionic4] How to close FAB button in ionic4

Ionic Framework ionic-v3
1

How to close FAB button in ionic4… my code was working in ionic 3 to close FAB button but the same code is not working in ionic4… my code is given below:

<ion-fab vertical="bottom" horizontal="end" slot="fixed" #fab>
		<ion-fab-button color="primary">
			<ion-icon name="ios-options"></ion-icon>
		</ion-fab-button>
		<ion-fab-list side="top">
			<ion-fab-button (click)="openSort(fab)"><ion-icon name="md-funnel"></ion-icon></ion-fab-button>
			<ion-fab-button (click)="openFilter(fab)"><ion-icon name="ios-funnel"></ion-icon></ion-fab-button>
		</ion-fab-list>		
	</ion-fab>

        openFilter(fab) {		
		fab.close();    // this is not working in ionic 4
		this.router.navigateByUrl('filter-listing');
	}

	openSort(fab) {		
		fab.close();  // this is not working in ionic 4
		his.router.navigateByUrl('sort-listing');		
	}

Some one plz help…

@lucasbasquerotto

2

@pantarmj I haven’t used ion-fab in v4 so I don’t know how to solve that.

I looked at the v4 docs but they don’t have a javascript (angular) code example to access the fab button programatically.

I saw this issue that seems the same as yours, although the solution seems a bit hackish, but maybe it will work in your case too:

1 Like
3

Thanks dear… but the solution given in the link is not working for me @lucasbasquerotto … This is the code I have written in ts file to close the FAB button :

        document.getElementById('fab-btn').classList.remove('fab-button-close-active');
		document.getElementById('fab-list').classList.remove('fab-list-active');		
		document.getElementById('fab-btn1').classList.remove('fab-button-show');
		document.getElementById('fab-btn2').classList.remove('fab-button-show');
1 Like
4

Glad that you were able to solve it. When the Ionic Team update the docs, I advise to use the official API to close the FAB button (assuming there will be a programatic way to close the button, like on v3).

1 Like
5

Thanks for your valuable advise dear. Surely will do as advised.

6
  1. Add reference variable to your component. <ion-fab #fabComponent></ion-fab>
  2. At ts file, get component reference in the parent component. @ViewChild('fabComponent') fabComponent: any;
  3. Call component method on the reference. this.fabComponent.close();