angular-cdk

Is there a way to dynamically create drop zones? I'm having some troubles with ngFor and cdkDropList. Here is my first list and draggable elements: <div class="subj-container" cdkDropListOrientation="horizontal" cdkDropList #subjectList="cdkDropList" [cdkDropListData]="subjects" [cdkDropListConnectedTo]="[lessonList]" (cdkDropListDropped)="drop($event)" > <div class="subject" *ngFor="let subject of subjects" cdkDrag> {{subject.name}} </div> </div> And here is my second list: <div class="conta" cdkDropList #lessonList="cdkDropList" [cdkDropListData]="appointment.lessons" [cdkDropListConnectedTo

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 the container list if the drag is currently over an inner list but I'm not sure if this is the best

I have a list that has many items and each item can be selected. For this I use Angular Material Virtual Scroll. When an item is selected, the selected item is highlighted and then is saved on the server. When I refresh the page, the selected item comes from the server and is again highlighted. My code looks like <cdk-virtual-scroll-viewport itemSize="40" class="wrapper"> <div *cdkVirtualFor="let item of list" [class.selected]="item.id === selectedItem.id"> </div> </cdk-virtual-scroll-viewport> The problem is that if a select an item that is down in the list, it is highlighted, but I have to

My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message Cannot set property 'sort' of undefined at ViewFeedbackComponent.ngAfterViewInit There is already a SO post on this issue (see following link) Mat-table Sorting Demo not Working but I still am not able to get it working. Does somebody spot the issue? The official example works with a "static" MatTableDataSourcedefined in the component itself, I am querying from my back-end, however. Any help is greatly appreciated! MatSortModule is already

The Angular Material CDK provides a Directive CdkScrollable , which allows you to listen to ScrollEvent s of a specific container. I am now trying to access the CdkScrollable of the MatSidenavContent , which is added by default. However my @ViewChild(CdkScrollable) and @ContentChild(CdkScrollable) are always undefined. My Component looks something like this: <mat-sidenav-container> <mat-sidenav>Sidenav content</mat-sidenav> <div>Main content</div> </mat-sidenav-container> The resulting DOM looks something like this: <mat-sidenav-container> <div class="mat-drawer-backdrop"></div> <div tabindex=

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 ChangeDetectionStrategy.OnPush Not sure if this will help your situation as there's no code but we've found that the