Stack Overflow
Stack Overflow

Questions tagged [angular-material-5]

Angular Material is an implementation of Material Design in Angular. Do not use this tag for AngularJS Material, the implementation of Material Design for the older AngularJS framework.

Usage

  • This tag is intended for questions which ask about Angular Material using Angular 5.x.x

    Note: Consider also tagging such questions with the tag, as well as the tag

  • 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:

The 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

Learn more

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

160 questions
9
votes
1 answer

How to create custom filtering using MatTableDataSource in angular 5?

In Angular material official website Angular Material Table it is mentioned that filterPredicate: ((data: T, filter: string) => boolean) will filter data based on a specific field. But don't know how to start. Is there any example is present for…
Tanvi Shah
  • 497
  • 2
  • 9
  • 18
9
votes
3 answers

How to reset/refresh tab body data in Angular Material if user move from one tab to another tab?

Here is my sample code Main Controller
…
Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
8
votes
1 answer

How to theme angular material component shapes?

Is there any way to theme component shapes in angular material? I know material design has a shape concept that allows you to create more rounded, less rounded or even cut corners for all small/medium/large components. Is there a way to implement…
Canolyb1
  • 672
  • 5
  • 17
8
votes
1 answer

Mat select click outside not working, when drop down close

I have drop down made with Mat select angular component, I need to trigger an event when I clicked outside of the drop down (body of the page).
kunal
  • 165
  • 2
  • 3
  • 10
8
votes
2 answers

Angular Material Snackbar global configuration

I'm following the guide on Angular Material github to set custom global configuration to use on the snackbar module. This is the guide I'm following. However, as sais in the docs, there is no export for MAT_SNACK_BAR_DEFAULT_OPTIONS only…
celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
7
votes
1 answer

How to prevent material menu from closing without user permission in angular 7

I am having a mat-menu containing multiple checkboxes, and I want the user to close it when he checks all types of filter he wants. The actual behavior is when you click on anything it will be automatically closed. I have this code:
alim1990
  • 4,656
  • 12
  • 67
  • 130
7
votes
2 answers

Why can't I style angular material stepper elements directly?

Here is a code example I've forked from the official angular documentation for stepper: https://stackblitz.com/edit/angular-tth817 In my fork, I'm trying to achieve a couple of things: I want to hide the stepper header. I've tried doing this…
dwjohnston
  • 11,163
  • 32
  • 99
  • 194
7
votes
2 answers

How to disable animations in angular material

I have used angular material version: 5.2.1 And wanted to know how to disable their animations, especially the matDialog. I have tried @.disabled but no luck.
kimondoe
  • 567
  • 2
  • 9
  • 27
6
votes
1 answer

Add a new row into mat-table using angular 4

How to add a new row into Angular Material table manually from a input field. Please see this image in that if i add a state name and state code it should present in the following table please help me how to achieve it using Angular 4.
chethu
  • 353
  • 1
  • 5
  • 16
6
votes
3 answers

Mat Sort Issue for Numbers and Text Columns

I have angular material datasource. angular material version is ^5.0.3 Sorting is working. However for some columns it is sorting incorrectly. where number and text is there. For instance, sorted result like, 'XXX', '1', '1tesxt', '1', 'OPD', OXD',…
Roja Fernando
  • 61
  • 1
  • 2
6
votes
0 answers

Angular input change detection performance with mat table data source

Does anyone know if updating a mat table data source in the ngOnChanges lifecycle hook is ok? Or is there a potential data leak or performance concern at scale? Here is a simple example of what I mean. A child component has a parent component that…
Rodhoohoo
  • 83
  • 1
  • 9
5
votes
3 answers

Angular Material cdk-container and main site fixed header z-index override

I have site with fixed header in angular material with z-index of 1100. While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular materiel class) which is default behavior. To…
Awais
  • 4,752
  • 4
  • 17
  • 40
5
votes
3 answers

Angular Material Expansion panel with sub expansion panels

Actually i have used angular material expansion panel (accordian) for panel expansions. So what i have tried is i just want to display child panels inside one parent expansion panel something like this. See picture below. Databases is going to be…
youi
  • 1,887
  • 5
  • 20
  • 31
5
votes
0 answers

Material 2 how to open a Bottom Sheet in a child view

How do you make the Bottom Sheet component appear inside a view like a card not just at the bottom of the screen? Using version 6.0.1. From the docs (https://material.angular.io/components/bottom-sheet/api) specifying viewContainerRef in options…
Jjj
  • 155
  • 1
  • 13
5
votes
2 answers

Angular Material mat-form-field Placeholder text on multiple lines

I use a regular mat-form-field with a textarea inside. My issue is that the placeholder text for this Textarea is rather long. In mobile, where space is more limited, this placeholder text is truncated by Angular Material with an ellipsis. I would…
Alex Verzea
  • 421
  • 1
  • 11
  • 30
1
2
3
…
10 11