Stack Overflow
Stack Overflow

Questions tagged [angular-material2]

Angular Material is an implementation of Material Design in Angular 2+. DO NOT use this tag for AngularJS Material questions.

Tag usage

This tag should be used for questions regarding the Angular Material framework, and is typically used in conjunction with the tag.

For the older (and now deprecated as of January 2022) AngularJS Material framework, do not use this tag - use the and tags instead.

Project info

Angular Material, now part of a suite of Angular components made by the Angular team, is an official implementation of Google's Material Design guidelines for Angular.

Angular Material is officially out. The Angular Material team will release patches as Angular progresses and will follow the versioning of Angular.

Links

Notes

Current release: 14.2.2

2957 questions
37
votes
8 answers

How to make a responsive nav-bar using Angular material 2?

I'm trying to create a navigation bar using Angular material 2 that collapses in small screens like mobile devices and tablets. I was only able to find md-button but not md-menu-bar as was in Angular material.
Kero
  • 1,924
  • 5
  • 33
  • 53
36
votes
10 answers

Angular - Material Table, is it possible to update rows without entire table refresh?

After few weeks of Googling and only one Stackoverflown question so far I finally managed to build up my Angular CRUD App using Material Table Component. It shows data from backend (JSON) and for CRUD operations I'm using dialogs like one shown on…
besthiroeu
  • 693
  • 2
  • 8
  • 16
36
votes
12 answers

Checkbox angular material checked by default

I am trying to use an Angular Material checkbox, and set it by default as checked, but it is displayed as non-checked, what is wrong? …
ararb78
  • 1,137
  • 5
  • 19
  • 44
36
votes
3 answers

Angular 4: When and why is @Inject is used in constructor?

Problem Statment I am learning Angular 4 and I have stumble upon a code where @Inject is being used in a constructor and I am not able to figure out why... Code and Source I am using Angular 4 Material Code Source:…
Vikas Bansal
  • 10,662
  • 14
  • 58
  • 100
35
votes
2 answers

Dynamically load a component inside a Material MatDialog

Can anyone provide an example of how to dynamically load a component into a Material MatDialog? What I would like to do is this: I will provide the MatDialog configuration data with a component Type which the dialog would then create an instance…
Jake Shakesworth
  • 3,335
  • 4
  • 29
  • 43
35
votes
5 answers

Create (click) event on MatTab Material

I dynamically loop thru tabs and i would like to add a (click) event on to be able to load different options when i select tab. Isn't it possible to have an event (click) event on ? I tried with (selectChange) on but then i cannot get hold of…
MrWeiland
  • 459
  • 1
  • 5
  • 14
34
votes
3 answers

Open matAutocomplete with open openPanel() method

I'm working with Angular Material's matAutocomplete component, and according to the docs, there is a method which can open/close an autocomplete panel with a openPanel()/closePanel() method. Any suggestion to how can I integrate it into already…
altgov3en
  • 1,100
  • 2
  • 18
  • 33
34
votes
3 answers

use mat-datepicker directly without input

I want to put the datepicker in a permanent sidebar always visible and not dependent on an input, is this possible? I imagined that just putting the component and adding opened = true could leave the datepicker inside a box always visible.
Luis Ruiz Figueroa
  • 2,537
  • 3
  • 18
  • 23
34
votes
7 answers

Usage of [mat-dialog-close]

I am a bit confused about the usage of [mat-dialog-close]. So, I have a dialog with a form. If the user clicks the submit button, the form is validated. If the input is valid, the dialog is closed and the form is submitted. However, if the input is…
Laura L.
  • 401
  • 1
  • 4
  • 7
34
votes
5 answers

Angular-Material2: Align text and md-icon vertically to match vertical style?

I know I am probably missing something here. I am trying to align md-icon and some text vertically, right now the word "sample text" displays below the icon.
home Sample Text
Output: I did try playing around with…
Martin
  • 23,844
  • 55
  • 201
  • 327
34
votes
5 answers

"Error: No provider for Overlay!"

In my Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 application built with Angular CLI 1.0.0-beta.11-webpack.9-1, I get the following error after upgrading from rc.5+alpha.7-4 (via the 1.0.0-beta.11-webpack.8 NG CLI): main.bundle.js:44545…
Jan Nielsen
  • 10,892
  • 14
  • 65
  • 119
33
votes
13 answers

Remove padding from mat-list-item

The mat-list component in angular/material2 applies a top and bottom padding of 16px. I'd like to make this 0px. I've tried applying a style with a higher specificity but it isn't working (or I'm doing it wrong).The style I'm trying to override…
Craig
  • 932
  • 1
  • 11
  • 21
33
votes
2 answers

Material radio button change event Angular 4

I am trying to use the change output of an md-radio-buttons as follows: {{a}} …
Batters
  • 729
  • 1
  • 7
  • 19
33
votes
9 answers

Customize Angular Material 2 Tooltip styles

In AngularJS is possible to style tooltips in CSS using the selector .md-tooltip What is the way to have custom format tooltips in Angular 4? EDIT: I am using Angular 4 & Material2. An example of how I am using it is:
Nizam
  • 4,569
  • 3
  • 43
  • 60
33
votes
3 answers

How to correctly register font-awesome for md-icon?

The documentation of md-icon describes how to use font-awesome in several parts and suggests we could use font-awesome eventually like But the documentation is very confusing and I can hardly find a…
Haoliang Yu
  • 2,987
  • 7
  • 22
  • 28
1 2 3
…
99 100