I would like to use the new Portal from material CDK to inject dynamic content in multiple part of a form. I have a complex form structure and the goal is to have a form that specify multiple plac...

I am posting this question just to answer it myself in case anyone is struggling like I did! I'm working on an angular project to implement a Trello-like application. I want to be able to drag an e...

I am trying to implement an editor where one can drag an item to add it to the main content, the problem is that the source item is always destroyed when I'm dragging out of the source item contain...

I am working on mat-button-toggle-group for which I modified existing css by overwriting mat-button-toggle-checked class like below. Now, when I toggle between buttons the css is not working till I...

I have an Angular 7 app, using CDK Drag-n-Drop to drag and drop rows in a very long list. What should I do to allow the long list to auto scroll when the dragged item out of the current view? A...

I have a <div> element with position: absolute inside a container with position: relative. Its left and top properties are bound to data X and Y in the component.ts. My purpose is to move the...

I had to pass the overlayRef manually, is there a nicer way to include it in the components constructor with DI? service code: display() { const overlayRef = this.overlay.create({ positionStrat...

I'm using angular material in my project and I'm using Mat-Table to render 1000 Product/row per table. When Change pagination (we use backend pagination) of table to 1000 rows the performance becom...

I want to customize a <cdk-virtual-scroll-viewport> by using the CSS class .cdk-virtual-scroll-content-wrapper so that the scroll container always shows a scrollbar. But my CSS code for this ...

After doing some searching, I came to realize that I'm supposed to use the Flex-Layout library to make Material-themed UI responsive (as answered here). And according to the documentation, this lib...

This is the third question here on SO regarding "cdk dnd" and "nested"! I did not quite get the hacky suggestion of the other SO question. So here is a very basic and simple -> STACKBLITZ <- I...

I'm trying to use the Angular Material CDK DragDrop module from https://material.angular.io/cdk/drag-drop/overview With the cdkDropListDropped event I can prevent dropping but it shouldn't be drag...

I'm trying to provide scrolling while dragging a cdkDropList item. As of right now the page can't scroll without using the mousewheel to scroll. I was hoping to be able to just scroll through the p...

Has anyone been able to use virtual-scroll inside mat-select as shown below ? <mat-form-field> <mat-select placeholder="State"> <cdk-virtual-scroll-viewport autosize> ...

I'm creating two CdkDropList objects and the dragging and dropping functionalities are working fine, my problem is that I would like to disable the sorting while I'm dragging in the first list. Let...

I am using the Angular Material CDK Drag and Drop Functionality in my application. The drag and drop functionality is working fine, unless I am using it within a dialog (for most components I am us...

I have angular material datasource. angular material version is ^5.0.3 Sorting is working. However for some columns it is sorting incorrectly. where number and text is there. For instance, sorted r...

In my Angular app, I'm using the autocomplete feature from Angular Material: It works fine, except when I scroll the page: Basically the dropdown does not stick in its position when scrolling...

I've created a "custom" theme, (using the theming documentation at https://material.angular.io/guide/theming, which is pretty bad) like this: @import '~@angular/material/theming'; @include mat-cor...

I am using linear mat-stepper. It works fine with next. I do api call & if it's success then i call stepper-next event instead of using matStepperNext directive. Now when user fills all data ...

UPDATE 11.07.2020 Issue on Github https://github.com/angular/components/issues/19401 ORIGINAL POST Is there a way to adjust the scroll speed when dragging an item down or up the list? In Firefox on...

I am trying to use Angular's CDK Drag & Drop feature and its working great, however I can't find documentation on how to snap to a grid. I found a GitHub issue that states that this feature has...

It appears to have been activated when I examined the item. This class is:"cdk-drop-list-receiving". How do I do what I want not to be lost in any way? Thank you in advance. Alternative Image UR...

I need to make an item draggable with angular-cdk. I have imported the DragDropModule in the app module. I am applying the cdkDrag inside an ngFor. <div *ngIf="messages.length" > <div *...

I found this stackblitz example of adding drag-drop to a mat-table using angular cdk. However, the desired behavior is that the row is only draggable using the element with the cdkDragHandle direct...