Stack Overflow
Stack Overflow

Questions tagged [angular-material-7]

Angular Material2 is an implementation of Material Design in Angular. This tag is for version 7.x of Angular Material2 for Angular 7. Do not use this tag for other versions (e.g. v5, v6) or for AngularJS Material (the implementation of Material Design for the older AngularJS framework).

Usage

  • This tag is intended for questions which ask about Angular Material2 v7.x
  • 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:

Our 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 Material2 that you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on 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 Material2's Github repository instead.)

Learn more

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

162 questions
5
votes
1 answer

CdkDragDrop and ngTemplateOutlet

I'm trying to use Drag&Drop features relased with Angular Material 7. I separated my template in reusable pieces using ngTemplateOutlet and every option can be either a Thing™ or a nested Thing™ which have some more sub-Things™. Nested Things™ are…
Paolo 'Callo' Caleffi
  • 286
  • 2
  • 13
4
votes
0 answers

Can I add mat-icon and mat-label in single line under mat-form-field

I'm trying to add a tooltip icon beside the mat-label of a form field. Is there a way to do that Date …
Anuj kumar
  • 57
  • 5
4
votes
1 answer

Display mat-table in mat-dialog

I'm not able to display mat-table content when I use mat-table in mat-dialog. I can see in DOM the right number of "tr" but they are empty. Can you tell me what I'm doing wrong ?? .html
Alexandre
  • 604
  • 5
  • 21
4
votes
2 answers

MatTabNavBar not showing arrows

I've noticed that the MatTabNavBar is behaving different from a regular MatTabGroup when it comes to showing the arrows if the container gets too small for the tabs. I used the official documentation to build the MatTabNavBar and MatTabGroup, but…
mr.alex
  • 503
  • 1
  • 8
  • 16
4
votes
2 answers

Angular Material multi Select

I'm after a bit of advice with using Angular Material 7 multi selects. The documentation doesn't help that much with what I'm trying to do. Bit of a background on what I'm trying to do. So we are creating a record object and as part of that we…
Lewis
  • 481
  • 2
  • 8
  • 16
4
votes
1 answer

Angular Material form controls mat-select -- mat-option, setting the default option for updating items?

I have a form that has a mat select with mat options and I'm building a reusable component where I can edit any item on the spot. I'm trying to fill in the form default values but after looking for 30 minutes at the documentation and trying various…
SebastianG
  • 8,563
  • 8
  • 47
  • 111
3
votes
3 answers

How do I set Min and Max values on a Datepicker field based on two other Datepicker fields - Angular Material

I have 3 date picker fields, contractPeriodFrom, contractPeriodTo and dateOfAppointment. The dateOfAppointment should be between the contractPeriodFrom and contractPeriodTo. I am unsure how to do this as both contractPeriod fields are form…
gguptha
  • 41
  • 1
  • 6
3
votes
0 answers

Angular Material Design Input elements invisible on page load

I'm practicing the use of Anuglar Material Design components. I have gone through the regular steps to add Angular Material using 'ng add @angular/material' and selected one of the themes and okayed other defaults. Everything works well, except that…
Abrar Jaleel
  • 31
  • 2
3
votes
3 answers

how to make angular material card to take available vertical space and make it's content scrollable

I'm trying to make a material-card (mat-card) take available space on the screen and then make its content (mat-card-content) scrollable because the items inside the content take more space than the available. I'd tried with the following CSS but…
wrabarias
  • 353
  • 4
  • 15
3
votes
1 answer

Angular Material: Not able to drop on a dynamically created droplist

For some reason (read: Cannot create many components), I have to create sections on my app which will be able to act as drop elements. (cannot use *ngIf) I created DropListRef like - constructor(private dragDropService: DragDrop) {} const…
Nirmit Dalal
  • 315
  • 5
  • 12
3
votes
4 answers

Angular 8 - Is importing all material modules into the main app module better than importing individual material modules inside different modules?

What is the best way to import material modules into an Angular 8 project? Is it by importing the material.module.ts to app main module and then use it in other modules: import { NgModule } from '@angular/core'; import { MatButtonModule, …
alim1990
  • 4,656
  • 12
  • 67
  • 130
3
votes
1 answer

How to change Angular Material Datepicker theme?

I would like to change the theme of the default Angular Material Datepicker. I couldn't find any helpful informations about this isue (I only found for AngularJS or the old Angular Material). I am using the default CSS, but I modified it to my…
szilard1996
  • 47
  • 2
  • 6
3
votes
3 answers

routerLink directive does not work with mat-menu-item element

After clicking on mat-menu-item (Item1), nothing happens. I am sure that the router is configured properly, because it works if put anywhere else in the code. The weirdest thing is, that it was working, and after refreshing the browser it stopped…
kicior94
  • 43
  • 1
  • 4
3
votes
1 answer

Angular Material's mat-sidenav width is 1 pixel less than the what is set in CSS

Hey was trying to setup a Angular Material SideNav and after getting a basic layout setup I noticed a white line on the right side when the SideNav is open (not over). When looking at it in dev tools it is 1 pixel less than the width I set it to…
Rodney S. Foley
  • 10,190
  • 12
  • 48
  • 66
3
votes
2 answers

Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll

I'm using angular-material Autocomplete (version 7) for my application. I'm using inside . Besides numerious problems I've resolved, there is one I don't understand: the dropdown menu doesn't display when I add…
Hailan
  • 43
  • 1
  • 6
1
2
3
…
10 11