Questions tagged [angular-material]

Angular Material is an implementation of Material Design in Angular. Do not use this tag for AngularJS Material, the implementation of Material Design for the older AngularJS framework.

Usage

  • This tag is intended for questions which ask about Angular Material
  • Please take note that you should use the tag for AngularJS 1.x Material questions instead of this tag.

Goal

Taken from the official repo:

The goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

Asking a question

  • Mention the versions of Angular and Angular Material you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on plnkr.co or stackblitz.com
  • If there's a bug (or some unintentional behavior), try to troubleshoot the problem. (If it's a bug report, please create a new issue at Angular Material's Github repository instead).

Learn more

To learn more about Angular Material, visit the following resources to help you get started:

19273 questions
6
votes
1 answer

Angular Dialog with Angular Form

I have an Angular app and am using Angular-Material among other components. Is it possible to open an Angular Tab Dialog with a TemplateUrl being lazy loaded which contains an Angular form? How would you reference this form if at all possible? Here…
johan
  • 998
  • 6
  • 20
6
votes
2 answers

How to create a simple search input text in AngularJS material design?

I am looking for some easy way to have something similar to what is available in angular-mdl for expandable search text field as below.. This will add a search button on click it will expand to text field.
Diptesh Patil
  • 133
  • 1
  • 1
  • 8
6
votes
1 answer
6
votes
2 answers

Angular materials ng-messages don't disappear after resolving

I'm trying to use the Angular Materials snippet for a form input field with ng-messages for displaying error messages. When I clear and fill this field multiple times, it somehow stores the 'old' error messages, showing x times 'Address is…
Norbert Huurnink
  • 1,326
  • 10
  • 18
6
votes
1 answer

Protractor Test Cases by sending key to md-auto-complete in Angular material

I want to send a key to the md-autocomplete but I am not able to send key into text field , Find code below HTML:
user2936008
  • 1,317
  • 5
  • 19
  • 42
6
votes
1 answer

md-ink-ripple effect for specific row in a table

I have a table and i want to have ink and ripple effect for specific row in the table. when i add the attribute md-ink-ripple to tr element of table, it shows the ripple for entire table. please let me know how to fix this issue.
shyam_
  • 2,370
  • 1
  • 27
  • 50
6
votes
3 answers

Material angular infinite scroll with $http request

I'm using md-virtual-repeat directive of Angular Material to have an infinite scroll, and I need to replace it's demo $timeout function with a $http request. But I can't get to the right solution. In the code below, infinite scroll works fine but…
Asieh Mokarian
  • 1,129
  • 2
  • 13
  • 27
6
votes
1 answer

Angular Material "[$injector:unpr] Unknown provider" errors when trying to include ngMaterial $mdToast, $animate

I am trying to use ngMaterial in this app: Bower.json file: { "name": "x", "version": "0.0.0", "description": "x", "dependencies": { "bootstrap": "~3", "angular": "~1.4.7", "angular-resource": "~1.4.7", "angular-animate":…
nayelo
  • 63
  • 1
  • 7
6
votes
2 answers

changing color of ?

This is how my code looks like on CodePen: I want the background of "Sidenav Left" to be that of "Menu Items", which is represented by class as .nav-theme { background-color: #34495E } I tried overriding it as .nav-theme, .md-theme-indigo { …
daydreamer
  • 87,243
  • 191
  • 450
  • 722
6
votes
1 answer

Fixed table header in Angular Material Design

How to make table sticky header using md-toolbar I have included thead inside md-toolbar for fixed table header, when i scroll the table content the header is not fixed to top. Below is my code and link to codepen…
apps4any
  • 603
  • 1
  • 6
  • 6
6
votes
1 answer

How to use ng-blur on md-autocomplete?

I want to use blur event on md-autocomplete but both ng-blur and md-blur not working. $scope.unFocus = function () { alert('Hello!'); }
thanhbebi
  • 163
  • 1
  • 12
6
votes
3 answers

md-menus not closing when using ng-repeat

{{section.name}} Subsection 1
Rey Libutan
  • 5,226
  • 9
  • 42
  • 73
6
votes
1 answer

Angular Breadcrumbs: Including dropdown that dynamically changes breadcrumbs

I am using the Angular Breadcrumb directive (found here: https://github.com/ncuillery/angular-breadcrumb) which uses UI-Router to formulate breadcrumbs. This works great out of the box and is fine for simple breadcrumb navigation. However, what I'd…
6
votes
0 answers

IIFE & Best Practices = Performance Boost?

Friday I spent some time refactoring an AngularJS application that I've been working on for the last few weeks. My refactoring centered on 4 pretty specific areas: wrapping all of my AngularJS code in IIFEs, rearranging my controller code so that I…
Mike Feltman
  • 5,160
  • 1
  • 17
  • 38
6
votes
2 answers

increase md-autocomplete box width

I want to increase the width of the md-autocomplete box, since some of the items that appear are not fully displayed (they end in "..."). Is there any way to change the width of md-autocomplete's dropdown box?
McDonnas
  • 73
  • 1
  • 4
1 2 3
99
100