angular/material2

Material Design components for Angular

Alex

@alexcarrasco93

the value changes because of the parse that is provided with MAT_DATE_FORMATS so i'd like to emit an event after this parse because ngmodelchange or datechange events emitter are not emitting nothing after it, when i log the value in both the result is "18/02/1993aaaaa" and not the parsed value

Amin Bashanfar

@Amin-bash

hello,
I have a modal with an upload btn when you click it it will show loading in that btn and I can upload a file from my computer, what I want is when I cancel the btn of the upload I want the loading to disappear

this is the btn

and this is when I click it

I can upload but if I click cancel

it will stay like this

how can I control the cancel btn like when cancel is clicked hide the loading

Bojan Kogoj

@BojanKogoj

How do you open file select?

Xephy Lon

@XephyLon

Any idea if there's a solution to this?

Bojan Kogoj

@BojanKogoj

I would report the issue

kpaxton

@kpaxton

In the upgrade to Angular 9 it mentioned to remove entryComponents from all NgModule declarations...
I have tests for the Snackbar provided by Material and I'm getting
No component factory found for SnackbarComponent. Did you add it to @NgModule.entryComponents?
when trying to run the tests.....

Any ideas?

BertrandMarechal

@BertrandMarechal

Hey, I am using it and have no issues, is your @angular/material at version 9 too ?

Michael Prentice

@Splaktar

@XephyLon yes, please open an issue with a StackBlitz or GitHub repo reproduction.

Latch Kostov

@latchezar-kostov-ascendlearning-com

Does Angular Material have a built in class for "muted text" color? Trying to clean-up some components where people have statically declared scss such as $muted-color : rgba(0,0,0,0.6);, and would like to use something that's part of the theme and color pallatte is such thing exists.

Michael Prentice

@Splaktar

@latchezar-kostov-ascendlearning-com one of these may work for you? https://github.com/angular/components/blob/924494d8f87993bd7904ceb0ea04709d461ac6a6/src/material/core/theming/_palette.scss#L28-L37

Jamie

@d4nc3r

We'd like to add a data attribute to a mat-tab:

<mat-tab label="The Thing" data-test-id="the-thing-tab">
    <other-stuff />
</mat-tab>

The data-test-id attribute doesn't end up anywhere inside the html generated by the mat-tab component - is there a way I'm missing to get data attributes onto material tabs?

Brad

@bradtaniguchi

@d4nc3r If your adding attributes to the component that "disappears" you will have to go about adding that attribute somewhere else (maybe in the tab, or in a map/service?)

Jamie

@d4nc3r

@bradtaniguchi the purpose would be to "click" the tab itself during an e2e test, so adding it somewhere in the tab content wouldn't work for our case :(

Brad

@bradtaniguchi

If this is just for e2e testing, could you use the order of the tabs to select what you want? Or write a utility selector to "select" the tab based on some data within the tabs and get its parent. Not the best solution, but there is direct tab from the mat-tab component, since it is one of the components that gets vaporized

Jamie

@d4nc3r

Yah, we can use the id that material generates, it just makes our testers sad because they have to go find what the generated id is going to be (it doesn't change, so that's not a problem). Material replaces the components with a LOT of HTML, so it's sometimes hard for them to sort thru it all and find what they want to target, we were hoping to make it easier for them!

tp1906

@tp1906

Does anyone have an example of a directive that restricts input using regex but also allows for the validators to continue to work. I created a directive using ControlValueAccessor but it doesn’t show validation errors on matInput. When I remove the directive, validation errors are shown correctly. Do I need to provide matformfieldcontrol? Thanks in advance for any help!!

Brad

@bradtaniguchi

@tp1906 Usually if you create a "validator directive" all validators are applied at the same time, its possible your directive isn't defined to access the control correctly, or my memory is bad on how validators work together

mhagnumdw

@mhagnumdw

Can someone help me here? I've looked a lot. I'm trying to dynamically add a component inside a mat-menu-item button.
More details on this stackblitz:
https://stackblitz.com/edit/angular-dynamic-insert-inside-mat-menu-item-button?file=src%2Fapp%2Fmenu-icons-example.html

blindmonkey

@blindmonkey

Hi everyone! I've been racking my brains for a few weeks now trying to figure something out and was hoping someone here could help. I'm using a prebuilt material theme -- pink-bluegrey and I'm trying to reference the "list highlight" background color so that I can style table rows to also be navigatable. But for the life of me, I can't figure out how to reference an existing color in my themes.scss??

The issue seems to be that the default themes don't export any theme of properties? They seem to just be CSS?

Bojan Kogoj

@BojanKogoj

@mhagnumdw What exactly is the problem?

Or more exactly, what are you trying to achieve?

Karthik

@karthikkavin

Hi all, I am new to use angular material table. How to set a default page index to 1 and table show 1-10 of 100?

mhagnumdw

@mhagnumdw

Hi @BojanKogoj , I want to add a loading to the button after clicking on it. I created a Directive to do this. When using it on a conventional button it works well, as my loading component is added inside the button. But when I use it on a button with mat-menu-item it doesn't work well, as my loading component is added after the button.

Bojan Kogoj

@BojanKogoj

The problem is your button gets "destroyed" after clicking

And adding loading spinner to a button seems a bit odd

mhagnumdw

@mhagnumdw

@BojanKogoj

The problem is your button gets "destroyed" after clicking

Got it! How can I fix this?

And adding loading spinner to a button seems a bit odd

In my stackblitz demo, you don't have the complete behavior. I focused the code on the problem. But the idea is that the user clicks on a button that has a long action and in the meantime the button will be disabled and with a loading. The effect looks like this:
https://mat-progress-buttons.firebaseapp.com/home

@blindmonkey , see if this can help you: https://stackoverflow.com/questions/46760306/get-material-2-theme-color-scheme-palette-for-other-elements#46760925

Bojan Kogoj

@BojanKogoj

  @HostListener('click', ['$event'])
  onClick(event: Event) {
    console.log('click:', event.target);
    this.addSpinner();
    event.stopPropagation(); // Add this
  }

mhagnumdw

@mhagnumdw

@BojanKogoj , It works, but the menu does not close. You showed me a way! I'll think about it. Tks!

mhagnumdw

@mhagnumdw

And when reopening the menu we have the problem again.

Bojan Kogoj

@BojanKogoj

All I did was stop propagation, so menu would stay open

But good luck

blindmonkey

@blindmonkey

@BojanKogoj So the problem there is that I have to redefine the theme. I can't just get the colors out of the pre-built one. I actually solved it by doing more or less that, since I'll want to customize the theme at some point anyway. It's just inconvenient that there's no way to get a handle to the currently active theme and the colors therein.

Yaakov Chaikin

@ychaikin

I am setting <mat-icon [style]="someVarFromComponent">search</mat-icon> and when I inspect the HTML, the style attribute is empty. Any ideas?

Yaakov Chaikin

@ychaikin

I tried this as well: <mat-icon style="{{someVarFromComponent}}">search</mat-icon>. Same result. I think angular material is ripping it out. Is there a way to make it stay?

Brad

@bradtaniguchi

@ychaikin Angular material could be overwriting your styles, or you might need to use ngStyle

Yaakov Chaikin

@ychaikin

Yeah, I figured it out already. I guess angular material just rips out the styles.

@bradtaniguchi Do you know why that is?

Brad

@bradtaniguchi

@ychaikin Most of the time angular material overrides styles as it places its own styles on the element, in those cases classes are usually the next best bet

Where communities thrive

People

Repo info

Activity