Questions tagged [angular-material-8]

Angular Material2 is an implementation of Material Design in Angular. This tag is for version 8.x of Angular Material2. Do not use this tag for other versions (e.g. v6, v7) 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 v8.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:

38 questions
7
votes
2 answers

Angular Material does not seem to work in StackBlitz

While trying to replicate another issue I am having, I tried to use StackBlitz to replicate. However Angular Material does not seem to work on StackBlitz.... any advice or ideas on what I might be doing…
6
votes
2 answers

Performance issue with @angular/material autocomplete

I am using Angular/Material Autocomplete. While loading data to the Autocomplete getting serious performance issues,like the rendering takes around 30 seconds and it takes more than 10 seconds to become stable,data is loaded from the server, and the…
Vignesh
  • 2,378
  • 3
  • 25
  • 48
5
votes
1 answer

SonarQube - ::ng-deep getting an error as "Unexpected unknown pseudo-element selector ::ng-deep"

In ourproject , we have used angular material for development. We have overridden the angular material styles using ::ng-deep to customize the CSS properties. While using ::ng-deep getting an error as "Unexpected unknown pseudo-element selector…
Debugger
  • 690
  • 1
  • 18
  • 41
4
votes
1 answer

Horizontally scroll Angular Material Stepper form header items

I have an Angular Material Stepper form and I have 15 steps on it. As there are a lot of steps, the header text is shrinking down and the text cannot be seen. Please refer to the image below: I am trying to set a fixed width to each header item…
Shafkhan
  • 456
  • 4
  • 19
4
votes
2 answers

Got @angular/* version ~9.0.0-next-0 when tried to upgrade to Angular Material 8 via ng update. Why this discrepancy?

I am trying to upgrade an Angular 7 application to Angular 8 using instructions from here. Everything went well until the last step: ng update @angular/material This updated Angular Material packages to 8.1.2, but also upgraded @angular/* packages…
Alexei - check Codidact
  • 22,016
  • 16
  • 145
  • 164
3
votes
2 answers

Angular Materials - Mat-Select Change Selected Value Color

I am using Angular Material 8.2.3 in my project and I am trying to change the selected value color for Mat-Select component(ie drop down menu) as below. In chrome inspector I can see the font color is defined by class .mat-select-value However…
Ka Tech
  • 8,937
  • 14
  • 53
  • 78
3
votes
3 answers

How to label both sides of a mat-slide-toggle control in Angular/Material 8?

I'm using mat-slide-toggle on a settings screen to show various "this or that" options, e.g.:
Automatically adjust display to screen
Ade
  • 640
  • 1
  • 7
  • 21
3
votes
2 answers

Angular mat-autocomplete: Setting active item programmatically

What are you trying to do? Setting an item in my panel active programmatically. What are you seeing that does not match your expectations? Using autocomplete's keymanager function setActiveItem doesn't actually update the visuals of the panel at…
2
votes
0 answers

this.appRef.attachView is not a function

Im using @angular/core and @angular/common version 8.2.14; and @angular/cdk and @angular/material 8.2.3. When i try using Angular material's mat-dialog i get this error: TypeError: this.appRef.attachView is not a function. The same error i get for…
Arfat
  • 117
  • 1
  • 1
  • 9
2
votes
1 answer

Use utc+0 with MAT_DATE_LOCALE in Angular Material 8

I'm using Angular 8 and Angular Material 8. My application has this code in AppModule: { provide: MAT_DATE_LOCALE, useFactory: "myFunctionToGetServerLanguageCode" } Where myFunctionToGetServerLanguageCode is a method that returns a string like…
E.Tiake
  • 166
  • 1
  • 13
2
votes
0 answers

Fix header of mat-table on a mat-dialog not working

Credit…
2
votes
3 answers

Failed: Template parse errors: 'mat-card-title' is not a known element

I started angular two months ago, I designed an application and doing the ng test I have this error: Failed: Template parse errors: 'mat-card-title' is not a known element: 1. If 'mat-card-title' is an Angular component, then verify that it is part…
2
votes
1 answer

Angular Material Drag and Drop - create drop list through DragDrop service

For some reason, I want to apply Angular Material Drag'n'Drop functionality through the DragDrop service. As it is written in the doc: https://material.angular.io/cdk/drag-drop/api DragDrop Service that allows for drag-and-drop functionality to be…
krzyhub
  • 6,285
  • 11
  • 42
  • 68
1
vote
1 answer

How to cast event to return HttpEventType.Response when subscribe data?

I work on angular 8 I face issue I can't cast event to return HttpEventType.Response when subscribe data to get progress bar upload component service PostUpload(selectedoptionsId, file) { const formData: FormData = new FormData(); …
1
vote
1 answer

Is it possible to make entire border of input mat form field fill red on validation error

In my form i have email field which is customized and i cant use outline appearance input field . Enter your email
ani
  • 446
  • 1
  • 9
  • 31
1
2 3