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

Angular CDK Selection Model - issue with checkbox header states with paginated table

I am working on a paginated table with checkbox row selection using the angular CDK SelectionModel collection. I have a barebones example with a couple of pages of data to flip between in my table and am facing a problem where after I select all…
mindparse
  • 6,115
  • 27
  • 90
  • 191
8
votes
1 answer

How to change dir property of the Angular CDK overlay at runtime?

I'm using Angular 10, on click the following function is executed to preform direction change: private changeHtmlDirection(direction: 'rtl' | 'ltr') { document.getElementsByTagName("html")[0].dir = direction; } It works well, only that the…
noam steiner
  • 4,034
  • 3
  • 27
  • 42
8
votes
3 answers

Reset transform offset in Angular Material Drag and Drop

I have a
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 div inside my container using cdk drag and drop. On the…
Loreppo
  • 91
  • 1
  • 6
8
votes
2 answers

CdkDrag updating position

I have multiple CdkDrag element that are rendered from a ngFor loop on an array in my component. when i remove one element i splice the array. Then some of the elements will update there position. how do i avoid that? I tried to get the…
Francis Groleau
  • 344
  • 4
  • 14
8
votes
1 answer

How is cdkPortal different from ngTemplateOutlet

Why should one use cdkPortal over the built-in directives ngTemplateOutlet and ngComponentOutlet in Angular. aren't both of them provide the same functionality? Are there specific features in the CDK Portal that doesn't come with the built-in…
Murhaf Sousli
  • 12,622
  • 20
  • 119
  • 185
8
votes
1 answer

cdk virtualscroll with mat-grid-list

Is there a virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it. I'm using the grid-list to display profile pictures, and need an infinite scroll…
Elger Mensonides
  • 6,930
  • 6
  • 46
  • 69
8
votes
4 answers

Angular CDK Drag and Drop: Cancel drag-action

With the new drag and drop feature of the @angular/cdk (I'm currently using version 7.0.0-beta.2), is it possible to cancel a drag-action? I did not find a matching function on 'CdkDrag' which could do the trick. Edit from 2019-01-10 Thanks for the…
Johannes Heucher
  • 101
  • 1
  • 3
8
votes
2 answers

Get active position on angular cdk overlay?

Is there a way to get in the attached component to an overlay the active position ? For exaple I say to a tooltip to open above but this cannot be done and the overlay will open it below. I want to add an arrow pointing to my element from the…
Nicu
  • 3,476
  • 4
  • 23
  • 43
8
votes
3 answers

Get parent hierarchy from a child node in angular 6 material tree

I am following a tutorial to implement cdk tree in angular 6. I created a tree structure, now I want to get the parent hierarchy from from the child by making it clickable, while there are methods like getDescendants to get children of a node, vice…
user9040429
  • 690
  • 1
  • 8
  • 29
8
votes
1 answer

Angular 2 Material - How do overlay and portal work?

I want to make an autocomplete component which makes requests to the server and renders the received values on the screen. I'm trying to understand how the portal and overlay work. Right now this is my component for autocomplete import { …
Nicu
  • 3,476
  • 4
  • 23
  • 43
7
votes
1 answer

Maintain scroll position with CDK autosize virtual scroll strategy

Maintain scroll position with CDK autosize virtual scroll strategy I have a large list of items that can be scrolled with provided by @angular/cdk-experimental (the items have dynamic heights, thus I'm using…
Ulrich Lehner
  • 108
  • 2
  • 7
7
votes
0 answers

How to make Angular CDK Drag and Drop Accessible with a Keyboard

Our app has a "Form Builder" where users build a form by dragging form fields onto it. I'm researching how we would make this keyboard accessible - such that a user could... grab a field by TAB'ing to it and hitting Enter move it using Arrow…
blogofsongs
  • 2,527
  • 4
  • 21
  • 26
7
votes
1 answer

Angular Material CDK Overlay scroll block not working when in nav sidebar

I am adding a CDK overlay to a mat-sidenav. I would like to block scrolling on the mat-sidenav when the overlay is open. I create overlay with scrolling blocked: const overlayConfig = new OverlayConfig({ scrollStrategy:…
lostintranslation
  • 23,756
  • 50
  • 159
  • 262
7
votes
1 answer

Angular cdk drap drop - dynamic placeholder height

I want to set the placeholder height to height of dragging element. For now I'm using static height placeholder of smallest possible element height. I couldn't find any informations about how to do it and for now having no idea. component html
Smokovsky
  • 569
  • 1
  • 7
  • 21
7
votes
1 answer

Angular Material and CDK update 7 to 8 Migration Failure

I am attempting to update angular material and the cdk from version 7 to 8. Package update goes fine for both but the migration for both fail every time with a very "helpful" error of Cannot read property 'green' of undefined Migration failed.…
Brian Stanley
  • 2,078
  • 5
  • 24
  • 43
1 2 3
…
44 45