Material: Default Presets for Interim Element Components

[benjamincharity]

Actual Behavior:

• What is the issue? * When implementing items like a toast or panel, I would like them to all appear in the same place but to do so I need to define the position on each instance.
• What is the expected behavior? Using a provider of some sort to set project wide defaults. example: change a toast's default position, setting all panels to allow close on escape etc..

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: Not sure how to show this in a CodePen as the code needed doesn't seem to exist..
• Details:

Angular Versions: *

• Angular Version: 1.4.9
• Angular Material Version: 10.09

[devversion]

@benjamincharity Developers should be able to add their own presets for toasts /dialogs` etc. (not 100% sure).

It should be probably added to the documentation, since this is kind of internal right now.

[benjamincharity]

Awesome. I imagined it had to be present somewhere but couldn't seem to find any docs. Definitely seems like a pretty key feature for any decent-sized application. If you happen to be able to point me to the correct part of the codebase I'd appreciate it! (still getting my feet wet with Material)

[devversion]

@benjamincharity Of course.

It's a bit more complicated since we generate those "presets" through our interimElementFactory.

.addPreset('prompt', {
  methods: [...],
  options: advancedDialogOptions
});

(Full Snippet here)

---

As an example, you need to access the $mdToastProvider in the config phase, and then you're able to add your custom presets.

$mdToastProvider
  .addPreset('testPreset', {
    options: function() {
      return {
        template:
          '<md-toast>' +
          '  <div class="md-toast-content">' +
          '    This is a custom preset' +
          '  </div>' +
          '</md-toast>',
        controllerAs: 'toast',
        bindToController: true
      };
    }
  });

Then you should be able to use that preset.

$mdToast.show($mdToast.testPreset());

Here is a working demo for the toast.

http://codepen.io/DevVersion/pen/oLoVEd?editors=1010

[benjamincharity]

Oh man, this is more than enough! 🔥 Thanks so much for taking the time!

[devversion]

@benjamincharity You're welcome. Let me know if you have any further questions :)

PS: I'll keep that issue open, since we probably want to add that to the docs. cc. @ThomasBurleson

[stemid]

@DevVersion Case is closed I know but the docs are very unclear on how to pass input to a preset. Your example uses addPreset to create a static template but what if I want to have preset configuration and a dynamic text input like with show().textContent()?