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
14
votes
4 answers

Angular Material Table Error: Can't bind to 'mdHeaderRowDef' since it isn't a known property of 'md-header-row'

I'm trying to convert a CDK data-table to a Material Design styled data-table (see: https://material.angular.io/components/table/overview), but when I change the cdk prefixes to md, I get the following error... Uncaught Error: Template parse…
Joshua Craven
  • 4,407
  • 1
  • 31
  • 39
13
votes
1 answer

Angular Nested Drag and Drop / CDK Material cdkDropListGroup cdkDropList nested

I use CDK Material Drag and Drop utilities to create a form editor with drag and drop enabled. It works fine, but nesting a cdkDropList within a cdkDropListGroup does not work. I'm not able to drag anything into the nested drop list container.
Marcus Kaseder
  • 948
  • 1
  • 8
  • 19
13
votes
1 answer

MediaObserver vs BreakpointObserver - what are the differences?

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 library provides the MediaObserver class to…
atiyar
  • 7,762
  • 6
  • 34
  • 75
13
votes
4 answers

Angular CDK connecting multiple drop zones with cdkDropListConnectedTo

I am creating a simple board interface with swim lanes think Jira swimlane or trello boards The red lines shows current flow The blue shows the flow which I would like to implement I have three columns named "To Do", "In Progress" and "Done".…
alt255
  • 3,396
  • 2
  • 14
  • 20
13
votes
3 answers

Cdk virtual-scroll inside mat-select for mat-option

Has anyone been able to use virtual-scroll inside mat-select as shown below ?
bhantol
  • 9,368
  • 7
  • 44
  • 81
13
votes
2 answers

md-table in Angular Material 2

I am working with Angular Material Table. In Html code, there is ID {{row.id}} I found out…
Chatra
  • 2,989
  • 7
  • 40
  • 73
12
votes
1 answer

Angular CDK - issue with scrolling and dragging element inside nested scrollable div

Prerequisite: cdk draggable elements inside a nested scrollable div (see the example) How to reproduce: Start dragging an item. Scroll the page Drag item a bit more when not scrolling Effect: item placeholder stays in wrong place and it's…
user10552124
  • 121
  • 1
  • 3
11
votes
4 answers

mat-autocomplete options dropdown does not stick when scrolling

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 and I can't figure out why. In the official Material…
Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
11
votes
1 answer

cdk Virtual Scrolling with HTML table

I am very new to angular and have been stuck on this problem for more than a day now. Using Angular 7 and angular/cdk ver 7.3.4. What I am trying to accomplish seems very simple. I have a good old HTML table with large number of rows. I want to…
Fike Rehman
  • 725
  • 2
  • 7
  • 16
11
votes
3 answers

How to disable element shifting/moving in target cdkDropList in Angular 7

I have 2 list (capital cities in the left and countries on the right). I would like to be able to move the capital city on the countries list, and allow the user to drop the capital city on the country. The issue is that the country list elements…
dev73
  • 369
  • 1
  • 4
  • 7
11
votes
5 answers

Cancel drag on key press Angular cdk Drag and Drop

I´m working in a application implementing the new drag and drop from angular material CDK and i´m trying to cancel the drag event of the element pressing Esc, i mean, i start dragging the element but if i press Esc while i´m dragging the element, it…
Miguel Frias
  • 2,544
  • 8
  • 32
  • 53
11
votes
1 answer

Get reference to component from CDK Overlay Portal

I am using a service to instantiate Angular Material CDK Overlays using Component Portals. Once I create a portal and attach it to an overlay, is there any way to access the component reference of the component that the portal creates? I want to be…
dudewad
  • 13,215
  • 6
  • 37
  • 46
10
votes
1 answer

Angular virtual scroll strategy for different fixed-size items

I'm displaying an infinite, virtual scroll using Angular's cdk-virtual-scroll-viewport. The functionality doesn't rely on anything special from it, besides subscribing for the view position, in order to load new elements when the user scrolls to the…
Milan Milanov
  • 412
  • 1
  • 8
  • 27
10
votes
3 answers

Element style doesn't apply when using cdkDropList (Angluar cdk drag and drop)

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 element from one list to another so I installed the…
Yezan Rafed
  • 532
  • 5
  • 15
10
votes
3 answers

How to output AWS CDK synth to terminal/web browser [if possible]

FYI, just want to let you guys know that I'm writing this AWS CDK app with: TypeScript I'm using a Macbook to write the app,running macOS Mojave 10.14.6. my node version is 10.16.3 NPM version is 6.9.0 My AWS CDK version is 1.10.0 (build 19ae072).…
blue2609
  • 841
  • 2
  • 10
  • 25
1 2
3
…
44 45