Cypress – Drag & drop – Angular CDK

Issue Having a simple implementation of the Angular CDK drag & drop, with cypress. Having latest versions of all packages, all the questions & solutions around wont work. Basically, the drag & drop wont eve fire. Tried with https://www.npmjs.com/package/@4tw/cypress-drag-drop https://docs.cypress.io/api/commands/trigger

Continue reading

Cypress – Drag & drop – Angular CDK

Issue Having a simple implementation of the Angular CDK drag & drop, with cypress. Having latest versions of all packages, all the questions & solutions around wont work. Basically, the drag & drop wont eve fire. Tried with https://www.npmjs.com/package/@4tw/cypress-drag-drop https://docs.cypress.io/api/commands/trigger

Continue reading

Cypress – Drag & drop – Angular CDK

Issue Having a simple implementation of the Angular CDK drag & drop, with cypress. Having latest versions of all packages, all the questions & solutions around wont work. Basically, the drag & drop wont eve fire. Tried with https://www.npmjs.com/package/@4tw/cypress-drag-drop https://docs.cypress.io/api/commands/trigger

Continue reading

md-table in Angular Material 2

Issue I am working with Angular Material Table. In Html code, there is <ng-container cdkColumnDef=”userId”> <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> <md-cell *cdkCellDef=”let row”> {{row.id}} </md-cell> </ng-container> I found out that cdkHeaderCellDef and cdkCellDef are from CDK Table I am getting error

Continue reading

Unable to sort a table using angular material2

Issue I have an Angular material table. The HTML is below: <act-toolbar [leftColor]=”‘blue'” [rightColor]=”‘blue'”></act-toolbar> <mat-spinner *ngIf=”!dataSource” style=”margin:218px 45%”></mat-spinner> <div fxLayout=”column” *ngIf=”dataSource”> <div class=”example-filter-box” fxLayout=”column”> <h4 class=”act-section-header”>COMMITTEE SELECTION</h4> <form class=”example-form”> <mat-form-field class=”example-full-width” shouldPlaceholderFloat=”false”> <input matInput (keyup)=”applyFilter($event.target.value)” placeholder=”Please enter CAMS Check Name

Continue reading

Angular 4 showing json in a table

Issue I have the following JSON: { “0”: { “open”: 93.3, “high”: 96, “low”: 93.3, “close”: 95.04, “volume”: 358172, “score”: “100”, “symbol”: “ZBRA”, “company_name”: “Zebra Technologies Corp.”, “company_sector”: “Industrial Goods” }, “1”: { “open”: 19.1396, “high”: 19.5578, “low”: 18.7612, “close”:

Continue reading

How to drag element to another container?

Issue I use cdkDrop from Material and this is my code: TS: import { Component } from ‘@angular/core’; import { CdkDragDrop, CdkDrag, moveItemInArray, CdkDropList, transferArrayItem } from ‘@angular/cdk/drag-drop’; @Component({ selector: ‘cdk-drag-drop-custom-preview-example’, templateUrl: ‘cdk-drag-drop-custom-preview-example.html’, styleUrls: [‘cdk-drag-drop-custom-preview-example.css’], }) export class CdkDragDropCustomPreviewExample {

Continue reading

Row index is not available in Angular CDK table

Issue I have a simple table like this <table cdk-table [dataSource]=”doors” [multiTemplateDataRows]=”true” class=”table table-hover”> <ng-container cdkColumnDef=”width”> <th cdk-header-cell *cdkHeaderCellDef>Width</th> <td cdk-cell *cdkCellDef=”let row; let idx = index;”> Index: [{{idx}}] <span *ngIf=”idx === undefined”>undefined</span> <span *ngIf=”idx === null”>null</span> </td> </ng-container> <tr

Continue reading

Itemsize of cdk virtual scroll

Issue I noticed when I put the itemSize of the cdk virutal scroll to a lower amount the loading time of the page is almost double the amount. There is a hugh differents between <cdk-virtual-scroll-viewport [itemSize]=”45″ and <cdk-virtual-scroll-viewport [itemSize]=”20″(a table

Continue reading

Get drop position of item in cdkDropList

Issue I’m trying to get (or calculate) the x/y coordinates of a dropped item in an angular-material cdkDropList. I’ve studied the documentation https://material.angular.io/cdk/drag-drop/api#CdkDragDrop and found there should be a property called “distance” in the CdkDragDrop interface but I can’t find

Continue reading

event propagation cdk drag

Issue How can I prevent dragging when I’m inside my input and I’m dragging around. I only want the pink-meat to act as a drag-handle. !!! STACKBLITZ !!! html <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let movie of movies" cdkDrag>

Continue reading

Add component dynamically with cdk/ComponentPortal

Issue I’m trying to add a component dynamically using cdk’s ComponentPortal @Component { selector: ‘my-app’, template: ‘<div #container></div>’, styleUrls: [ ‘./app.component.css’ ] } export class AppComponent { @ViewChild(‘container’, {read: ViewContainerRef, static: false}) container; ngAfterViewInit(): void { const dialogContent = new

Continue reading