Snackbar + md-icon

[mwent-cray]

Bug, feature request, or proposal:

expand md-icon into actual icon instead of string in snackbar.open

What is the expected behavior?

Print the icon

What is the current behavior?

Printing text

What are the steps to reproduce?

snackbar.open("report_problem", "", {});

What is the use-case or motivation for changing an existing behavior?

Want to show an icon in front of the text

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.0.2
Material 2.0.0-beta.3

[EdricChan03]

Use a custom snackbar component:
customsnackbar.component.ts:

import {Component} from '@angular/core';

@Component({
    selector: 'custom-snackbar',
    template: '<span style="color:white"><md-icon>report_problem</md-icon> Report Problem</span>' // You may also use a HTML file
})
export class CustomSnackbarComponent {}

app.component.ts:

// Your dependencies here
import {MdSnackbar} from '@angular/material';
import {CustomSnackbarComponent} from './path/to/customsnackbar.component';


constructor(snackbar: MdSnackbar){}
openCustomSnackbar() {
    this.snackbar.openFromComponent(CustomSnackbarComponent);
}

app.module.ts:

@NgModule({
    declarations: [
        // Your declarations here
        CustomSnackbarComponent
    ],
    // Other stuff here
    entryComponents: [
        CustomSnackbarComponent
    ]
})

[jelbourn]

As @Chan4077 said, you can use a custom snackbar for anything more than simple text.

[radoslavpetranov]

Apologies for bringing this issue back from the dead but I've been trying to find a way to pass some data (ex: a message) to the CustomSnackbarComponent in the example above. Is this possible in the current version? I'm trying to show different messages in the same custom snackbar` template/component.

[mtpultz]

@Chan4077 @jelbourn this works for messages that are statically set, but is there a way to pass in a message similar to this.snackBar.open(message, action, { duration: 2000 });? I think when it comes to a custom snackbar it feels odd to not have more params to pass into this.snackbar.openFromComponent(CustomSnackbarComponent);

I was hoping to create a custom snackbar that was outlined in the docs using the pizza snackbar example (same example provided above), but where it would have similar params to this.snackBar.open. That way you could pass in a message, but the action could be an ligature to render a font glyph.

[EdricChan03]

@mtpultz @radoslavpetranov Try doing what material2 does for SimpleSnackbar:

Component for custom snackbar:

@Component({
    selector: 'warning-snackbar',
    template: '<span style="color:orange"><md-icon>alert</md-icon> Warning: {{warningContent}}</span>'
})
export class WarningSnackbarComponent {
    warningContent: any;
}

Code to show snackbar:

showCustomSnackbar(snackbarContent: string) {
    let snackbarRef = this.snackbar.openFromComponent(WarningSnackbarComponent);
    snackbarRef.instance.warningContent = snackbarContent;
}

[mtpultz]

Apparently this is the soon to be new documentation for snackbars, which reflects @Chan4077 response and adds self-referencing - #3002

[EdricChan03]

@mtpultz @radoslavpetranov
There is now an official way to include data to another SnackbarComponent since commit baba6ef (now 2.0.0-beta.10):

showCustomSnackbar(content: string) {
    this.snackbar.openFromComponent(AnotherSnackbarComponent, data: content);
}

Snackbar code (<2.0.0-beta.11):

import {Component, Inject} from '@angular/core';
import {MD_SNACK_BAR_DATA} from '@angular/material';

@Component({
  selector: 'another-snack-bar',
  template: '{{data}}',
})
export class AnotherSnackbarComponent {
  constructor(@Inject(MD_SNACK_BAR_DATA) public data: any) { }
}

Snackbar code (≥2.0.0-beta.11):

import {Component, Inject} from '@angular/core';
import {MAT_SNACK_BAR_DATA} from '@angular/material';

@Component({
  selector: 'another-snack-bar',
  template: '{{data}}',
})
export class AnotherSnackbarComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
}

More info:
Updated snackbar docs

Note: You need to install 2.0.0-beta.10 in order for this to work.

[mtpultz]

Also, for custom snackbars you need to invoke a private method _action to indicate the snackbar was closed explicitly by an action so I added an issue for a public method at #5657 that has been marked for implementation

[radoslavpetranov]

@Chan4077 thanks a lot for the headsup!

[stoto34]

How can I add an action in my custom snackbar (openFromComponent) ? Thank you

[EdricChan03]

@stoto34 Could you clarify your question? I don't get it.

[stoto34]

@Chan4077 I would like to add a button to close my custom snackbar but I didn't find any parameters to do that. An idea ?

[EdricChan03]

@stoto34 You can try doing something like my comment above (see #4205 (comment)):

(Note: I'll be using a HTML file for the snackbar in this example)
TS for custom snackbar:

@Component({
    selector: 'my-snackbar',
    templateUrl: 'my-snackbar.component.html'
})
export class MySnackbarComponent {
    constructor(private snackBarRef: MatSnackBarRef<MySnackBarComponent>) { }
    myContent: any;
    snackBarAction: string;
    myAction() {
        snackBarRef.dismissWithAction();
        // Add your functionality in the method that opened the snackbar
    }
}

my-snackbar.component.html

<span>{{myContent}}</span>
<div class="mat-simple-snackbar-action" *ngIf="snackBarAction">
    <button (click)="myAction()">{{snackBarAction}}</button>
</div>

Note: code is based on simple-snack-bar.html:
https://github.com/angular/material2/blob/f4f64ac59e9a42c231760f82530b9d32b3d7a476/src/lib/snack-bar/simple-snack-bar.html#L1-L6
TS to show snackbar:

showCustomSnackbar(snackbarContent: string) {
    let snackBarRef = this.snackbar.openFromComponent(MySnackbarComponent);
    snackBarRef.instance.myContent = snackbarContent;
    // You can rename the `snackBarAction` attribute to anything you want
    snackBarRef.instance.snackBarAction = "Undo";
    snackBarRef.onAction().subscribe(() => {
        console.log('Action clicked!');
    })
}

(P.S. If you're installing Angular Material from angular/material2-builds, in commit b47bfaf, there's now support for a button[mat-button] to be included since the styles have been added.)

[stoto34]

I have to fix some bugs in my code before to test it. Thank you very much for your help :)

Edit : it works perfectly ! Thank you again

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}