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

on page load put default value in mat select dropdown

I have created a form, I am using angular material and I can successfully get and set the value in text feild or in textarea field but not able to put a value in a dropdown, I have two json data. First will fill the dropdown and after that second…
clyde correa
  • 86
  • 1
  • 12
0
votes
1 answer

Mat-autocomplete keep recent options when item is selected

I am using mat-autocomplte with displayFn & async pipe. this.genericAutoComplete$ = this.acFormControl.valueChanges.pipe( startWith(''), debounceTime(400), distinctUntilChanged(), …
Ankur Akvaliya
  • 2,989
  • 4
  • 28
  • 53
0
votes
1 answer

How can I close Material SideNav by clicking on an element which has the RouterLink only works on mobile devices

I am using angular 8 in combination with angular material. I am using an angular material Sidenav a router and a custom menu:`
    …
Jomal Johny
  • 502
  • 4
  • 9
0
votes
1 answer

Is it possible to apply a conditional pipe which itself contains a condition?

I have a dropdown (input + autocomplete) where I can type a string or select an object from the dropdown list. I want to use the pipe only when the value in the input is of type string. If user selects a value from dropdown, I need to remove the…
Haze
  • 110
  • 14
0
votes
1 answer

How to programatically scroll the MatDialogContent?

I have a MatDialog (with MatDialogContent), which is bigger than the screen, so the vertical bar appears. After the unsuccessfull submit and all form's fields revalidation, I want to conditionally scroll to bottom of that dialog, to show MatError to…
thinktanker
  • 129
  • 2
  • 12
0
votes
1 answer

Angular matdatepicker wrong date printed

I'm using a matDatePicker this way:
Usr
  • 2,628
  • 10
  • 51
  • 91
0
votes
1 answer

Angular (7): Materials, Datepicker, Validation not validating correctly (always invalid)

Using the Angular Materials datepicker. When I choose a date from the datepicker, the field shows up red as invalid. Heres's the template:
MaxRocket
  • 920
  • 1
  • 12
  • 26
0
votes
2 answers

How to display mat-select options on top of dialog window?

The solution I found to set in global css file: .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 10000; } breaks other dialog windows (e.g. the MatDatepicker used inside form in MatDialog displays behind it). Setting it locally…
thinktanker
  • 129
  • 2
  • 12
0
votes
1 answer

snackbar css is displayed incorrectly

I am trying to show a snackbar when I get an error by http call => constructor( private actions$: Actions, private getuserService: UserService, private snackBar: MatSnackBar ) { } @Effect() getUser$ = this.actions$.pipe( …
Bobby
  • 4,372
  • 8
  • 47
  • 103
0
votes
1 answer

material table with stacked header

Hi I am looking to achieve following structure on material table. So far I have seen some examples but I'm not able to achieve this What I want to achieve: | | | |--------|-------| | header | value | | header | value | | header | value…
user2325727
  • 17
  • 1
  • 6
0
votes
1 answer

How to fix Cannot read property 'time' of undefined in Angular Material?

I wanted to display available data from an api to Angular Material Datatable. The response does not always return the same content like this (see below). I'm trying to incorporate the *ngIf. { id: "123", date: "2019-04-15" am_in: { id: "0001",…
RJB
  • 95
  • 3
  • 15
0
votes
1 answer

Unable to use MatTable and DataSource in html file : Angularjs7 Angular material 7

I am using the example from Angular Material Table Working Demo : (https://stackblitz.com/angular/bbdqarbrnqk?file=app%2Ftable-overview-example.ts) Using the same material-modules.ts as mentioned in the example. import {A11yModule} from…
Simerjit Parmar
  • 808
  • 1
  • 7
  • 22
0
votes
0 answers

Two list with draggable elements angular material

What I want is to have a schedule with draggable elements in between the time available, what I don't know is how to output two lists, the one with the draggable elements and the one with schedule and the times available, which can be dragged on
varo2397
  • 45
  • 5
0
votes
1 answer

Is it possible to stop item sorting and get the XY co-ordinate of a child within cdkDropList?

While adding an Item within cdkDropList it comes to available left most position because of the data sorting property, but I would like to stop the auto arrange feature in my cdkDropList. Is it feasible? If yes then how? Also is it possible to get…
Saumya
  • 35
  • 3
0
votes
1 answer

How to select one cell in mat-table (Angular 7)

I'm using angular materials mat-table for displaying data. Well, when you click on one cell, an input field is displaying and the span-tag hides. But in my case, every cell in this row is displaying an input field as you can see on the…
yuro
  • 2,189
  • 6
  • 40
  • 76
1 2 3
…
10
11