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
0
votes
1 answer

How can I change content page based on mat option -Angular-

I'm working on an Angular 7 project and now I have to develop a page structured with an upper and static part where user can choose between different options, using mat-select material component. Based on the option selected I want to show a…
R. Milos
  • 43
  • 1
  • 7
0
votes
1 answer

Angular 9 - Using :host inside CSS vs !important to override CSS properties in the child class

I'm a little confused about how hosting works vs !important. I have Angular Material Expansion Panel. Title 1 …
HJ1990
  • 385
  • 1
  • 4
  • 19
0
votes
1 answer

mat-icon css color style is not applying

As a fresher in Angular.I have a doubt.In Angular 4, we have an md-icon tag from MdIconModule which was after changed to MatIconModule in later angular version. consider a code in Angular…
0
votes
1 answer

How to center align a button in mat-grid-tile-footer

I have mat-grid-list where I am listing items in the view. issue 1: Each item has a mat-grid-tile-footer section where I display a angular material button. The button is currently aligned left side in the footer section and I want to align the…
0
votes
1 answer

how to make mat-select in project dynamic to handle both single and multiple selection value for reuse

i want to make mat-selection component reuusble in whole project. so i am already using mat-select with single option selection and its working fine here is its code this is the config i send to component { type: "select", label: "Select…
Hassan Amjad
  • 399
  • 1
  • 6
  • 20
0
votes
2 answers

Angular material toggle undefined does not hit

I have a sidenav toolbar on my application that is always showed unless the screen is for mobile and when the screen is handset a icon button is showed to open the sidenav, but it is not working, probably there is a module I need to inject. But I…
0
votes
1 answer

Angular Material - exclude components styles

I work on an angular v8 app and I've encountered an issue with making a production build. I noticed that style.scc generated is of 1.5 MB! I use Material and I don't use all the components of it. So the question - is there any a way to include the…
Angry Beaver
  • 415
  • 1
  • 6
  • 18
0
votes
1 answer

Angular material drag and drop - merge elements

I'm building and app where there are multiple items rendered in set of columns. (For sake of demonstration let's say 4 columns) I'm trying to achieve functionality of dragging and dropping items onto each other which will result in merge of those…
Khobar
  • 486
  • 7
  • 20
0
votes
2 answers

How to check the checkbox by default in the mat-table for particular rows in angular8 on modal click?

I am using mat-table with selection. Here I'm facing an issue let me explain clearly, Initially, on Add Line Item(s) click, I am opening a dialog box and forming the mat-table selection and selecting the items that are needed and after closing the…
Soujanya
  • 1
  • 1
  • 3
0
votes
2 answers

Unexpected directive 'MatCard' imported Error With Angular Material 8 --

I am getting the above console error. Trying to work with Angular material latest version, 8.2.3. I have the following imports line wrt angular material in my app.module.ts -- import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule,…
0
votes
1 answer

adding a class using ng-class to a mat-menu

I'm trying to add a custom class to a mat-menu in my app, the value is visible to the component which includes this piece of HTMl and it evaluates to true on a DOM element sibling, but it doesn't really seem to apply to it when I inspect the…
user1712638
  • 201
  • 2
  • 8
  • 22
0
votes
1 answer

why does mat-sort not working on my mat-table

I'm using multiple mat-tables on one page. I need a mat-sort for one table. when I debug the code response get with results but matSort not working
aruna
  • 21
  • 4
0
votes
1 answer

Drag and drop with pinch zoom doesn't work as expected

In the zoomed mode for pinch-zoom the drag doesn't align properly with the mouse pointer. I've detailed the problem here:https://stackblitz.com/edit/angular-t7hwqg I expect the drag to work same way irrespective of the zoom. I saw in version 8 of…
0
votes
1 answer

matChip with cancel icon can't be removed and displays differently

Actual: the chip can't be removed Expected: chip can be removed once you click x I have done the following actions: Imported MatIconModule and MatChipsModule in the main app.module. The module with my codes is a Child module/lazy loading. I need to…
0
votes
1 answer

Getting validation error after successful form submit

I am using angular 8 with angular material 7. I am using reactive form for creating and submiting forms. After form submit, I am programatically reseting the form and aslo marking as untouchewd. But after every submit, I am seeing all validation…