Stack Overflow
Stack Overflow

Questions tagged [angular-cdk]

Use this tag for questions concerning your own components using the Angular CDK (Component DevKit) or Angular Material components that depend on the Angular CDK's APIs, like the MatTable.

Angular's Component Development Kit (CDK) gives developers tools to build their own Angular components addressing common problem patterns while giving the user full control over the components' styles. It is created alongside the Angular Material project.

The full list of features can be found at the official docs.

Learn more about the CDK in the official release post.

673 questions
116
votes
4 answers

What is `cdk` in Angular Material 2 components

In multiple places within angular material source, there are elements/ css classes that have cdk as their prefix. Does anyone know what the abbreviation for cdk in angular material context?
Ashok Koyi
  • 5,327
  • 8
  • 41
  • 50
43
votes
8 answers

Angular CDK: How to set Inputs in a ComponentPortal

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 place where sub components could (or not) inject…
JoG
  • 962
  • 2
  • 11
  • 17
42
votes
8 answers

Angular 6 MatTable Performance in 1000 rows

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 become very slow I even can't write in textboxes. I tried…
mostafa cs
  • 718
  • 1
  • 8
  • 16
39
votes
4 answers

custom filter in mat-table

I'm using mat-table. It has a filter which works fine with doc example: From https://material.angular.io/components/table/overview, the original code is:
cucuru
  • 3,456
  • 8
  • 40
  • 74
37
votes
5 answers

How to use Angular7 (angular material) drag drop between two components

As recently angular introduced drag and drop in angular material https://material.angular.io/cdk/drag-drop/overview . All examples describes with in a single component. How to use this in two different components, Drag one component item and drop…
Jomy Joseph
  • 473
  • 1
  • 4
  • 6
36
votes
6 answers

Angular 7 Drag and Drop - Dynamically Create Drop Zones

Is there a way to dynamically create drop zones? I'm having some troubles with ngFor and cdkDropList. Here is my first list and draggable elements:
sebamed
  • 1,047
  • 1
  • 9
  • 18
32
votes
2 answers

Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

I am new to material 2 and I have implemented mat table and in which I have click event on row to open dialog and there is also a menu button in last column "Action" but on clicking on button it also open dialog box instead of opening menu. Table …
Nasiruddin Saiyed
  • 1,438
  • 1
  • 13
  • 31
31
votes
3 answers

Angular CDK understanding the overlay position system

I'm really trying to understand the overlay position parameter but without any luck. I also can't find any documentation about this topic. What does the following code mean? const positions = [ new ConnectionPositionPair({ originX: 'start',…
undefined
  • 6,366
  • 12
  • 46
  • 90
29
votes
4 answers

Angular CDK Drag & Drop: Don't move source item

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 container. Is there a way to force the source item to stay…
Yassine Zeriouh
  • 480
  • 3
  • 10
  • 23
29
votes
15 answers

How to disable or overwrite cdk-focused in Angular

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 get focus out and that is because 2 cdk classes…
user3154990
  • 555
  • 4
  • 13
  • 27
27
votes
3 answers

Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental

I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've…
Seanghay
  • 1,076
  • 1
  • 11
  • 24
25
votes
8 answers

Changing style of overlay container

I use a git project for a virtual keyboard (https://ngx-material-keyboard.github.io/demo/). And I have some issues to get it running on a small device with 450*250 pixel. At the end I found the necessary changes in the css if I modify it directly at…
user1025633
  • 263
  • 1
  • 3
  • 5
22
votes
4 answers

How to implement a global loader in Angular

I have a global loader which is implemented like this: CoreModule: router.events.pipe( filter(x => x instanceof NavigationStart) ).subscribe(() => loaderService.show()); router.events.pipe( filter(x => x instanceof NavigationEnd || x instanceof…
Guerric P
  • 30,447
  • 6
  • 48
  • 86
22
votes
4 answers

CdkDragAndDrop how to prevent dragging

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 dragged either. How can I tell a cdkDropList or each…
Perrier
  • 2,753
  • 5
  • 33
  • 53
21
votes
4 answers

Cannot Close Angular Material Cdkoverlay From BackdropClick

I'm currently using the Angular Material cdkoverlay and want to close it when I click anywhere else on the screen except for the overlay. I've gone aheadand subscribed to backdropClick() but I can't get it to fire. launchOverlay() { let…
DevEng
  • 1,114
  • 2
  • 15
  • 29
1
2 3
…
44 45