angular-cdk

问题 I'm trying to use the Angular Material CDK DragDrop module from https://material.angular.io/cdk/drag-drop/overview With the cdkDropListDropped event I can prevent dropping but it shouldn't be dragged either. How can I tell a cdkDropList or each cdkDrag elements to disable dragging? <div class="list-group" id="orderlist" cdkDropList (cdkDropListDropped)="drop($event)"> <a class="list-group-item" [class.linked]="ord.linkedToPrevious" [class.selected]="ord.selected" *ngFor="let ord of items"

问题 I've got a nested tree (Not the tree component) of drag and drop lists. When dragging items around in drop lists that are contained inside of another drop list - Enter / Exit events are firing for both drop lists, meaning that when an item is dropped it could either be dropped into the inner drop list or the container drop list depending where it was dropped (Note: These lists are all linked to each other) I'm thinking at the moment that the best solution will to be suppress events firing for

问题 I'm using mat-table. It has a filter which works fine with doc example: From https://material.angular.io/components/table/overview, the original code is: <div class="example-header"> <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> </mat-form-field> </div> <mat-table #table [dataSource]="dataSource"> <!-- the rest of the code --> </mat-table> export class TableFilteringExample { displayedColumns = ['position', 'name', 'weight', 'symbol'];

问题 We recently transitioned our scrollable lists to CDK Virtual Scroller. (Angular 7.2.12 with angular/cdk 7.3.7) In short, it seems that the VirtualScrollViewport is recycling component instances, not just the template as the documentation suggests. Live MCVE on StackBlitz (updated to reflect EDIT 1). EDIT 1 A colleague reminded me that we're now using named references instead of ViewChildren() , like so: HelloComponent (inside the *cdkVirtualFor ): @Component({ selector: 'hello', template: `

问题 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 draggable elements don't fit in the container, they wrap into a second line and so on. As the dragging is horizontal ( cdkDropListOrientation="horizontal" ), this works fine when all elements fit in a single line, but as soon as they wrap to a second

问题 How to add a new row into Angular Material table manually from a input field. Please see this image in that if i add a state name and state code it should present in the following table please help me how to achieve it using Angular 4. 回答1: I've put together a quick example that should give you a good hint as to where to start from: Working demo This works by using two-way data binding on the input field to keep track of what the user typed in the form. When the add button is then pressed,

问题 I would like to use the new Portal from material CDK to inject dynamic content in multiple part of a form. I have a complex form structure and the goal is to have a form that specify multiple place where sub components could (or not) inject templates. Maybe the CDK Portal is not the best solution for this? I tried something but I am sure it is not the way of doing: https://stackblitz.com/edit/angular-yuz1kg I tried also with new ComponentPortal(MyPortalComponent) but how can we set Inputs on

问题 I'm using angular material in my project and I'm using Mat-Table to render 1000 Product/row per table. When Change pagination (we use backend pagination) of table to 1000 rows the performance become very slow I even can't write in textboxes. I tried to debug the issue so I put logs on one column template so I can see how's render works. I see it's Rerender all rows even if I hover on the table headers. Is there's any possibilities to control the change detection to be like

问题 I have used Angular Material in my application and I have two mat-table with sorting on single component but my sorting is working only on first table here is ts code @ViewChild(MatSort) inventoryDataSort: MatSort; @ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator; @ViewChild(MatSort) additionalDataSort: MatSort; @ViewChild(MatPaginator) additionalDataPaginator: MatPaginator; ngAfterViewInit() { this.inventoryDataSource.sort = this.inventoryDataSort; this.inventoryDataSource

问题 I have an angular mat-tree with parent, child and grand child level. On clicking of child I am adding grandchild in it. But grandchild having huge data upto 4k records. Which is making tree extremely slow. My code as below <div *ngIf="isGrandChildLoaded"><mat-spinner></mat-spinner></div> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <!-- This is the tree node template for leaf nodes --> <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> <!-- use a disabled button