Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 18 2019 18:50
    @StephenFluin banned @piotr-mamenas
joncy92
@joncy92
Hey does anyone know how I can use this component in ServiceNow's Service Portal ?
beginnercoder0011
@beginnercoder0011
Hello, what are the difference between the echarts and highchart?
Abdul Basit Khan
@meanstackBasit
mat tab Module: How to keep the tab body in the dome when the tab is change. Is there an expert here?
Richard
@rfortunati
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
@Shiva7071007

Hi,
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.

image.png
Abdul Basit Khan
@meanstackBasit
meanstackbasit_6.png
Screenshot_6.png
@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
mhagnumdw
@mhagnumdw

Hi!
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
@emrysal

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.

Ishanuda
@ishanuda
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
@intellix

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

compmaster
@compmaster
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?
PerryP
@p97z
Anybody know how to debug this warning? WARNING: Missing font size at 42:8. Ignoring.
BertrandMarechal
@BertrandMarechal
@compmaster did you try to have a look at the Focus management options ? https://material.angular.io/components/sidenav/overview#focus-management
compmaster
@compmaster
@BertrandMarechal focus management is about <mat-sidenav>, not the <mat-sidenav-content> (whole page body)
Saurabh Kamble
@skamble89

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';

@NgModule({
  declarations: [],
  imports: [
    BrowserModule
  ],
  providers: [],
  entryComponents: [
    MatTable
  ]
})
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.

kswat
@kswat
Hi, I have observed a duplicate stepper component, after submitting my request and getting back response. Did anyone observe this?
image.png
1 reply
top one was the original, and the bottom one appears for a second or two, before it disappears
Yaakov Chaikin
@ychaikin
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
@shinkhouse
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+?
dpeter99
@dpeter99
Hi!
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
@kmiasko

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

https://stackoverflow.com/questions/67906352/problems-with-cdkscrollable-and-cdkdroplist-inside-element-wrapped-with-viewenca

Maybe someone can help me.

Alexis Georges
@SuperITMan

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:

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

  • mat.$grey-palette
  • mat.$dark-primary-text
  • ...
Milan Milanov
@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.

David Smith
@voltairianman

Hi all. It looks like the changes to material 12 needed to support N number of palettes in a theme is pretty small. Mainly just storing the palettes or palette keys in a location where they can easily be accessed (the root and color locations cant be used to determine the keys since they contain other information aside from palettes), and changing the component themes to something like:

@each $palette-key in $palettes {
    $palette: map.get($theme, $palette-key);

    &.mat-#{$palette-key} .mat-button-focus-overlay {
      background-color: theming.get-color-from-palette($palette);
    }
  }

where the palettes can be iterated over instead of having hard-coded values assigned to primary/accent/warn, etc. I've actually already gone through the code and made these changes and didn't run across any cases the above wouldnt work. Wondering what people's thoughts are on this as I know there has been a big desire from the community for support for additional palettes in a theme, including from projects where I work.

nzil
@Anzil-Aufait

Hi everyone, I'm facing a problem.
I'm showing mat dialog based on the clicked element position. Some time dialog part hiding behind the viewport ca't see the rest of the part.

How can i move/change dialog position ? is it possible ?

Sargo Darya
@SargoDarya
Hey folks, I have a question regarding drag/drop. I need to establish drag/drop of items across multiple components of which I do not know drop list ids. Is this even possible with the CDK drag/drop implementation? Thought the cdkDropListGroup would help but afaik it doesn't cross component bounds.
Robert Marcano
@robmv
Greetings. Can a custom MatFormFieldControl add its own errors to the form field parent? MatFormFieldControl has errorState: boolean as a member, but I don't find a way to tell which ValidationErrors are present inside the field
Glauber Funez
@glauberfunez_twitter
Hi, I'm new around here.
could someone help me with this angular/components#23478
I've tried everything, based on what I found on the internet
BertrandMarechal
@BertrandMarechal
oi @glauberfunez_twitter I think it can be normal, as 0 might be an invalid date based on your validation. There are ways around it, like using updateOn: 'blur' that might just solve your issue.

and about your locale date wish, you can set the date locale in the module that use the mat-datepicker. Checkout https://material.angular.io/components/datepicker/overview#setting-the-locale-code

Note you have to do it for all the modules that use it

nzil
@Anzil-Aufait
Is it possible to use "mat-date-range-input" as inline element?
Jeremy Kepf
@khepf

For MatSelect, the overlayDir is now private. Does anyone know how I can access it now? In node_modules MatSelect select.d.ts line 171, it's now:

/* Overlay pane containing the options. /
protected _overlayDir: CdkConnectedOverlay;

But it used to be:
/**

 * Overlay pane containing the options.
 * @deprecated To be turned into a private API.
 * @breaking-change 10.0.0
 * @docs-private
 */
overlayDir: CdkConnectedOverlay;
goosanderGeist
@Babyswizz_twitter
Hi everyone, I have this simple example of the material drag & drop functionality. I am trying to figure a way to programmatically move any of the items to the bottom on click. Any ideas? https://stackblitz.com/angular/mjqyyqxnqbo?file=app%2Fcdk-drag-drop-sorting-example.html
Joshua
@belst
are peerDependencies required? just running npm i installs a lot of stuff that are peerDependencies but I don't even need a fraction of those
or can I disable a11y of cdk somehow completly? I don't need it at all but it is a pretty big part of my bundle size (at least according to webpack bundle analyzer)
Umer Naeem
@umernaeem217:matrix.org
[m]
hey there!! Guys I am new to open source I need your help in PR
i am getting api_golden_checks failed
Umer Naeem
@umernaeem217
anyone available to help
Pravin Ambekar
@pravinambekar
Hello Geeks,
Could you please help with this issue : https://stackoverflow.com/questions/69717559/how-to-generate-and-display-nested-angular-material-table-dynamically
I am unable to find solution to dynamically bind nested mat table having unpredictable no of child elements
norsemanGrey
@norsemanGrey

Hi guys. I am looking for a way to using Angular Materials drag and drop to swap elements between lists rather than just moving them. That is I have been able to make it work functionally so that elements are swapped / replaced, however, visually when I drag a list item on top of another list item the preview is not correct and shows it as if you are dropping the item in between the items in the target list rather than replacing the item in the list. There are several open issues and questions about this and none of them seems to have been answered which is not encouraging. So my question for you is if this is at all achievable with Angular Materials or do I need to take another approach? It would be weird if it is no way to implement this drag-and-drop behavior as it seems quite a commonplace operation one would want.

https://stackoverflow.com/questions/56669729/angular-7-drag-drop-swapping-elements
https://stackoverflow.com/questions/69310112/angular-12-drag-and-drop-with-replace-list-placeholder-list
https://stackoverflow.com/questions/69752172/using-angular-materials-for-droplist-replacing-empty-positions-in-target-list
https://stackoverflow.com/questions/61218120/swapping-elements-in-list-with-angular-cdk-drag-and-drop-and-cdkdroplistenterpre
angular/components#18317
marceljuenemann/angular-drag-and-drop-lists#216

Peter G Jones
@Jonesie
Hi all. I have a problem with MatSelect. When opened, the current selection is not highlighted and the user has to scroll to see the highlighted/selected value. Also using matNativeControl seems better but looks ugly - not like material at all like it does with all the examples Ive seen. Something it fecked up. Anyone else seen this?
Rajesh
@RajeshMunirathinam
Hi, I have situation here like the material styling was overriding from embed application to normal angular application, Actually I'm embedding an custom element ( more like an application) into another angular application.
Do anyone faced this kind issue while embedding an application into another application
Also I have tried using the encapsulation modes but nothing helps me out
Maciej Maciaszek
@memee
Hi all, I'm struggling with setting first day of week in datepicker that is used in lazyloaded module. I provide everything that's needed in this module: { provide: MAT_DATE_LOCALE, useValue: "de-DE" }, { provide: LOCALE_ID, useValue: "de-DE" }, { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },, and using DateAdapter.setLocale("de") in one of components that is using mat-datepicker in this module but with no luck. Day names are translated but Sunday is till first day of a week. Do you have a clue?
Oh, gosh. I just found out that i need to import MatMomentDateModule,
BertrandMarechal
@BertrandMarechal
this one is a pain innit ?