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

mat table with dynamically adding rows and editable fields in a row with validatons

I have just started working on the Angular reactive forms and i was trying to build a table which is inside a form. The table has add new feature by clicking it new empty row will be inserted in the table. the existing rows will be in edit mode by…
AkRoy
  • 343
  • 4
  • 10
1
vote
2 answers

Ionic 4 + horizontal scroll + ion-split-pane causes error on Angular Material's drag and drop

In my Ionic 4 app there's an ion-split-pane. Inside the ion-split-pane there's a ion-router-outlet where goes my ionic page. Inside the page we are trying to implement a kanban with columns. We are trying to implement the capacity to move itens…
Natanael
  • 1,326
  • 5
  • 17
  • 34
1
vote
0 answers

how to implement Lazy loading to the angular material mat-expansion-panel ? while loading number of expantion panal in mat-accordion

I need to implement the Lazy rendering to the mat-expansion-panel, not to the matExpansionPanelContent I have thousands of record and I am displaying it in the mat-expansion-panel, I need to load the mat-expansion-panel by using Lazy rendering…
viswanathan R
  • 25
  • 8
1
vote
1 answer

Custom theme typography in mat-toolbar

I'm theming my app defining colors and typography. But it's not working for the heading in my app header component based on mat-toolbar. My theme is overridden by default theme css rules for .mat-toolbar h1. index.html ...
olefrank
  • 6,452
  • 14
  • 65
  • 90
1
vote
1 answer

Scrollable html table with fixed first row and first column, along with angular material controls within the cells of table

I want to achieve the below result without using jquery: The table for which data should be scrollable for both axis. The first column (table header) and first row of the table should be a fixed and with auto adjustable width for the column as per…
SheetalJagtap
  • 102
  • 8
1
vote
0 answers

Angular material mat-menu not displayed with start action in other component

In my App componnent I displayed a menu in the top screen using
e2rabi
  • 4,728
  • 9
  • 42
  • 69
1
vote
2 answers

"angular-flex-layout" not adding margin for "mat-form-fields" on mobile screens

I've created a responsive form using angular material and flex-layout. It is working fine on desktop and ipad screens. For mobile devices, I'd like to align the form fields to the center and add a margin to the left and right of the screen. Is there…
LearningDeveloper
  • 638
  • 2
  • 11
  • 23
1
vote
1 answer

Angular Materials Mat Tab Group / Mat Tab width behavior

I implemented Angular Material mat tabs and mat tab group according to the Angular documentation, but I'm running into an issue when I hit tab two then back to tab one. The sizing, for a few moments gets large for the first tab and then goes back…
Roka
  • 444
  • 5
  • 23
1
vote
0 answers

Using mat-dialog but not display correctly

This is my page. And when I click the heart button I will get this mat-dialog but it have some issue about display. This is my icon code. …
War11t
  • 98
  • 13
1
vote
0 answers

How to create a grid layout system like bootstrap in Angular Material?

We have used Angular Material version 7 to developed the application. Here we try to implement the grid layout system like in bootstrap but there is no option to implement grid layout system. I tried with some custom CSS but it is suitable for all…
Subash Ravi
  • 43
  • 1
1
vote
2 answers

how to use angular material form field and flex-layout

I want to have 2 form input fields in one row: 1. the first has a fixed with, 1. the second should grow and shrink, but this does not shrink below 180px. Here is a full stack-blitz example When you start the app, we see this There maybe another…
TmTron
  • 17,012
  • 10
  • 94
  • 142
1
vote
2 answers

How can I solve this Error and why it occured?

Implementing AngularMaterial Table with sorting headers I'm getting this Error in console: ERROR TypeError: Cannot set property 'sort' of undefined at and this Error in Terminal: error TS2740: Type 'MatTableDataSource' is missing the following…
user5389101
1
vote
1 answer

Cant export a mat module from material.module 'it was neither declared nor imported'

I am trying to export a module from my material.module.ts while creating a mat table. But it doesn't display anything when I run the localhost as it gives the following error. How can I fix this out? Uncaught Error: Can't export directive…
CodeBunny
  • 21
  • 2
  • 6
1
vote
1 answer

Angular material - flex layout and cards

I have problem with behavior of flex layout in application based on Angular Material. I want to have simple "card grid" layout with 3 cards in row (the biggest screens), 2 cards on medium size and 1 card at the smallers screens. The problem is when…
Greggy
  • 617
  • 3
  • 9
  • 20
1
vote
1 answer

How to get the current angular theme's color of a specific component (e.g. button hover background)?

I want to have a hover color on a list I display with Angular 7 and material design. Since the $primary, $accent and $warn colors don't serve this purpose very well, I want to get the same color for hovering that a button has when hovering. I am…
Tare
  • 482
  • 1
  • 9
  • 25
1 2 3
…
10 11