Questions tagged angular-cdk

Explore the latest questions and answers asked by our top developers.

angular cdk drag & drop Directly by click event Instead of dragging

angular cdk drag & drop : how drag item to done List Directly by click event Instead of dragging For example on the ‘jotform’ site , when we click on each item in Left section Items, it performs operations automatically and drag it to main list Source: Angular Questions

Use *ngIf inside cdkVirtualscroll

What is the correct way to use *ngIf inside cdkVirtualScroll? When *ngIf is used dynamically the size of the cdk port remains same, which distorts the view. Source: Angular Material Quesions

Draggable Form Array In angular

I’ve encountered a bug while using mat drag and drop in form array. Here is my .html code <div class="select-group1 table-annual-wheel mat-elevation-z8" class="" *ngIf="isSectionVisible"> <mat-table id="table1" #table mat-table [dataSource]="dataSource[sectionIdx]" width="100%" cdkDropList [cdkDropListData]="dataSource[sectionIdx].data" (cdkDropListDropped)="dropTable($event,sectionIdx)"> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef>Order</th> <td mat-cell *matCellDef="let element"> <mat-icon style="pointer-events: all;" cdkDragHandle>reorder</mat-icon> </td> </ng-container> <ng-container matColumnDef="label"> <th mat-header-cell *matHeaderCellDef> LABEL </th> […]

How do dynamically adjust size/height of CDK VIrtual scroll?

I am displaying a grid using CDKVirtualFor (which is basically an array of rows with list of array in every row for different cells/units). On selection of a certain checkbox filter sets the hide property of row to true. The grid internally uses <tr *ngIf=""> to hide/show a row. The problem is that on clicking […]

By sachin hajare
Categorized as angular, angular-cdk, angular8 Tagged , ,

Solving Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts

> ng serve form-contact –port 4200 -o ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Size styles.css, styles.js | styles | 348.46 kB polyfills.js | polyfills | 345.50 kB vendor.js | vendor | 343.68 kB runtime.js | runtime | 6.15 kB main.js | main | 1.89 kB | Initial Total | […]

By QA Col
Categorized as angular, angular-cdk, angular-material Tagged , ,

cdkConnectedOverlay stop positioning after update

I have a template: <ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]="show$ | async" [cdkConnectedOverlayOrigin]="{ elementRef: sidebarContainer }" [cdkConnectedOverlayPositions]="sidebarPositions" [cdkConnectedOverlayHeight]="’100%’" [cdkConnectedOverlayFlexibleDimensions]="true" [cdkConnectedOverlayHasBackdrop]="true" [cdkConnectedOverlayBackdropClass]="’not-existing-class’" (backdropClick)="close()" > in package version @angular/[email protected], everything works fine but after updating to @angular/[email protected] my sidebar can’t render to sidebarContainer and render directly to ‘body’ What should I do to fix this behaviour or it’s some bug […]

By henaro
Categorized as angular, angular-cdk, angular-material Tagged , ,

Resize pop up window

I have a parent window and a popup window . I have few text areas in the pop up window and I am using cdkTextAreaAutosize for resizing . But it is not working when stretching the pop up window . I have the code in the component as : @ViewChildren(CdkTextareaAutosize) textareaAutosizes: QueryList<CdkTextareaAutosize>; ngAfterViewInit() { this.textareaAutosizes.forEach(autosize […]

By Irfan
Categorized as angular, angular-cdk, html, textarea, typescript Tagged , , , ,

angular-cdk primeng angular 8: Need a way to drag and drop a row from one grid to another grid

Is there any package or any way in angular to drag and drop a row from one grid to another grid using CDK primeng angular 6? Source: Angular Questions

By Ashly
Categorized as angular, angular-cdk, primeng-datatable Tagged , ,

NG-ZORRO and Angular CDK infinite scroll is not working well

I’m using cdk virtual scrolling in an Angular project with Ng-zorro. I have a list of collapse component and in that list is where I use the virtual scrolling. The problem is that when I open a collapse, if the content is bigger than the window heigth, when I scroll another collapse is open. I […]

"@angular/cdk": "^12.2.0", mismatch with angular material "@angular/material": "^13.1.1",

Don’t say "downgrade version" to this question. I cant do it because management want to maintain the latest versions. Is there any other alternatives…like converting mjs to js file in angular project? Getting error during "ng serve" My packaje.json include below dependencies "dependencies": { "@angular/animations": "~11.1.1", "@angular/cdk": "^12.2.0", "@angular/common": "~11.1.1", "@angular/compiler": "~11.1.1", "@angular/core": "^11.2.14", "@angular/fire": […]

1 2 3 21

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us