Snackbar

Prerequisites

Every Snackbar needs a place to be attached to the dom. The easiest way to achieve this is a dialog-outlet html element within your body element: 

  
  ...
  
    ...
    
  

]]>

It is no problem, that this component is outside of your root app-component!

  Show Snackbar

  
  export class SnackbarDemo {

    constructor(private mdlSnackbarService: MdlSnackbarService) {}

    showSnackbar() {
      this.mdlSnackbarService.showSnackbar({
        message:'The Message',
        action:{
          handler:()=>{
            this.mdlSnackbarService.showToast('You hit the ok Button');
          },
          text: 'OK'
        }
      });
    }
  }
  
]]>
Methods
Method Description
showToast(
message: string,
timeout?: number)
: Promise<MdlSnackbarComponent> 		Shorthand version for 
return this.showSnackbar({
   message: message,
   timeout?: timeout
 });
Shows an auto hiding text.
showSnackbar(
snackbarMessage: IMdlSnackbarMessage)
: Promise<MdlSnackbarComponent>		 Shows a snackbar. The IMdlSnackbarMessage is: 
  {message: string;
  timeout?: number;
  action?:{
    handler: () => void;
    text: string;}

         
message
The message that should be shown. 
timeout
for how long should the message be visible. Defaults to 2750 ms. Is ignored if an action is proivded. 
action
Consists of a handler fuction and an aciton text. The text will be the buttons label. The action is called if the button is clicked.

Returns a Promis with the created MdlSnackbarComponent. You can use this instance to manipulate the MdlSnackbarComponent and be informed if the Snackbar is shown to the user.