How to test ngx-toastr with protractor in Angular 2

I'm using ngx-toastr with my angular 2 application and i've started running some e2e tests against it. I'm having difficulties testing the toastr as it pops up and dissapears after 5 seconds.

I've tried adding several different selection methods as suggested on Stackoverflow, without luck.

What i've tried:

getToastr() {
    var EC = protractor.ExpectedConditions;
    var targetEle = element(by.css(".toast-message"));

    browser.wait(EC.visibilityOf(targetEle), 10000, 'NOT VISIBLE'); //wait until 
    //ele visible
    browser.wait(EC.presenceOf(targetEle), 10000, 'NOT PRESENT');
}

which makes it hit the not visible code, eventhough i see the toastr present in the window - it is not able to find it in the dom. I've taken a screenshot of the dom to show you the position as i think it may have something to do with this.

Here's a screenshot of the dom, i'm trying to toast within the start-signup section. Note that the router-outlet named Default does not wrap start-signup - i don't know if this is by design or not. Screenshot of DOM

It appears as though the toastr div is not inside the start-signup tag. I haven't been able to move it inside, even with the ngx-toastr's own method to move the toastr message inside a div "of your choosing". Currently i placed it in app.component, and placed the toastr "holder" div next to the router outlet - i also tried placing the holder div within the router-outlet without luck as well.

I can provide more information if need be. This was the initial information that i could think of.

Kind regards Chris