Correct FAB position Material Angular

I need to create a FAB inside a md-sidenav-container in my web application.

My code is as follows:

<md-sidenav-container>
 <!--sidenav and toolbar...-->
    <div class="content">
        <router-outlet><router-outlet/>
    </div>
</md-sidenav-container>

The content of router-outlet is dynamic, the template that will contain the FAB is the next:

<div *ngFor="let item of items">
    <md-card>
        {{item.info}}
    </md-card>
</div>

<button md-fab color="accent" (click)="addItem()">
    <md-icon>add</md-icon>
</button>

The problem that I have is that the FAB doesn't actually float, it scrolls with the page:

I've tried to fix the FAB using CSS, but it doesn't work, so I been reading the material angular docs, specially the part that says that:

FABs inside sidenav

For a sidenav with a FAB (or other floating element), the recommended approach is to place the FAB outside of the scrollable region and absolutely position it.

So, I tried to put my FAB outside the md-sidenav-container. Doing this works as I expected

but with a problem, Since this button is outside my router-outlet, it appears in every page, and I need to find a way to hide/show the button between these, as well as perform a different action when is clicked in each of these pages. E.g: I will need to show the button only in pages like /items, /objects and hide it in pages like /items/show/1.

I've tried with a global boolean, but it doesn't work since the button is loaded in my AppComponent, and the boolean updates takes place in other components.

What can I do? Try to fix the FAB position using CSS? or try to find another way to show/hide it? How?

**Edit 07/12/17 After 3 days, I found the solution to my problem in this thread. In order to have your button only on your desired component, you need to make this:

/* Your component.css */
.fab{
  right: 20px;
  bottom: 20px;
  position: fixed !important;
}

So, this will not work until you add the following

.mat-sidenav-container, .mat-sidenav-content {
    transform: none !important;
}

Make sure that this is in the component that holds the md-sidenav-container.