Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jun 18 2019 18:50
    @StephenFluin banned @piotr-mamenas
Daniel Willis
@SV9045 Yes. Share wth us a Stackblitz of your code so far, and I can help you.
vinay kumar

Hello, I have below code of Mat-select with virtual-scroll.
I have get the value of mat-select in formBuilder but did not reflect the value which I select in the mat-item-select.

<mat-form-field appearance="outline">
<mat-select multiple (openedChange)="openChange($event)" formControlName="itemSelect">
{{ itemTrigger }}
<cdk-virtual-scroll-viewport itemSize="5" minBufferPx="200" maxBufferPx="400" class="example-viewport-select">
<mat-option *cdkVirtualFor="let list of skillSet" [value]="list.data" (onSelectionChange)="onSelectionChange($event)">
<mat-error *ngIf="!addCompany.controls['itemSelect'].valid && addCompany.controls['itemSelect'].touched">
{{ titleAlert }}

I did not get the value in itemTrigger. Please help me to find the error
Victor Aprea
hi all, just getting started with nx workspaces and am finding it difficult to figure out how to add angular material to projects in it
no matter where I run the command ng add @angular/material as per the getting started docs, I get the message The add command requires to be run in an Angular project, but a project definition could not be found.
1 reply
anyone know how to do it?
Dominic Watson
really struggling with Stepper... the logic doesn't make sense when using it programatically
I want a "3 easy steps" style stepper. You start off on the first step, you click "next" and it goes to the second step etc..... so I have a property on my wrapping component: "selectedIndex = 0"
<mat-horizontal-stepper [linear]="true" [selectedIndex]="selectedIndex">
  <mat-step *ngFor="let step of steps; let i = index" [editable]="true" [optional]="false" [completed]="selectedIndex > i">
you're on the first step, it's the selectedIndex... makes sense. If you're on greater index, the previous ones are completed, obviously so selectedIndex=1 means that index 0 is complete
but when I change selectedIndex from 0 to 1, it seems to not work because completed is still false on the first step, which gets evaluated later
can I not just disable the validation of that since it's clearly on drugs?
Dominic Watson
I'm not using matStepperPrevious or matStepperNext cause the buttons are added dynamically and I need to handle the index manually and am not able to add those directives
Dominic Watson
it seems like [completed] is even problematic when using stepper.next/previous()
Dominic Watson
this seems to work:
this.completedIndex = this.selectedIndex < this.data.steps.length - 1 ? this.selectedIndex + 1 : this.data.steps.length - 1;
setTimeout(() => {
  this.selectedIndex = this.completedIndex;
Dominic Watson
seems i'm not alone angular/components#19445
Suprotim Mukherjee
I am new here!! can anyone help me how to do docs contribution ?
Abdul Basit Khan
how to get value fomrHTMLCollection []?
Hey, I think there might be an issue with the FormArray and validation. I put together this stackblitz which shows my issue. https://stackblitz.com/edit/angular-9mjpyy?file=src/app/app.component.html When you hit 'Add Row' the entire form starts showing the errors even though everything is pristine. How can avoid this and only show the error state if it's been touched? It doesn't matter which ErrorStateMatcher I use either. I am forced to use a custom one.
type="button" for the win.
Roman Meshkov

Hello, I want to investigate if this behaviour is bug or feature of Material tabs

What we have in v9 of Material tabs demo (below): if you resize the viewport (where component is being rendered), mat-tabs component dynamically (on fly) shows/hides horizontal navigation arrows according to viewport width

What we have starting from v10: viewport resize does not trigger arrows showing/hiding until we trigger change detection manually (click on tab or programmatically), so they stay visible or hidden at the wrong time.

v9: https://stackblitz.com/angular/xbpevvrbkpr?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts
v10: https://stackblitz.com/angular/xoepvnaxqak?file=src%2Fapp%2Ftab-nav-bar-basic-example.ts

Do you think this behaviour (in v10) is normal?

I am using a mat-table with expandable rows , I have mat-accordion inside the row. After sorting the rows I had an issue where I was not able to open the row with single click. I fixed it be modification animations. Now I am getting same issues for accordion which is inside the expanded row. any idea how to fix it ?
Ishan Udayapriya
I tried to open a bottom sheet using click event and failed to do so. Also tried using a subscription and it also failed.
The bottom sheet opens on the top left corner with no functionalities and freezes the window. can not close.
Would like to know what is the possibility of opening the bottom sheet using an event or a subscription.
NOTE: also tried to open a dialog but the result is the same.
Using Angular v10 and Material v10
Thank you
Hey does anyone know how I can use this component in ServiceNow's Service Portal ?
Hello, what are the difference between the echarts and highchart?
Abdul Basit Khan
mat tab Module: How to keep the tab body in the dome when the tab is change. Is there an expert here?
I'am using angular 11.0.7 with angular-material 11.0.3, but when I update to angular 11.2.11 and material 11.2.10 I see the html property visibility: visible changes to visibility: inherit. Is this a update in angular or in angular-material and where is this change documented?
shivam kumar

when I am trying to apply class dynamically inside ngfor like
<button mat-raised-button color="primary" class="delete-range-duration-{{i}}" (click)="deleteRange(i)">Delete</button> where i is index.
it is messing up my material css i.e I am not able to find any material css on the component. button looks like plain HTML button.

The same is happening with other components like input as well.
I am using Angular 7.

Abdul Basit Khan
@Shiva7071007 brother I'm shore you need to change your angular version in my for loop every thing working fine that you want. example is mentioned above

I have the ngsMatErrorMessages directive as shown below.

<mat-error ngsMatErrorMessages></mat-error>

I'm writing automated tests. Is it possible to get the directive instance before the mat-error appears? I know that it is already instantiated.

Alex van Andel

I am trying to install angular components using Yarn 2 PnP, I got Angular to work properly but I am struggling to figure out how to (or if it is even possible) get the Angular Material library to work on it. The source of my issue comes from the Sass dependency between @angular/material and @angular/cdk. @use '../../cdk/overlay'; which no longer works when @angular/material and @angular/cdk do not share the same @angular root repository. (Instead, they go into .yarn/$$virtual/@angular-material-virtual-4cab151bf2/0/cache/@angular-material-npm-12.0.0-6e8dd67b13-e9c1a36bd7.zip/node_modules/@angular/material/core/_core.scss, ...)

Has someone succeeded doing this, is this possible, is my environment broken? There is very little documentation around to draw a baseline.

Ishan Udayapriya
Hi, I have this idea which is opened as the feature request. angular/components#22688
And the example I created here for reference : https://stackblitz.com/edit/angular-ivy-zk9lzx?file=src%2Fapp%2Fapp.component.ts.
Can anyone look into this and give any suggestions, please?
Thank you very much.
Dominic Watson

was trying to update to @angular/material v12 and using the new sass imports. We're referencing $dark-focused like so:

focused-button: $dark-focused,

which as I understand should now be:

@use '~@angular/matieral' as mat
focused-button: mat.$dark-focused,

The problem is, it says the variable isn't defined.. I look in here and see export of $mat-dark-focused which doesn't exist... is that not validated and am I correct in thinking the reference is wrong there... for others too? https://github.com/angular/components/blob/master/src/material/core/theming/_palette.import.scss#L8

Hello. A question about <mat-sidenav-content>. It's not focused by default and users cannot navigate page with arrows/PgUp/PgDown without clicking and focusing it first. Any way to workaround this issue or avoid MatSidenav in favor of other component?
Anybody know how to debug this warning? WARNING: Missing font size at 42:8. Ignoring.
@compmaster did you try to have a look at the Focus management options ? https://material.angular.io/components/sidenav/overview#focus-management
@BertrandMarechal focus management is about <mat-sidenav>, not the <mat-sidenav-content> (whole page body)
Saurabh Kamble

I am trying to convert angular material table into a web element.

This is what I have tried

import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MatTable } from '@angular/material/table';
import { BrowserModule } from '@angular/platform-browser';

  declarations: [],
  imports: [
  providers: [],
  entryComponents: [
export class AppModule {
  constructor(private injector: Injector) {
      { componentType: MatTable, name: 'my-mat-table' }
    ].forEach((e) => {
      const element = createCustomElement(e.componentType, { injector: this.injector });
      customElements.define(e.name, element);

  ngDoBootstrap() { }

Now I do not understand how do I use the web element on my html page since the material table examples use angular specific syntax. Any help would be much appreciated.

Hi, I have observed a duplicate stepper component, after submitting my request and getting back response. Did anyone observe this?
1 reply
top one was the original, and the bottom one appears for a second or two, before it disappears
Yaakov Chaikin
Anyone know if there is a way to have a fixed option in a mat-autocomplete component, i.e., where the fixed option is always shown at the bottom of the autocomplete dropdown while the rest of the options are scrollable?
Samuel Hinkhouse
Hi y'all, in previous versions of Angular Material, there used to be a way to get the background color from some of the SCSS mixins. What is the current way to do this with Angular 12+?
How can I change the app's background color?
I would like to do something similar to what the basil example has.
Krzysztof Miąsko

Hi there. I've problem with cdkScrollable wrapped in element with ViewEncapsulation.ShadowDom


Maybe someone can help me.

Alexis Georges

Hey everyone,
I'm having troubles since NG 12 with theming.
I get following error:

SassError: Undefined function.
79 │   $typography-config: mat.mat-define-typography-config(

My code contains this

@use "~@angular/material/theming" as mat;
$typography-config: mat.mat-define-typography-config(
  // ...

The code is loaded thanks to @use through this way

  1. "styles.scss" loads @use "theme.scss"
  2. "theme.scss" loads @use "~myLibrary/typography.scss"

Could someone help me on this? :blush:

The error happens when I try to load anything from mat. inside my library:

  • mat.$grey-palette
  • mat.$dark-primary-text
  • ...
Milan Milanov

Hi Angular team. I've stumbled upon a requirement to implement a virtual scrolling strategy for items with different, but fixed heights. I've explained that in a comment in a github issue, as well as this SO question. I've modified the code suggested in the latter question and it seems to work. Two followup questions:

1) Do you think the use case is generic enough so that i try to create a PR in the experimental cdk, and eventually this becomes an official virtual scrolling strategy? If not, it can be published as a standalone npm module.
2) Is there a set of tests that are meant for different scrolling strategies, something like acceptance tests that cover basic functionality? I attempted to reuse the ones for the fixed strategy, but they also include template cache/track by/etc tests.