angular-material-7 | 易学教程

Use font awesome 5 on angular material 7

阅读更多关于 Use font awesome 5 on angular material 7

问题 I'm using angular 7.0.1 and angular material 7.0.2, I want to add the font awesome 5.4.2 icons and I'm trying to follow the steps on fontawesome web but I can't get the font awesome icon font. first: npm install --save-dev @fortawesome/fontawesome-free then in styles.scss add: @import '~@fortawesome/fontawesome-free/scss/fontawesome.scss'; and in _variables.scss add: $fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; now in app.component.ts add: import { MatIconRegistry } from "

Use font awesome 5 on angular material 7

阅读更多关于 Use font awesome 5 on angular material 7

Angular material drag and drop - merge elements

阅读更多关于 Angular material drag and drop - merge elements

问题 I'm building and app where there are multiple items rendered in set of columns. (For sake of demonstration let's say 4 columns) I'm trying to achieve functionality of dragging and dropping items onto each other which will result in merge of those two items. typescricpt data structure Details{ id:number; columns:Column[]; } Column{ id:number; item:Item[]; } Item{ id:number; text:string; } So I have details component with : <div fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap="5px"

Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll

阅读更多关于 Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll

问题 I'm using angular-material Autocomplete (version 7) for my application. I'm using <cdk-virtual-scroll-viewport> inside . Besides numerious problems I've resolved, there is one I don't understand: the dropdown menu doesn't display when I add max-height css, and if I add height, it will display but in fixed height. Here is part of my code: html: <mat-form-field class="single-select"> <input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl"

Invert “checked” value of a mat-checkbox

阅读更多关于 Invert “checked” value of a mat-checkbox

问题 When a Angular Material mat-checkbox (https://material.angular.io/components/checkbox/overview) is checked it has the value "true". When it is unchecked it has the value "false". Is there a way to turn this behaviour around? I need just the opposite. A checked checkbox should serialize to "false" and a unchecked one should serialize to "true" when calling this.filterFormGroup.getRawValue() . I was hoping that there is something like this: <mat-checkbox [myCustomCheckedValue]="false"

how to add a secondary action in mat-list-option (mat-selection-list) item

阅读更多关于 how to add a secondary action in mat-list-option (mat-selection-list) item

问题 How is it possible, to add an secondary action (mat-icon-button) in an mat-selection-list inside the mat-list-option element. Currently all items are added inside the mat-list-text div. example (https://stackblitz.com/edit/angular-dwac7y): <mat-selection-list [(ngModel)]="selectedOptions"> <mat-list-option *ngFor="let item of items;" [value]="item.id" [disableRipple]="true"> <mat-icon matListAvatar>person</mat-icon> <h3 matLine> {{item.name}}</h3> <p matLine> {{item.details}} </p> <button mat

Angular : Dynamically push data to observable without changing value in input

阅读更多关于 Angular : Dynamically push data to observable without changing value in input

问题 I have used mat-autocomplete with Angular material 7. this.salesPickerAutoComplete$ = this.autoCompleteControl.valueChanges.pipe( startWith(''), debounceTime(400), distinctUntilChanged(), switchMap(value => { if (value && value.length > 2) { return this.getSalesReps(value); } else { return of(null); } }) ); getSalesReps(value: string): Observable<any[]> { const params = new QueryDto; params.$filter = `substringof('${value}',FirstName) or substringof('${value}',LastName)`; params.$select =

Angular Material 7 Drag and Drop x and y coordinates

阅读更多关于 Angular Material 7 Drag and Drop x and y coordinates

I have a container with an element inside it. I want to be able to drag the element to another location inside the container and see the new x and y coordinates (where x=0 and y=0 is the top left corner of the container). I have a basic stackblitz set up at https://stackblitz.com/edit/material-6-mjrhg1 , but it won't show the entire event object in the console ("object too large"). In my actual application, I can look through the entire event object, but I can't find any properties describing the new x and y locations. The basic setup is this: <div style="height: 200px; width=200px; background

Angular Material 7 Drag and Drop x and y coordinates

阅读更多关于 Angular Material 7 Drag and Drop x and y coordinates

问题 I have a container with an element inside it. I want to be able to drag the element to another location inside the container and see the new x and y coordinates (where x=0 and y=0 is the top left corner of the container). I have a basic stackblitz set up at https://stackblitz.com/edit/material-6-mjrhg1, but it won't show the entire event object in the console ("object too large"). In my actual application, I can look through the entire event object, but I can't find any properties describing

CdkDragDrop and ngTemplateOutlet

阅读更多关于 CdkDragDrop and ngTemplateOutlet

问题 I'm trying to use Drag&Drop features relased with Angular Material 7. I separated my template in reusable pieces using ngTemplateOutlet and every option can be either a Thing ™ or a nested Thing ™ which have some more sub-Things ™. Nested Things ™ are displayed as an expansion panel. I want all the first-level Things ™ to be re-orderable as if thery were a list. ( Ok, ok, it's obvious that's a reorderable sidenav with normal and nested options, just pretend it's not so obvious ) This is the