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
20
votes
9 answers

mat-sort not working on mat-table

My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message Cannot set property 'sort' of undefined at…
baouss
  • 1,312
  • 1
  • 22
  • 52
19
votes
3 answers

Tried to overwrite @angular/cdk/stepper/step-header.d.ts.__ivy_ngcc_bak with an ngcc back up file, which is disallowed

After upgrading @angular/core and @angular/material using ng update command, the ngcc command fails with below error command used: ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points Error: > Compiling…
Aniruddha Das
  • 20,520
  • 23
  • 96
  • 132
19
votes
7 answers

Angular material 5 dark theme not applied to body

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-core(); $ip-primary:…
danwellman
  • 9,068
  • 8
  • 60
  • 88
18
votes
5 answers

How to change z-index of Angular CDK Drag and Drop?

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 using Nebular, in this case the Nebular dialog). The…
Tobias Kaufmann
  • 625
  • 1
  • 5
  • 19
18
votes
5 answers

cdkDragHandle doesn't work inside child component

Using @angular/cdk 7.2.1: If defining a parent component holding a cdkDropList and a nested list of cdkDrag components, defining a cdkDragHandle inside the nested child component doesn't work. If the same structure is all in the same component,…
Simon
  • 2,994
  • 3
  • 28
  • 37
17
votes
1 answer

How to programmatically scroll to item with angular's material virtual scroll?

I have a list that has many items and each item can be selected. For this I use Angular Material Virtual Scroll. When an item is selected, the selected item is highlighted and then is saved on the server. When I refresh the page, the selected item…
Mateut Alin
  • 1,173
  • 4
  • 17
  • 34
17
votes
2 answers

Angular CDK drag and drop issue inside CSS flexbox

I ran into an issue using drag and drop module from the Angular CDK. I use it inside a container div which has (among others) the following CSS properties : display: flex; flex-wrap: wrap; The flex_wrap property is here so that if the contained…
Paul Selle
  • 318
  • 1
  • 2
  • 9
16
votes
2 answers

Angular material CDK tree component with virtual scroll

Angular Material CDK tree component documentation says: "Flat trees are generally easier to style and inspect. They are also more friendly to scrolling variations, such as infinite or virtual scrolling" Any ideas how to apply virtual scrolling to…
Ragnar
  • 161
  • 1
  • 1
  • 7
16
votes
2 answers

How do I add a position strategy to an Angular CDK overlay?

How do I add a positioning strategy (ConnectedPositionStrategy) to an Angular CDK overlay? I've tried specifying it via the positionStrategy property and passed it into overlay.create(). import { Overlay, ConnectedPositionStrategy } from…
Edric
  • 24,639
  • 13
  • 81
  • 91
15
votes
2 answers

Is it possible to disable dragging on a sub-element of cdkDrag?

I am using Angular CDK drag-drop from Angular Material (see documentation here). I was wondering if it is possible to disable dragging on a sub-element of cdkDrag. The problem is it is impossible to select what is written in an input of the…
Gaetitan
  • 284
  • 1
  • 6
  • 16
15
votes
2 answers

cdk drag and drop in a nested situation

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've created. Everything works fine to the point where I…
Andre Elrico
  • 10,956
  • 6
  • 50
  • 69
15
votes
2 answers

Angular-Material Sidenav cdkScrollable

The Angular Material CDK provides a Directive CdkScrollable, which allows you to listen to ScrollEvents of a specific container. I am now trying to access the CdkScrollable of the MatSidenavContent, which is added by default. However my…
Robert P
  • 9,398
  • 10
  • 58
  • 100
15
votes
2 answers

Material 2 Pagination With Http And DataSource

I am having trouble with Material Pagination working with DataSource. I need to get back from the Service the total items from the collation, which the REST service provides (I can't change it). So far the only way I could do it was to do the same…
tworems
  • 251
  • 1
  • 3
  • 10
14
votes
1 answer

How do I fix the '[cdkFocusInitial]' is not focusable warning, when running jest unit test of a material dialog component with cdkFocusInitial?

I am running jest unit test of a material dialog component, where I have cdkFocusInitial on an input element in the dialog. This works perfect when running the application, but when I run unit tests in Jest I get the following error: console.warn…
DauleDK
  • 3,313
  • 11
  • 55
  • 98
14
votes
5 answers

Cdk virtual scrolling issue

Does any one met the issue of angular 7 cdk virtual scrolling working abnormally in mat-tab group. https://github.com/angular/material2/issues/13981 My city component template looks like that
rodent_la
  • 1,195
  • 4
  • 18
  • 38
1
2
3
…
44 45