angular-material

问题 Angular material creates overlay containers for various components such as their menu, snackbar and dialog components. How can I, in an easy way, decide which element a cdk-overlay-container should be appended to? Currently, it's appended to the body element. So if I trigger full screen mode for any other element than the body element, it won't be seen. Which of course is not what I want. 回答1: Basically create a class that extends OverlayContainer . Override the getContainerElement method

问题 I'm trying to use the new Angular 7 CDK Drag and drop to move a list of elements. But didnt found any option to swap element mostly all the example given are for sorting elements. https://stackblitz.com/angular/pxgqrvaqbxeg?file=app%2Fcdk-drag-drop-sorting-example.ts cdk-drag-drop-sorting-example.htm <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div> </div> cdk-drag-drop-sorting-example.ts

问题 I am using md-menu-item elements in my md-menu . The menu is activated by a button - all is working fine and all uses default angular js. Within each md-menu-item I have md-select inputs. It looks like this: ... <md-menu-item> <md-input-container> <label>My Label</label> <md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)"> <md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'"> {{foo.name}} </md-option> </md-select> </md

问题 I have a Mat Select dropdown with the following values from an Object List. export class Product { productId: number; productCode: string; productDescription: string; } The Mat select List is meant to emit the Whole object as follows: <mat-form-field> <mat-select formControlName="productData" [compareWith]="compareProductObjects" <mat-option>Select</mat-option> <mat-option *ngFor="let productItem of ProductList" [value]="productItem"> {{productItem.productDescription}} </mat-option> <mat

问题 I'm learning how to use mat-tree following the docs, but now I need to use a data source tree that has not only strings defined in it, because when I click a node I need to know its id. This is the stackblitz of my project. Basically I need to use this tree with checkboxes that I've built following the docs, but now my data source is this: const TREE_DATA:TodoItemNode = { item: "First item", children: [{ item: 'Second item', children:[ { item: "Third item", id: 3 } ], id:2 }], id:1 } So I

问题 I'm learning how to use mat-tree following the docs, but now I need to use a data source tree that has not only strings defined in it, because when I click a node I need to know its id. This is the stackblitz of my project. Basically I need to use this tree with checkboxes that I've built following the docs, but now my data source is this: const TREE_DATA:TodoItemNode = { item: "First item", children: [{ item: 'Second item', children:[ { item: "Third item", id: 3 } ], id:2 }], id:1 } So I

问题 I'm learning how to use mat-tree following the docs, but now I need to use a data source tree that has not only strings defined in it, because when I click a node I need to know its id. This is the stackblitz of my project. Basically I need to use this tree with checkboxes that I've built following the docs, but now my data source is this: const TREE_DATA:TodoItemNode = { item: "First item", children: [{ item: 'Second item', children:[ { item: "Third item", id: 3 } ], id:2 }], id:1 } So I

问题 I'm learning how to use mat-tree following the docs, but now I need to use a data source tree that has not only strings defined in it, because when I click a node I need to know its id. This is the stackblitz of my project. Basically I need to use this tree with checkboxes that I've built following the docs, but now my data source is this: const TREE_DATA:TodoItemNode = { item: "First item", children: [{ item: 'Second item', children:[ { item: "Third item", id: 3 } ], id:2 }], id:1 } So I

问题 When using @angular/cdk/drag-drop module (Angular Material Drag and Drop)... Is there any way to limit drop container so to accept only one value instead of multiple values? I am trying to create form where user can drag image and drop into field which should have only one item. I am using standard example code for implementation from Drag and Drop | Angular Material but cannot find solution where number of dropped items can be limited, and second cannot find solution to keep Drag list the

问题 I wanna know if it's possible have a "mix" of mat-select and mat-chip-list . In the chip-list , I want to show the selected options from mat-select . If it is, how can I do it? 回答1: Yes, it is possible. You need to use <mat-select-trigger> within <mat-select> . Inside <mat-select-trigger> place <mat-chip-list> . In your HTML template you need something like: <mat-form-field> <mat-label>Toppings</mat-label> <mat-select [formControl]="toppingsControl" multiple> <mat-select-trigger> <mat-chip