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
1
vote
1 answer

How to Add validatiors to formcontrol with reactive forms for matchip input from angular material

I'm migrating to Angular 7 from angular 5 and i found that using ngmodel and formcontrolName in the same element is deprecated in Angular6 and removed in 7. Now I cannot set validators to my mat-chip input from angular material html:
Habeeb Rahman
  • 11
  • 1
  • 3
1
vote
3 answers

Angular material multiple mat-radio-group with same name/field

I am using angular material 7. I am using radio-button-group. I have a table design which i have to use. So that is fixed. When i try to use radio-buttons in td, i am not sure hot to give same group. below is my html. …
Ankur Akvaliya
  • 2,989
  • 4
  • 28
  • 53
1
vote
2 answers

Remove unnecessary scroll bar from div overflow containing angular material checkboxes

If I build an html fragment with a div containing 4* and set overflow-y: auto and max-height: 250px; I get the expected behavior of no scroll bar. However if I replace the standard checkboxes with those from Angular Material…
ciantrius
  • 683
  • 1
  • 6
  • 21
1
vote
2 answers

Angular Material 7.3 mat-card changes

I upgraded from angular 6 to angular 7 and my material from:6.2.0 to: 7.3.3 I'm noticing that my mat-card items are showing the border disappeared in the new version but was raised in the older one; the border in the image is gone looking at CSS,…
user1019042
  • 2,428
  • 9
  • 43
  • 85
1
vote
3 answers

How to make a sticky Angular Material mat-toolbar?

I've been trying to implement a mat-toolbar that is located after the initial navigation bar and I can't seem to get it right. I've tried adding the class "position-fixed." This would work if the initial position was at the top of the page but it…
Marcus Gallegos
  • 1,532
  • 1
  • 16
  • 31
1
vote
1 answer

ERROR TypeError: "_co.bankId is undefined" (Angular 7)

I have a subproject in my angular app. In this subproject I want to create a form with input fields. These fields need a validation and need to show an error optionally, if the field is invalid (e.g. required). Well, the problem is, the…
yuro
  • 2,189
  • 6
  • 40
  • 76
1
vote
2 answers

Does Angular 5 support Angular material latest version(7)

I need to use the latest version of Angular material i.e version 7.x. But my current Angular version is 5.x. is it possible to update Angular material alone?
Joshua
  • 21
  • 1
  • 6
1
vote
0 answers

Angular 7 Material Drag&Drop with ngFor for multiple drop targets on same page

I'm having problems with getting multiple drop targets to work for Angular drag & drop. With just one source list and one target drop list it's working perfectly, here's the code: SOURCE box:
Matt
  • 3,206
  • 4
  • 24
  • 26
1
vote
1 answer

how to create a pdf from a table created with angular material 7 virtual scrolling

I want to create a pdf of a very big html table. I make use of angular material 7 virtual scroling to create that table. Here is the html template code :
Cheick BOLY
  • 11
  • 3
1
vote
0 answers

How to add ng-content to multi select component

models: export interface ISelectOption { value: string viewValue: string disabled?: boolean icon?: string rx?: string[] } export interface ISelectOptionGroup { disabled?: boolean icon?: string name: string options:…
st_clair_clarke
  • 5,453
  • 13
  • 49
  • 75
0
votes
0 answers

Angular: How to close mat-menu if keyboard focus goes out of the menu items

I have a code as shown as below, stackblitz I want to close the mat-menu when the focus goes out of the menu items. When keyboard focus moves to the next element outside the menu, the menu should be closed. How can I achieve that?
Explorer
  • 161
  • 1
  • 4
  • 16
0
votes
1 answer

Angular: How to close mat-menu and set focus on the next/ previous element

I have code like below

Main Menu

…
Explorer
  • 161
  • 1
  • 4
  • 16
0
votes
1 answer

How to uncheck mat checkbox in angular 14

Trying to recheck the mat checkbox but not working. in my application after clicking the "Select Checkbox Car and Bus" button click on the input box and check the Bus and Car then click the cancel button of Bus and Car. again click the input field,…
EMahan K
  • 417
  • 1
  • 19
0
votes
1 answer

Angular - is there a way to get the cell id on click

I would like to click on any cell of my mat-table and get the row and column of my cell. I know that with this code I get the clicked row, but I can't figure out how to get the correspondent column.id
leocibu
  • 23
  • 3
0
votes
1 answer

Angular material mat-slide-toggle change toggle icon css

I am trying to change the material sliding toggle icon like the following icon below: and when it's not active: Is it possible?
Shubham Shaw
  • 67
  • 1
  • 8
1 2 3
…
10 11