Questions tagged [angular2-material]

Questions about the former package of the Angular Material Library (@angular2-material/*). Note that packages scoped under angular2-material are no longer being used from September of 2016 in favour of the @angular/material package on NPM. This tag should be used for questions targeting the old package.

Angular 2 Material is a set of common UI components conforming to Google's Material Design specification that can be used for the development of Angular 2 applications.

List of Currently Available Components

md-button is an HTML <button> or <a> tag enhanced with styling and animation to match the Material Design Button specification.
md-button-toggle is a group of buttons that can be toggled and conform to the Material Design Toggle Buttons specification.
md-card is a content container component that conforms to the Material Design Cards specification.
md-checkbox is a selection control that allows users to make a binary choice for a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves in the same way. Material Design Checkbox specification.
md-grid-list is an alternative list view that arranges cells into grid-based layout. Material Design Grid Lists specification.
md-icon is a component that displays an icon, which can be a font glyph or an SVG image.
md-input is basic input component of Material 2. Material Design Text Field specification
md-list is a container component that wraps and formats a series of line items. As the base list component, it provides styling conforming to the Material Design Lists specification, but no behavior of its own.
md-menu is a list of options that displays when triggered and conform to the Material Design Menus specification.
md-progress-bar is a component for indicating progress and activity, matching the Material Design Progress & Activity specification.
md-progress-circle is a component for indicating progress and activity, matching the Material Design Progress & Activity specification.
md-radio-button allow the user to select one option from a set. Material Design Radio Button specification.
md-sidenav-layout and md-sidenav comprise the side navigation component for Material 2. Material Design Navigation Drawer specification.
md-slider is a component that allows users to select from a range of values by moving the slider thumb. Material Design Sliders specification.
md-slide-toggle ("switch") is a two-state selection control conforming to the Material Design Switch specification.
md-tab-group and md-tab allow the user to organize their content by labels such that only one tab is visible at any given time. Material Design Tabs specification.
md-toolbar is a vertical aligned bar, which can hold the application title or actions and conforms to the Material Design Toolbars specification.
md-tooltip allows the user to specify text to be displayed when the mouse hover over an element. Material Design Tooltips specification.

Resources

82 questions

votes

6 answers

Angular 2 Material - How To Center Progress Spinner

I have implemented the Angular 2 progress spinner from the below link https://github.com/angular/material2/tree/master/src/lib/progress-spinner I would like to have it centered, however, the only way I can seem to get it to work is to remove the…

css angular angular2-material

asked Dec 29 '16 at 22:31

user2085143

4,162
7
39
68

votes

1 answer

Passing input values to Dialog Component

I am implementing the dialog component of material2 and faced this issue: I want to make a generic dialog for all the confirmation type of messages, where developer can input the text to the dialog as per the business requirement. But as per the…

angular typescript angular2-material

asked Dec 28 '16 at 07:06

Sumit Agarwal

4,091
8
33
49

votes

1 answer

Importing modules with forRoot()

I am going through the example of Angular2 Material and I see that all Material modules are imported in the root module using the forRoot() method. So in my app I do the same. Now I need to use some Material components within other Shared modules,…

angular angular2-material

asked Sep 23 '16 at 15:49

Picci

16,775
13
70
113

votes

2 answers

Angular2 app module with root level imports

Shouldn't imports on the root level be available globally (With globally I mean to all sub-modules and components)? I have the following root/app module : import { BrowserModule } from '@angular/platform-browser'; import { NgModule, ApplicationRef }…

angular angular2-material

asked Aug 26 '16 at 06:37

Werner Swart

votes

5 answers

How can I set duration of a snack-bar in angular2 (material2)

This example stays forever on the screen: snack-bar-demo.ts import {Component, ViewContainerRef} from '@angular/core'; import {MdSnackBar, MdSnackBarConfig} from '@angular/material'; @Component({ moduleId: module.id, selector:…

angular material-design snackbar angular-material2 angular2-material

asked Oct 21 '16 at 20:16

j809809jkdljfja

votes

5 answers

Angular Material - Change color of mat-list-option on selected

How can I change the color of selected option of mat-list-option? Right now I have something like this: Current list I want to change the color of whole option or card 'on select' to green. Something like this: My code is like…

angular angular-material angular2-template angular-material2 angular2-material

asked Nov 22 '18 at 23:09

Tanmay Parmar

votes

2 answers

Angular Testing for Angular-Material on Mat-Menu

I'm trying to write a test for my mat-menu in my application's toolbar. When I call button.click() in my test, I get a Cannot read property 'templateRef' of undefined error in the console. As all works find in the browser, I believe this is to do…

angular angular-test angular2-material angular-material-6

asked Aug 10 '18 at 10:57

TobyGWilliams

votes

3 answers

Cannot find name 'HammerManager'

I am using @angular-2.0.0-rc.5, @angular2-material 2.0.0-alpha.7-4 & Angular-CLI 1.0.0-beta.11-webpack.2 When I try to compile it throws an error, Cannot find name 'HammerManager'. Please see attached screenshot. I found some solution for…

angular angular-cli angular2-material

asked Aug 23 '16 at 06:39

microchip78

2,040
2
28
39

votes

6 answers

Angular-cli Webpack 3rd part css files

I just moved to angular-cli 1.0.0-beta.11-webpack.2 There are so many annoying things but the biggest problem which I`m facing is with external css files (probably I will have the problem with js files too). In my project is used Angular2 material…

angular webpack angular-cli angular2-material

asked Aug 18 '16 at 11:44

Kosmonaft

1,286
2
17
30

votes

1 answer

Angular 2 Material - How do overlay and portal work?

I want to make an autocomplete component which makes requests to the server and renders the received values on the screen. I'm trying to understand how the portal and overlay work. Right now this is my component for autocomplete import { …

angular angular2-material angular-cdk

asked Jan 19 '17 at 18:37

Nicu

3,476
4
23
43

votes

3 answers

Fixed element is relative to component, not window in Angular2

I have an angular2 application using the Angular2-material library for styling. I'm trying to add a FAB (Floating Action Button) to hover in the right corner of the application, but it's fixing itself to its parent component, and not the window.…

css angular angular2-material

asked Dec 06 '16 at 00:49

jloosli

2,461
2
22
34

votes

2 answers

Angular2 get values of dynamically created inputs

I have this input which are created dynamically from list column, now I need to get all values of the inputs when some method occurs( imagine getAllValues() )