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
Shekhar Ramola
is it not the right way to give?
try giving in %
Fynn Feldpausch
Hey all. Is it possible to customize the padding values of e.g. angular material buttons? I see that there is a variable called $mat-button-padding in the _button-base.scss of angular material. Is there a possibility to change this value?
Victor Aprea
hi all, i'm trying to write a cypress routine to handle drag and drop that uses cdk drag and drop (https://material.angular.io/cdk/drag-drop/overview)
i can get cypress to the point of holding the drag preview over the droplist target but the drop preview is not materializing
can anyone give me a clue as to what specific element needs to receive a mouseover event for that drop preview to appear?
Nabin Karki
Hi all, How can I resize the height of the mat-tree dynamically. I would like mat-tree to take the full height of the container without using vh unit (because vh does not work very well with mobile/tablet devices).
Timothy Spear
Hi, I think I am missing something basic. I am trying to build a reusable table component based on MatTable. I am moving the column definition to a column to contain multiple properties, starting with name, label, and eventually actions and other attributes. Does MatTable support working with objects? Or does it only support working with arrays of strings? Here is a simple stackblitz I built off the MatTable simple demo with the sample above my re-usable component (which shows zero rows). https://stackblitz.com/edit/angular-jr1gcs?file=src/app/table.component.html
Hi Timothy, if u want to show objects data , u might wanna seperate out use a fun call in that col definition nd then in .ts return it as an array
Timothy Spear
@GitHubBala23 I am not even at the point of showing object data. For the moment, I am using a simple text area. What I am trying to do is use an object to define the column. e.f. the label for the column header, the name of the field in the array....
ohk u want to build a resuable Mat data table component ??
Timothy Spear
Timothy Spear
Adding a ViewChild to find the MatTable, I can see that the table is aware of the data. However, nothing is rendered under the TBODY element.
anyone have suggestions?
React Specialist
As far as I am concerned, you may use the ViewChild ref to the MatTable in the wrong place of ts file. As you know, the ViewChild ref is be initialized in ngAfterViewInit lifecycle. That's why you can access the ref to the MatTable in that lifecycle. If you share the source with me, I can guide you in more detailed way. Thank you.
Gavin Fitzgerald

Hey, has anyone built an apply (submit) style of select component?
I've a multi select that I'd like to only take on apply, rather than as each option is selected.

It feels oddly complex to implement, like I have to maintain a selected field on each option and then apply them on submit?

Gavin Fitzgerald
Zlati Pehlivanov

Hi ppl, I just upgraded my app to angular 10
so far so good
there is one lint warning and a deprecation notice that I'm not sure how to resolve
it seems PortalInjector was deprecated
I'm not really sure how to migrate this snippet

private createInjector(config: ModalConfig, dialogRef: ComponentModalRef): PortalInjector {
    const injectionTokens = new WeakMap();

    injectionTokens.set(ComponentModalRef, dialogRef);
    injectionTokens.set(COMPONENT_MODAL_DATA, config.data);
    return new PortalInjector(this.injector, injectionTokens);

to use Injector.create

1 reply
Aman Agnihotri

<mat-form-field appearance="outline" class="example-full-width">

<mat-label>Service Charges</mat-label>

<mat-select placeholder="Service Charge" [formControl]="serviceCharges" multiple>



<mat-chip *ngFor="let charge of serviceCharges" [removable]="true" (removed)="onServiceChargeRemoved(charge)">
{{ charge.rate }}

<mat-icon matChipRemove>cancel</mat-icon>

<mat-option *ngFor="let serviceCharge of serviceChargeLists" [value]="serviceCharge.rateId" [rate]="serviceCharge.rate">
<span class="float-right">({{serviceCharge.rate}})</span>

How can I bind the array value in mat chip ex: I want to bind {{serviceCharge.rate}} in mat chip ?
Mike Markus

Question: Is there any way to track the Q4 goals that were stated on the README?

In particular I'm curious about the new density theming api: "Introduce a new theming API for component density, a top feature request."

Asim Abazi
I've added a button inside a disabled mat-tab, is it possible to remove the tab line underneath?
Wai Liu
Hi all, stupid question... is the documentation website (https://material.angular.io) actually stored in the github repo? I can't seem to find it anywhere. The reason I ask is there is a couple of really nice things on that website that I'd like to take a look at the source code to see how it is done. Can someone point me to where in the repo it is?
Phil Mayfield
@waiholiu You want this guy: https://github.com/angular/material.angular.io
Michael Prentice
@Waterstraal There are some references in https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md. If you want to dig into it some more, you can dig into some of these files: https://github.com/angular/components/search?q=density. Hopefully some docs on this will be coming soon.
Michael Prentice
@Waterstraal update on this, the density docs will be coming when the MDC versions of the components are released. For now density only works on the material-experimental versions of the components (and a few material components that don’t have MDC versions).
Mike Meessen

Hi everyone, we have a somewhat annoying issue: We use Google's Material Icon font with ligatures. Something like: <mat-icon>play_circle_filled</mat-icon>. While ligatures are a cool feature to have a fallback for something like a "Home" icon, where the browser would show the word "home" instead of the icon if the font cannot be loaded, it causes problems for us: For one, we rarely use icons alone, we have accompanying labels along the icons, so we don't really need the main feature of using ligatures. But it's worse than just not needing it: if fonts cannot be loaded, we end up with huge and ugly text across our application that isn't even that intuitive (like "play_circle_filled" is more confusing to normal users than having no icon at all). But the worst part is: Google has started indexing these ligatures from our main menu at the top of the page. So search results now contain: "play_circle_filled mail_outline ..." and other stuff that really hasn't anything to do with our content.

Is there a way to use <mat-icon> so that:

  1. Nothing shows if the icon CSS and/or font cannot be loaded for whatever reason, and
  2. Google doesn't "see" the ligatures as content (that could be solved e.g. by allowing us to select the icon using an element attribute instead of its text body)
@netmikey You can downl6 the mat svg icons or similar icons from other sites, place it in your assets folder nd write a service file to render them. That gives you more control over icons.
donlwl6 *download
Mike Meessen
svg is a bigger download than the optimized and more modern woff files though. I wouldn't want to change to SVG, I just want to get rid of the ligatures showing up in the html..
Per Bernhardsson
@netmikey I would suggest using the Font Loading API to detect when the font is loaded and then set a class on a containing element (<html>, <body> or maybe your <app> to enable the ligatures.
is there a good guide for angular material testing (jasmine) somewhere?
I'm having nothing but problems and idk if I'm just missing something
like getting the values from cells of a table to check during a test
hi friends I am new here anyone can tell me how can i show my problem here thank you !
Daniel Willis
@meanstackBasit If you can recreate the problem in Stackblitz (https://stackblitz.com/) you can share the link here for people to examine.
Eduard Paprotski
Hi everyone, does anybody know how group rows like here: see first column
So, I know how to do it in html and angular, but so far no idea how to do it in material, any ideas?
@Danial Willis Thank you for taking the time for me!
Daniel Willis
@meanstackBasit You're welcome - did you resolve your problem?
@danww yeah I did resolved my problem.... tanks again
hello and good morning @danww can you idea about mat step module!
Daniel Willis
@meanstackBasit What would you like to know?
actually i want to know about mat step! when user edit the form after submitting ,
it is possible to remove all step and get back all submit data in one step... this I like to know
Daniel Willis
@meanstackBasit So you want a second version of the form that has no steps?
yes! you have idea about this approach