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
0
votes
1 answer

Angular Populate mat-optgroup/mat-options from 2 Different Webservices

I am new to Angular and trying to add a mat-select with option groups to my Angualr 6 application. I have an existing web API that has 2 URLS. One URL returns the Groups, the other returns the Items in each Group given a groupId. This page goes into…
0
votes
1 answer

angular: material update to latest version. Not downloading the specified version

I suppose to install specific version of @angular/material and @angular/cdk in the application. The same is provided in the package.json. But when do npm i it is downloading the latest package of material and cdk. Steps to reproduce: Clone the…
0
votes
1 answer

angular material Data table with sorting, pagination, and filtering page issue

I am trying to follow Angular Material Data table with sorting, pagination, and filtering from this link. Everything seems to work OK but I am being block by the following. Do you guys know how to fix this? It does not happen on Firefox but it…
yas
  • 486
  • 1
  • 8
  • 23
0
votes
1 answer

Angular 6 Material. How to make rubber for mat-sidenav-container?

I have the responsive mat-sidenav which generated with Angular Material 6. Open/close button for navigation panel work excellent, but then navigation panel is open pannel obscure part of the content. How to make the content part like a…
Pavel
  • 2,005
  • 5
  • 36
  • 68
0
votes
1 answer

angular: matTable giving error "cannot read property 'find' of undefined" when compiling without --aot

The angular material table(matTable) is throwing the following error, when compile without --aot. The application will working fine, if the target es version as es5. But the application is heavily depend on es6 feature. So, should be compiled with…
0
votes
2 answers

How can I change position of mat-menu in Angular 6 with Material Design?

I'm trying to use @Angular/Material, specifically for the header in my Angular 6 app. I am basing it off of this example: Mat-Menu Example My header component HTML looks like this:
0
votes
1 answer

Alternate two table rows together then the the next two table rows

The Idea is that i want to have a Table with 2 rows with color green, then 2 with color yellow, then again with the color green etc, etc. I tried to use :nth-child but it doesn't realy work. I use angular 6 for a automated table and angular material…
Sain Linkerty
  • 63
  • 2
  • 13
0
votes
0 answers

Angular Material Components mat-select and mat-label cropped text

I'am facing the problem that my used font-family is causing text cropping on some material components like mat-select, mat-label, mat-input. Is it just an line-height css problem? For input I solved it by increasing the line-height. But for…
ArgV
  • 175
  • 3
  • 13
0
votes
1 answer

How to apply custom styles for Tabs in Angular Material 6?

I am using two tab groups namely tab1 and tab2. This is my code: Content 1 Content 2 Content 3…
Darshan theerth
  • 516
  • 1
  • 13
  • 34
0
votes
0 answers

What is the preferred way to use Type when defining getters and setters for boolean property inputs when using angular-cdk's coerceBooleanProperty()?

Angular Material2 & CDK make extensive use of coerceBooleanProperty in setters for boolean property inputs, but does not use Type consistently. Within their own code, in some cases we see both the getter return value and the setter argument as well…
0
votes
1 answer

How to change the angular material form input style into normal input?

I want to change the existing input lines into normal input boxes. How do i accomplish that? I'm using Angular Material 6.4.1
Daniel Chikaka
  • 1,432
  • 4
  • 17
  • 28
0
votes
1 answer

mat-checkbox inside *ngFor is not working properly in material 6

I am generating checkboxes inside an *ngFor using Angular 6 Material 6. The checkboxes are displayed properly. But when I click on any one of the checkboxes, they are flickering and not able to be checked properly. I tried it in stackblitz, where…
Darshan theerth
  • 516
  • 1
  • 13
  • 34
0
votes
2 answers

angular material conditional subtitle

I have the following:
{{name}}
user1383163
  • 577
  • 1
  • 7
  • 24
0
votes
2 answers

Angular Material Mat-Chip validation in template driven form

I am using Angular 6 with Angular Material 6. I want to required the mat-chip field. When i input mat-chip field then the save button will be enable otherwise will be disabled. The input field is required but can not able to require the mat-chip…
0
votes
1 answer

ngTemplateOutlet doesn't seem to work with mat-cell

I'm trying to project content into a expanded row but no success so far. The same approach works everywhere else not sure why its not working with mat-table