Stack Overflow
Stack Overflow

Questions tagged [angular-material-6]

Angular Material is an implementation of Material Design in Angular. This tag is for version 6.x of Angular Material for Angular 6. Do not use this tag for other versions 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 Material v6.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:

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

  • Mention the versions of Angular and Angular Material you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on plnkr.co or 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 Material's Github repository instead.)

Learn more

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

310 questions
6
votes
3 answers

Can't override the angular material theme with my css properties

I am using Angular 6.0.8 with Angular Material theme version 6.4.0 Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows: currentColor …
Ahmed Elkoussy
  • 8,162
  • 10
  • 60
  • 85
6
votes
2 answers

Mat expansion panel extend over other html elements

I have a mat expansion panel that I would like to extend over the element below it rather than simply moving that element down. I tried adjust the z-index of the mat-expansion element but that did not work. I haven't seen anything in the angular…
Brian Stanley
  • 2,078
  • 5
  • 24
  • 43
5
votes
2 answers

How can I filter data using cards and not data tables in angular 8?

I'm trying to filter data using cards but I haven't managed to filter it using cards and not data table example: import { Component, OnInit } from '@angular/core'; import {MatTableDataSource} from '@angular/material/table'; @Component({ …
Steven Colocho
  • 381
  • 1
  • 5
  • 15
5
votes
2 answers

mat-tab remove the tab-body DOM but not hide it

Scenario : I am using angular material tabs, each different tabs have their respective dynamic component. So when I am switching the tabs, it removes the content from DOM. And when I come back again to that tab, it loads content again. Problem…
Mayur
  • 1,123
  • 3
  • 22
  • 38
5
votes
1 answer

Angular Material Tree does not show child elements with array is populated

I am trying to dynamically load the children when the user expands a node. The issue is when I populate the children array, mat-tree is not displaying the children. If I display the same data using simple *ngFor, when the children array has elements…
ToddK
  • 765
  • 9
  • 16
5
votes
1 answer

MatTable Expand Collapse Icon issue on pagination and sort

I've a angular material table which uses detailRow directive to insert a detail/sibling adjacent row to a table row. StackBlitz I wanted to give it an appearance of as if the row is being expanded or collapsed, so I added couple of icons to it which…
kal93
  • 522
  • 1
  • 9
  • 22
5
votes
4 answers

How i can display a MatSnackBar from a Service with Angular Material?

Im using: Angular V6.1.0, Angular Material V6.4.1 Im trying catch the HTTP errors and show them using a MatSnackBar. I seek to show this in every component of my application (where there is an http request). So as not to do the repetitive…
Simón Farias
  • 732
  • 2
  • 8
  • 21
5
votes
4 answers

Angular6 Material custom form field control with validation errors (mat-error)

How to make a Material custom form field control (like this one) to support form validation and display them with mat-error? I understand that the regular matInput directive uses ErrorStateMatcher (doc) but I don't understand how I can link it with…
Rémi
  • 889
  • 1
  • 8
  • 12
5
votes
0 answers

Display a data table vertically in angular 6 (material)

I have a data set which I am displaying in an angular material table (using angular 6). Have followed this documentation link to do this. I was looking for an optimized/neat way to represent rows as columns and columns as rows Here's my html:
vikram reddy
  • 73
  • 1
  • 7
5
votes
3 answers

Angular material - autocomplete mat-error

I'm using angular 6 with angular material 6.4.2 and I'm not able to show the error properly on an autocomplete. I've created a stackblitz to show you the behavior, here's the link My goal, is to show an error on an autocomplete stylized, as…
lmarcelocc
  • 1,301
  • 11
  • 21
5
votes
3 answers

Is it possible to open angular/Material2 Snackbar on especific DOM element?

component: https://material.angular.io/components/snack-bar/examples I have a page that is a parent section ('#wrapper_container'). And I want to popup the snack bar in the centre of a child element of '#wrapper_element'. Thanks
Daniel Delgado
  • 4,813
  • 5
  • 40
  • 48
5
votes
2 answers

Angular Material mat-select dynamic data binding in Angular

I am using Angular 6 and Angular Material. When i click on Edit button the Secondary, SSC and Male Value will be initialized on the select. But i can not able to do it. I only able to show Male value on the drop down after clicking Edit button. So i…
monir tuhin
  • 441
  • 3
  • 13
  • 27
4
votes
1 answer

Mat-select not showing the selected value

When my edit form is loaded I want to fill the form Array with initial values. My drop down selection option got disabled but it doesn't show in the mat-select. let selectedSpecs = this.editData.element.specifications; this.spec =…
Samasha
  • 369
  • 1
  • 5
  • 16
4
votes
1 answer

Angular material Modal dialog not able to pass event to parent?

I have a component which has one child component. Child component has a button which will open a material dialog Box. In dialog we have form, username and passwrod and submit button. When I submit i am calling backend REST api. this is getting…
DirtyMind
  • 2,353
  • 2
  • 22
  • 43
4
votes
1 answer

Remove mat-btn overlay on click?

I have a mat-menu dropdown, having a mat-button in it. I want to remove the overlay that appears once user clicks the dropdown. I am able to remove the hover overlay by writing the following css. .no-hover-effect ::ng-deep .mat-button-focus-overlay…
Divyanshu Rawat
  • 4,421
  • 2
  • 37
  • 53
1 2
3
…
20 21