Material: $mdToast: is there a way to specify parent when using simple()

[warpdesign]

I'm using $mdToast.show($mdToast.simple().content('foo')) to insert toast in my app.

The problem is that by default I guess toast is inserted into the body of the document. Since I'm using SVG (that can several body elements), this messes up with $mdToast: several toasts are displayed, some with default {{ toast.content }} and they are not removed.

Is there a way to easily change the parent when using simple so that the toast only gets inserted into document.body ?

[ngraef]

It's not documented on the $mdToast service page, but you can use the parent(element) configuration method:

var toast = $mdToast.simple()
    .content(message)
    .action('OK')
    .highlightAction(true)
    .hideDelay(0)
    .position('bottom right')
    .parent(el);

$mdToast.show(toast);

Demo

EDIT: parent(element) seems to only work when the element is an md-content node. That's also not documented anywhere.

[warpdesign]

Hmm.. I'm getting parent: is not a function, does it require a specific version of angular material ?

[bluebirdtech]

I didn't seem to get the parent property to do anything, even when applying to md-content/md-dialog-content elements. The toast was always placed relative to the screen.

Reading the material design spec though, it only mentions positioning relative to the screen. Is this the only available positioning? If so, I'm not sure what the parent property is for.

For reference, I was trying to add a toast to a dialog, which I've now decided against. I'll just use the bottom of the screen and hope users spot it. What I really want is #698 so I can show an alert over a dialog that the user cannot miss.

[ThomasBurleson]

Toasts are global and intended for the SPA body viewport; you cannot
specify a parent .

[bluebirdtech]

Thanks, I'm fine with that. Not sure what the parent property listed in the API reference is for then? https://material.angularjs.org/HEAD/#/api/material.components.toast/service/$mdToast

[ThomasBurleson]

@warpdesign @bluebirdtech - My apologies.

The API is correct that you should be able to specify a parent to be used with $animate.enter(toast, parent). While the toast should be displayed in the $rootElement or body, you should be able to specify a custom parent.

You have discovered a bug; I will submit a PR #3956 for the fix(es).

Note:

• that the parent will default to the $rootElement if not specified.
• the parent should have a position:relative for the toast to position _absolute_ properly.

[Prasinooo]

the parent area should be the child of an md-content,like this:
'md-content'
' div id="parent"'

........
' /div'
'/md-content'

[roelzkie15]

parent() of $mdToast works well in v1.1.1

[Padraig-O-Cuinn]

.simple() for me isn't getting recognized? does anyone know why?

[iposton]

@Padraig-O-Cuinn this worked for me. Make sure that you injected $mdToast into your controller. Credit to @ngraef for having the correct solution.

var parentEl = angular.element(document.body);
$mdToast.show(
       $mdToast.simple()
        .textContent('this is a toast with action')
        .action('OK')
        .highlightAction(true)
        .hideDelay(0)
        .position('bottom right')
        .parent(parentEl)
     );