There still isn’t much documentation about the Angular Overlay CDK. Most of what I’ve learned has come from their Github repo. Global Position Strategy This would be a global positioning strategy. The overlay you are creating would be positioned directly on the screen, not in relation to an element. This is good for a dialog … Read more
I’ve just had the same issue and have solved it using Will’s comment to the original post, adding a click handler with $event.stopPropagation to the cell as the direct parent to the button. I’ll add it here as a solution in case anyone else comes here looking for the same answer. I have a Material … Read more
After a full day of research, I found this pull request on Angular CDK repository on Github. Now, since I did not know how to integrate cdkDropListGroup into my example, I decited to create an array of IDs which will be added to [cdkDropListConnectedTo]. Each instance of my second list will have generated ID, and … Read more
You may use properties id and cdkDropListConnectedTo to link both lists: Component 1: <div cdkDropList id=”list-1″ cdkDropListConnectedTo=”list-2″ (cdkDropListDropped)=”drop($event)”> <div *ngFor=”let item of list” cdkDrag>{{ item }}</div> </div> Component 2: <div cdkDropList id=”list-2″ cdkDropListConnectedTo=”list-1″ (cdkDropListDropped)=”drop($event)”> <div *ngFor=”let item of list” cdkDrag>{{ item }}</div> </div> If you need to connect several lists to one list, you may … Read more
I found the solution here. It’s necessary to rewrite filterPredicate, and just use it as usual, filterPredicate needs to return true when filter passes and false when it doesn’t export interface Element { name: string; position: number; weight: number; symbol: string; } dataSource = new MatTableDataSource(ELEMENT_DATA); /* configure filter */ this.dataSource.filterPredicate = (data: Element, filter: … Read more
Not sure if this will help your situation as there’s no code but we’ve found that the MatTable loads very slowly if a large data set is set before you set the datasource paginator. For example – this takes several seconds to render… dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource(); @ViewChild(MatSort) sort: MatSort; @ViewChild(MatPaginator) paginator: MatPaginator; ngOnInit() … Read more
If you are using Angular 10+ and following Awadhoot’s answer, PortalInjector is now deprecated so instead of: new PortalInjector(this.injector, new WeakMap([[SOME_TOKEN, data]])) You now have: Injector.create({ parent: this.injector, providers: [ { provide: SOME_TOKEN, useValue: data } ] })
CDK is the short form of component dev kit. This signifies that these are general-purpose tools for building components that are not coupled to Material Design From the material2 changelog Several components in core/, such as Overlay, have had their prefix changed to cdk- (short for “component dev kit”). This signifies that these are general-purpose … Read more