Stack Overflow
Stack Overflow

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
36
votes
3 answers

ViewDestroyedError: Attempt to use a destroyed view: detectChanges

I have the following component that creates an MdDialog export class SideNavsComponent implements OnInit, AfterViewInit, OnDestroy { eventDispatcher: EventDispatcher authEmailDialogRef: MdDialogRef constructor(public…
st_clair_clarke
  • 5,453
  • 13
  • 49
  • 75
36
votes
3 answers

Angular-material ng-click strange border highlight

I have a problem with using AngularJS and Angular-Material. Take a look at the following code:
36
votes
1 answer

Angular Material Design - Change flex value with screen size

I'm new to AngularJS so please bear with me. I'm using Angular Material Design and I have difficulties in identifying a way to efficiently do responsive grids. Please see my comments in the code below:
user1220169
  • 805
  • 2
  • 9
  • 14
35
votes
8 answers

Angular Compilation Warnings with Angular Material Declarations

I've experiencing a bunch of warnings when trying to compile after installing Angular Material (whether directly from npm or via ng add @angular/material and whether I choose to use the animations or not). It use to work without any warning or…
Martin Carre
  • 1,157
  • 4
  • 20
  • 42
35
votes
3 answers

Angular Material Dialog: How to update the injected data when they change in the parent component?

Injecting data to a material dialog is working well, but how can be a way to automatically update these data if they change in the parent / opener component (coming from a (WAMP) subscription for example)? [Update] I crated a minimal version to try…
Billy G
  • 658
  • 1
  • 8
  • 20
35
votes
2 answers

Angular Material: How to close all mat-dialogs and sweet-alerts on logout

I wanted to close all my dialog's (mat-dialog, bootstrap modals & sweet alerts) on logout in Angular. This is how it was done in AngularJS (version 1.5): function logout() { //hide $mdDialog modal …
hakuna
  • 6,243
  • 10
  • 52
  • 77
34
votes
1 answer

Simple Angular 9 project compiles whole Angular Material (es2015 as esm2015)

I've created a simple Angular 9 project with only few simple components. I've added angular material using: ng add @angular/material And after I've done it I run npm start and noticed it started to compile the whole @angular with a bunch of…
Maciej Tułaza
  • 520
  • 1
  • 5
  • 10
34
votes
10 answers

Angular Material button remove autofocus

I have the following button All…
tom33pr
  • 853
  • 2
  • 12
  • 30
34
votes
11 answers

How to manually set focus on mat-form-field in Angular 6

I am new to angular ,In my application I have a mat-dialog in which I have two forms namely Login and SignUp. Once I open the dialog first time the auto focus is set on username field.problem is when I navigate to SignUp form on button click that…
Zhu
  • 3,679
  • 14
  • 45
  • 76
34
votes
6 answers

angular mat-button link to external url

Angular 6 (https://angular.io/) new Project, utilizing the Material Components (https://material.angular.io/) ~ How can I navigate to an external URL from a mat-button component. HTML
34
votes
2 answers

The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable'

I am getting this error in angular's autocomplete example. Here is the code: ngOnInit() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith(''), map(val => this.filter(val)) …
Cap Barracudas
  • 2,347
  • 4
  • 23
  • 54
34
votes
8 answers

Angular Material 2 : How to overwrite Dialog max-width to 100vw?

I am trying to create 100% width Dialog. But As the original settings, it is restricted to 80vw. .mat-dialog-container{ max-width:80vw; } I have tried following ways to overwrite this value. But they weren't successful. .mat-dialog-container { …
Gayan
  • 2,845
  • 7
  • 33
  • 60
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
4 answers

Module not found: Error: Can't resolve '@angular/animations'

After using "npm install" and starting local server by "npm start" I started getting this error:- ERROR in ./~/@angular/material/@angular/material.es5.js Module not found: Error: Can't resolve '@angular/animations' in…
Ashvini Maurya
  • 493
  • 1
  • 7
  • 13
34
votes
1 answer

Working example of Angular 2.0 Material MdDialog with Angular 2.0

I'm working on a POC app, and I'm trying to get the MdDialog component working. Does anyone have a working example of what to pass to the MdDialog open method? Angular 2.0: https://github.com/angular/angular Angular 2 Material:…
Earl Ferguson
  • 938
  • 2
  • 10
  • 12
1 2 3
…
99 100