0

I'm trying to include only snackbar component from material-components repo on Github:

https://github.com/material-components/material-components-web

halfer
  • 19,824
  • 17
  • 99
  • 186
Climb Tree
  • 490
  • 1
  • 7
  • 15
  • 1
    Have you looked at the latest version of the official angular-material package? It lets you import only the specific material-modules you want to use in your project. – yoonjesung May 02 '17 at 14:17
  • Actually I'm not talking about @angular/material package. I am talking about MD Components from material.io I think this is little different for angular material. Checkout https://material.io and https://github.com/material-components/material-components-web – Climb Tree May 03 '17 at 04:14
  • Have you considered switching to @angular/material? It's designed to work "out-of-the-box" with ng2. – yoonjesung May 03 '17 at 16:08
  • @angular/material is good, but still isn't quite as polished and feature complete as material component libraries for other frameworks. Shouldn't these two projects work together? Seems like they have similar goals. – gangsta May 10 '17 at 21:31
  • an answer to my question about collaboration between material components and material 2 is in this thread -> https://groups.google.com/forum/#!searchin/angular-material2/material$20components%7Csort:relevance/angular-material2/R7wVIy7-98E/IdL9nc1oDwAJ – gangsta May 10 '17 at 21:39
  • Hi ClimbTree. I've noticed that a number of your questions are very short, and once the chatty material is trimmed out, they often seem to be lacking any research or prior effort. There is an expectation here that questions are asked only after a good amount of work has already been done, and I note that in your question history you've (1) asked people to code things for you, and (2) ignored help you have received, as per this question. Coupled with the (3) urgent begging in a recent post, these are not ideal contributions. – halfer Dec 09 '17 at 11:48
  • It's worth noting that some of these problems may attract downvotes and close votes, and while I hope you get the answers you want, if you get too many downvotes, your account will be automatically stopped from asking new questions. So, it really is worthwhile to make every post count. – halfer Dec 09 '17 at 11:49

2 Answers2

1

You could try https://material.angular.io

HTML

<button md-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

TS

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


@Component({
  selector: 'snack-bar-component-example',
  templateUrl: './snack-bar-component-example.html',
})
export class SnackBarComponentExample {
constructor(public snackBar: MdSnackBar) {}

openSnackBar() {
 this.snackBar.openFromComponent(PizzaPartyComponent, {
   duration: 500,
  });
}
 }


@Component({
selector: 'snack-bar-component-example-snack',
templateUrl: './snack-bar-component-example-snack.html',
styleUrls: ['./snack-bar-component-example-snack.css'],
})
 export class PizzaPartyComponent {}

example from actual docs https://material.angular.io/components/component/snack-bar

Tinus Jackson
  • 3,397
  • 2
  • 25
  • 58
0

The Blox Material library provides an integration between Material Components for the Web and Angular. It also has bindings for the material-components snackbar component that you want to use.

There is a getting started guide for the library here: https://blox.src.zone/material#/guides/gettingstarted

Documentation and code samples for snackbar messages can be found here: https://blox.src.zone/material#/directives/snackbar

In short, you have to install the @blox/material library and import its MaterialModule in your Angular application. That will register an MdcSnackBarService that can be used to create snackbar messages. All options, settings, and theming possibilities of mdc-snackbar are available.

If you follow the Getting Started guide and only use the MdcSnackBarService, your production build will only contain code for the snackbar component.

If you want to do this without an existing integration library, maybe have a look at the sourcecode from Blox Material for inspiration.

Gerrit
  • 173
  • 1
  • 2
  • 6