# Close() not working in fab ionic-v4

**URL:** <https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710>\
**Category:** Ionic Framework\
**Created:** [September 4, 2018, 1:26pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710 "2018-09-04T13:26:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![anupzone](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anupzone/32/120703_2.png) [@anupzone](https://forum.ionicframework.com/u/anupzone)\
**Post date:** [September 4, 2018, 1:26pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/1 "2018-09-04T13:26:47Z")

</div>

```auto
import { Fab} from '@ionic/angular';
.........
@Component({
  selector: 'app-dashboard',
  templateUrl: 'dashboard.page.html',
  styleUrls: ['dashboard.page.scss'],
  providers: [Fab]
})
.........
constructor(public fab: Fab) { }
.........
closefab(){
    this.fab.close();
  }

```

error is:

```auto
core.js:1633 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'close' of null
TypeError: Cannot read property 'close' of null

```

 ![14%20pm](https://global.discourse-cdn.com/ionicframework/original/3X/f/2/f2a9ab93655a79e5b08edd45bc65206fde58cf08.png)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 4, 2018, 2:20pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/2 "2018-09-04T14:20:19Z")

</div>

The for pinging me, not sure I could help, what’s Fab again? 😉

---

<div class="post-metadata">

**Author:** ![anupzone](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anupzone/32/120703_2.png) [@anupzone](https://forum.ionicframework.com/u/anupzone)\
**Post date:** [September 4, 2018, 2:52pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/3 "2018-09-04T14:52:29Z")

</div>

these buttons 😄  
 ![49%20pm](https://global.discourse-cdn.com/ionicframework/original/3X/3/7/37b2d9941b5610d822980751bc78baa4d88330d0.png)

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 4, 2018, 3:03pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/4 "2018-09-04T15:03:30Z")

</div>

Oh…and why you inject them as provider to call a method close?

---

<div class="post-metadata">

**Author:** ![anupzone](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anupzone/32/120703_2.png) [@anupzone](https://forum.ionicframework.com/u/anupzone)\
**Post date:** [September 4, 2018, 3:09pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/5 "2018-09-04T15:09:04Z")

</div>

because i got error

```auto
core.js:1633 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DashboardPage -> Fab]: 
  StaticInjectorError(Platform: core)[DashboardPage -> Fab]: 
    NullInjectorError: No provider for Fab!
Error: NullInjectorError: No provider for Fab!

```

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [September 4, 2018, 3:18pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/6 "2018-09-04T15:18:37Z")

</div>

I mean what’s the goal of the feature?

Sorry like I said I don’t know much about it but since you pinged me I try to understand to help

---

<div class="post-metadata">

**Author:** ![anupzone](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/anupzone/32/120703_2.png) [@anupzone](https://forum.ionicframework.com/u/anupzone)\
**Post date:** [September 4, 2018, 3:35pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/7 "2018-09-04T15:35:17Z")

</div>

resolved without implementing anything 🙂 and thanks, atleast u tried 🙂

did this only

```auto
var fabs = document.querySelectorAll('ion-fab');
    for (var i = 0; i < fabs.length; i++) {
      fabs[i].activated = false;
    }

```

---

<div class="post-metadata">

**Author:** ![pantarmj](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@pantarmj](https://forum.ionicframework.com/u/pantarmj)\
**Post date:** [March 19, 2019, 7:11am UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/8 "2019-03-19T07:11:11Z")

</div>

I solved this issue by writing different code… plz refer below link:

> [@\[ionic4\] How to close FAB button in ionic4](https://forum.ionicframework.com/t/ionic4-how-to-close-fab-button-in-ionic4/159265/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');

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:17pm UTC](https://forum.ionicframework.com/t/close-not-working-in-fab-ionic-v4/140710/9 "2021-07-19T21:17:59Z")

</div>

Closed on July 19, 2021, 9:17pm UTC