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
I am attempting to use Angular Material components inside of a web component. Everything is working except for one edge case with the cdk-overlays. So far I have had success using an override of _createContainer() to append the overlay container to a div inside of the shadowroot so that the styles will apply. However if I hide the parent element with an *ngIf and then toggle it back the overlay container is present in the DOM but it and its contained elements are not visible.
Is there something I'm missing where I need to manually clear or toggle something to get that behavior to work correctly?
It seems to be an issue with the overlay being inside of an ngIf that is toggled. Once it's toggled to the hidden state the content will not load in the container even though it is present.
Hello everyone,
I have a general question to ask about @angular/google-maps regarding pricing per load.
Does each instance of a <google-map> component count as a map load..?
For example if I have multiple routes in my application that each create an instance of <google-map> component,
and the Maps JS Api is loaded in the root index.html <head>, routing to each route counts as a new map load or
is it counted once per application visit and further routing on to different components does not incur any further charge..?
Amir Ali Shokri

Hi Every One How Can I Auto Refresh In Angular Material
In BootStrap Tables Is Auto Refresh But Angular ...
I Have 2 Component one Input And One Table And If Add New Item From Input Table Refrsh


Amir Ali Shokri
Travis Rivera
hey is this active?

@AmirHCS_gitlab you can use subscribe an observable like this:

ngOnInit() {
    this.interval = setInterval(() => { 
    }, 5000);

        .subscribe(data => {
            this.data = data;

so every 5 seconds the data will refresh for you...

Amir Ali Shokri
Thanks That is Help Full
Daniel Willis
@AmirHCS_gitlab I don't think you want to be always polling to refresh like that. Your table should subscribe an Observable data source that is updated by the input component. That way the table will only refresh as required.
Amir Ali Shokri
@danww Thanks But How?
Pavan K Jadda

@pavankjadda Are you applying any CSS that might globally target table cells, e.g., extra padding/margin?

Sorry. Just now seeing your reply. I am able to fox the issue. See the answer here https://stackoverflow.com/questions/66049716/mat-date-picker-overflows-when-opened

Daniel Willis
@AmirHCS_gitlab Here's a very simple example of one way to do it: https://stackblitz.com/edit/angular-ivy-ggvode?file=src%2Fapp%2Fapp.component.ts
@AmirHCS_gitlab Note that all the table component does is subscribe to the BehaviorSubject of the data, passed from the parent component. The input component simply emits a new item. The parent component listens for new items from the input component and adds them to the BehaviorSubject.

Anyone know how to get this to submit my form?

      <mat-date-range-picker #projectDatePicker>
          <button mat-raised-button type="button" matDateRangePickerCancel>Cancel</button>
          <button mat-raised-button type="submit" color="primary" matDateRangePickerApply>Apply</button>

it doesn't trigger the form's submission:

  <form [formGroup]="projectSearchForm" (ngSubmit)="onSubmit()">

If I put the button outside of the mat-date-range-picker-actions then it does

I ended up just not using the ngSubmit method since I only have one field here anyways
Amir Ali Shokri
Thanks This Is Great Fix
shivam kumar

I recently migrated to a angular 10 from angular 7 and placeholder for my input doesn't show up anymore. After inspecting, placeholder attribute is converted to data-placeholder. If i change it to browser to placeholder, it shows up.

sample image : https://ibb.co/mTnf4jf

<input matInput class="mat-select-search-input" [formControl]="searchedValue" (input)="onInputChange($event.target.value)"  (keydown)="handleKeydown($event)"
                          autocomplete="off" placeholder="Search" />
Does any one know, How to change image based on the selection from drop down in Angular Material ?
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.