angular/material2

Material Design components for Angular

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

Yaakov Chaikin

@ychaikin

@bradtaniguchi Thanks. using ngStyles seems to work as well.

Brad

@bradtaniguchi

nice, if I remember correctly [styles] doesn't work (forgot why), which is why ngStyles exists. Same goes for value and ngValue.

Yaakov Chaikin

@ychaikin

My guess is because of all the ng-reflect type of attributes... They seem to be doing something after all the styles are applied and thus they need control over that or something.

with ngStyles, angular has control when to inject those styles.

Michael Prentice

@Splaktar

@ychaikin that’s something that Angular does, not Material. This post has some info (https://blog.angulartraining.com/whats-the-difference-between-style-and-ngstyle-in-angular-68a3301c2ae6) like the syntax being [style.height]=“600px”. To apply multiple styles, https://angular.io/api/common/NgStyle is the current recommendation.

Ally

@AllySummers

i'm using angular material and mat-table. i'm trying to use a form array on it, but i just keep getting errors saying it can't find the control.

if i click the response or correct fields, it loads one or 2 more but i still get spammed in the console.

here's the relevant part of the html: https://summers.codes/buzuditeba.html

and here's the typescript file (warning: it's really long):
https://summers.codes/lisugurako.ts

here's what it looks like/does https://i.imgur.com/8VueGP8.png
although this isn't mat-table, this worked before https://summers.codes/awonusuyiv.html

mhagnumdw

@mhagnumdw

@AllySummers , I have an example, a little complex, involving mat-table and FormArray. I can pass you the html and ts. Maybe it will help. What do you think?

4javier

@4javier

I'm using cdk-virtual-scroll-viewport to get an "infinite-scroll" beahviour. How do you manage the async sorting of the list? If the user choose to sort the items , without having reached the end of the list yet, how do you fetch all the data to issue a complete sorting?

Oleksandr Tsymbaliuk

@TAVkiev

Hay all, we are using angular 2 on our project, can someone suggest appropriate version for material components packages ?

Derek

@derekkite

@TAVkiev https://github.com/angular/components/blob/master/CHANGELOG_ARCHIVE.md#200-beta11-carapace-parapet-2017-09-21 This one requires 4. Keep scrolling down to see which one would work with v2.

Lodewijk Wensveen

@lwensveen

is there some issue with the latest version? Can't bind to 'ngIf' since it isn't a known property of 'form'.

Oleksandr Tsymbaliuk

@TAVkiev

@derekkite thanks!

Ally

@AllySummers

@mhagnumdw yea that would be appreciated! sorry for late reply, was like 10:50 pm for me when you sent that

not sure if it makes a difference, but i have an array of form controls, and then i also have an array of objects and i need to reference them both in a mat table row.
i have a "criteria" object that has some descriptions and etc, and then i have 2 form controls, which is a text field and a checkbox. i've tried using criteria[i].field, i've tried merging the arrays (using a map function like this:

this.criteriaMapped = criteria.map((criterion, i) => {
  return {
    ...criterion,
    ...this.criteriaForms.controls[i]
  }
})

and i've tried a few other things, but i always get the same error

Ian Kaney

@ikaney

I wonder if anybody can help, I've been trying to get the CDK drag drop component to snap to grid, apparently this is possibly via constrainPosition, however even if I perform the appropriate maths to move the point to be 10 pixel increments, depending on where I start the drag from, the item snaps to position not on 10 pixel increments, if that makes sense?

const newPoint: Point = {
x: Math.round(point.x / dragRef.data.data.gridSpacing.x) dragRef.data.data.gridSpacing.x,
y: Math.round(point.y / dragRef.data.data.gridSpacing.y) dragRef.data.data.gridSpacing.y
};return newPoint;

gridSpacing.x and gridSpacing.y are equal to 10

Where communities thrive

People

Repo info

Activity