-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unclear documentation about snackbar usage on documentation website #3002
Comments
This is a good suggestion. I had to go through the sources of openFromComponent to find out information that should have been in the documentation or in the examples. |
Thanks @thanhpd for putting this together, really helpful. I guess the last missing piece is how we can send different messages from a custom component that is opened by the SnackBar. If I have a SnackBar with 2 buttons (i.e. cookie-law component). Could you share the API for that? |
@tobi-or-not-tobi The buttons in your custom component can call its component methods as usual. Then you can close the snackbar by using MdSnackBarRef method within that custom component. |
@thanhpd the example is broken :/ |
@M-a-c I think this is because Angular has updated it npm package to version 4, and Material2 is not ready beyond version 2. Updated the example to use fixed version of Angular2, should be working again. |
Is there a way to set the background colour of a snack bar? |
@xuanshenbo You can use |
@thanhpd Do you want to commit that code as an example? Do you mind if I base a commit explaining how this works? (my commit earlier does not address the main issue in this thread, though it is supposed to fix some docs stuff) |
@M-a-c Please do that, it'll help a lot of people. I'm pretty busy these days so not sure how the documentation contribution works. |
@thanhpd checkout the pr, let me know if you find something out of place :) |
Docs don't seem to indicate how to distinguish between Might be worth adding to the example code in the docs that the custom component (in this case SimpleSnackBar) should contain onAction and onDismiss methods for invoking Seems wrong to use the private method @Component({
selector: 'app-simple-snackbar',
templateUrl: './simple-snackbar.component.html',
styleUrls: ['./simple-snackbar.component.scss']
})
export class SimpleSnackBarComponent {
public snackBarRef: MdSnackBarRef<SimpleSnackBarComponent>;
public message: string;
public action: string;
public onAction() { this.snackBarRef._action(); }
public onDismiss() { this.snackBarRef.dismiss(); }
} <div>
<p>
{{ message }}
</p>
<button md-button
color="accent"
(click)="onAction()">{{ action }}</button>
<button md-button
color="accent"
(click)="onDismiss()">{{ dismiss }}</button>
</div> Now, subscriptions are propagated through the reference: const snackBarRef = this.open(...).onAction().subscribe(() => {
console.log('action was explicitly clicked');
});
const snackBarRef = this.open(...).afterDismissed().subscribe(() => {
console.log('regardless of how the snackbar has been dismissed');
}); This would be over documentation if written into the docs, but would be a good addition to the example code where action or dismiss responses could be bound to template to display a boolean indicating which occurred like other examples in the docs provide. |
Added an issue for a public method for indicating an action has been performed in a custom snackbar - #5657 |
`<div class="snackbar" [@snack-visibility]="snackVisibility"> `import { Component, OnInit } from '@angular/core'; import {NotificationService} from '../notification.service' @component({ message: string snackVisibility: string = 'hidden' constructor(private notificationService: NotificationService) { } ngOnInit() { } `import { NgModule } from '@angular/core'; //IMPORT DOS COMPONENTES DO MATERIAL import { SnackbarComponent } from './snackbar.component'; @NgModule({ `import {EventEmitter} from '@angular/core' export class NotificationService { notify(message: string){ } |
AFAICT this issue is obsolete; the docs for snackbar are up to date and the code examples all work. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Documentation: Snackbar component is unclear, and its Plunker code example is not running
Details:
It seems the Snackbar component documentation on website does not describe fully about how to open snackbar from component and what to do with
MdSnackBarRef
in API Reference tab while they are mentioned in Overview tabPlunker example in Examples tab of Snackbar component is not working.
Reproduce steps:
Notes:
PizzaPartyComponent
indeclarations
andentryComponents
ofngModule
inmain.ts
file, plus create new templatesnack-bar-component-example-snack.html
and component stylesheetsnack-bar-component-example-snack.css
forPizzaPartyComponent
.The documentation does not describe how to execute the action of a component itself if that component is opened in snackbar.
In the project source code, I've found that to execute the dismiss snackbar action when open snack bar from
open
method you guys did this:MdSnackBarRef
of the content component: In classSimpleSnackBar
, there issnackBarRef: MdSnackBarRef<SimpleSnackBar>
property. To be able to dismiss snackbar,SimpleSnackBar
component has to calldismiss()
method, which in turn calls the_action()
method ofsnackBarRef
.open
method ofMdSnackBar
:At
line 4
, thesnackBarRef
of instanceSimpleSnackBar
ofsimpleSnackBarRef
was assigned tosimpleSnackBarRef
itself. Therefore, the snackbar component was able to close.If I want to create a snackbar from a component with a dismiss/arbitrary button, then I have to do the same with my code. However, there is no instruction to do that with
openFromComponent
method. I think this should be documented clearer so developer can do that from looking at the documentation, not have to dig into the source code.Plunker example: https://plnkr.co/edit/rOql4ebj2d5ynQpzutUW?p=preview
Which versions of Angular, Material, OS, browsers are affected?
Material: 2.0.0-beta1
The text was updated successfully, but these errors were encountered: