angular-material2

问题 Opening a dialog from Angular Material is slow if it contains more than a few buttons and a text field. I made a stackblitz to illustrate the problem. The dialog animates fast if it contains the following html: <h1 mat-dialog-title>Hi {{data.name}}</h1> <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat-form-field> </div> <div mat-dialog-actions> <button mat-button (click)="onNoClick()">No Thanks</button> <button mat

问题 Per Material Issue 9631 centering the mat-menu to the button is as follows. the issue is that supporting it deviates from the spec and may end up looking weird. I have a need for this functionality... Because writing my own CDK overlay would be more time intensive than overriding the mat-menu component... I am not interested in re-creating the mat-menu , and simply need the menu to be centered... I am also not interested in any other library's to accomplish this, I want to use Material mat

问题 1) I created this file src/theming.scss @import '~@angular/material/theming'; @include mat-core(); $primary: mat-palette($mat-light-blue); $accent: mat-palette($mat-amber , 700, A100, A400); $theme: mat-light-theme($primary, $accent) 2) I added this to .angular-cli.json "prefix": "app", "styles": [ "theming.scss", "styles.css" ], 3) Oh dear...my themimg is not showing..its a a yucky gray... <button mat-button color="primary" (click)="add()">Add Point!</button> Logic would dictate that the

问题 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

问题 Child Controls Loses Ripple Effect if [backgroundColor] property is set for mat-tab-group, is there any workaround.? Check this Stackblitz example to see the Issue 回答1: The ripple effect is working but we are not able to see it as the ripple color is white. It is taking white color because you have set backgroundColor to primary and your primary color is blue which has foreground white. The ripple automatically takes this foreground color. You can solve it by two methods By providing color to

问题 I am trying to extend Angular Material component to give custom CSS . I wish to use the same component but just change the CSS . If its theme, I can change the properties but I want to change the style which is hardcoded in the component. So, I am trying to extend the component. Here is what I did. @Component({ selector: 'my-tab-nav-bar', styles: [``] // custom css here }) export class TabNavBarComponent extends MdTabNavBar { } This fails as template is not specified . So I add template too.

问题 I'm using Angular 4 with Materials 2. I have successfully created some autocomplete fields using an array of data. Here my controller: sectorCtrl; allSectors filteredSectors: any; constructor() { this.sectorCtrl = new FormControl(); this.filteredSectors = this.sectorCtrl.valueChanges .startWith(null) .map(name => this.filterValues(name)); } filterValues(val: string) { return val ? this.allSectors.filter(s => new RegExp(`^${val}`, 'gi').test(s.label)) : this.allSectors; } And my template: <md

问题 I have a layout which contains of a toolbar at the top, a sidenav on the left, and the rest is content. The sidenav contains of a searchbox and a list of items. My desired outcome is that the sidenav height will be the size of the row it's in, and that the list will overflow and scroll inside that height. But I can't get the inner scroll to work, since the inner component's height is larger than the containing div's height, and setting height: 100% doesn't work. This is how it looks right now

问题 SO I have a component in my Angular application that has tabs for categories of data with an array of values for the content of the tab. I want to use HammerJS to swipe between the tabs for a more native experience. I have installed this virtual scroll package also: https://github.com/rintoj/angular2-virtual-scroll to handle the amount of items I am preparing for the lists under each mat-tab . I'll start by showing the data and the markup here: Here is building the dummyData just to show how

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 2 years ago . How can the default color of radio buttons be changed in Angular Material2? I read a few questions on this topic but none of them solve this problem. How can I set green, yellow and red color for an element with class md-radio-button ? 回答1: You can use this rule for the color of the center of your radio button :