angular-material2

问题 i have a large list and i want to load it as the user scroll down the select field but how can i get the scroll event in mat-select there is no event that fire the scroll event. <mat-form-field> <mat-select placeholder="Choose a Doctor" formControlName="selectedDoc" (change)="drSelected()"> <div *ngFor="let dr of doctors;let i = index" [matTooltip]="getDocDetail(i)" matTooltipPosition="right"> <mat-option (scroll)="docScroll()" [value]="dr"> {{dr.name}} </mat-option> </div> </mat-select> <mat

问题 In Angular-4 I am setting progress spinner like that <md-progress-spinner [color]="color" [mode]="mode" [value]="value" aria-label="Rating">Rating</md-progress-spinner> and the values in ts: color = 'warn'; mode = 'determinate'; value = 50; showText='Rating'; But I want to set some text inside the progress bar, I try to use angular-2 method but its not working in Angular-4 can anybody please tell me how its done in Angular-4 Angular-2 approach is to set [showText]='showText' 回答1: This feature

问题 There is an issue I have discovered with Ng-Idle, Material 6 nad Angular 6 "@ng-idle/core": "^6.0.0-beta.3" "@ng-idle/keepalive": "^6.0.0-beta.3" "@angular/core": "^6.1.9" "@angular/cdk": "^6.4.7" "@angular/material": "^6.4.7" The scenario when ever a user has gone idle, a dialog (popup) displays a countdown how long until the user is logged out of the system. If the user return prior to being logged out with mouse activity, the countdown will halt and the dialog will close/disappear. Issue

问题 I saw earlier that Angular2 launched the RC5 so I decided to update one of my test apps to see the changes and how to adjust. This app is using Material2, I also updated it to Alpha 7.2, but I'm getting this error when trying to use the md-button component "Template parse errors: Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]=

问题 Working with Angular Material2 mat-selection-list , Able to identify whether current option is selected or non-selected[Boolean]. compnenent.html <mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" > <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe'> {{shoe}} </mat-list-option> </mat-selection-list> component.ts export class ListSelectionExample { typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; onSelection(e, v){

问题 I am using the MatTable component from Angular Material to make a dynamic data table. I need to get the current position of a row. I can easily get the row on which the user clicked but I am unable to know its current position in the list (which depends on sort/filtering/pagination). Any idea? 回答1: in your mat-cell you can get index like *ngFor as below <mat-cell *matCellDef="let element;let i = index;"> {{ i }} </mat-cell> Update from Angular 5 use also index as i <ng-container matColumnDef=

问题 I have followed the instructions at angular material2 Getting Started to install @angular/material. Via Atom, I updated package.json, app.module, and beyond the Getting Started instructions, I updated systemjs.config, as follows: '@angular/material':'node_modules/@angular/material', I get these errors: zone.js:1274 GET http://localhost:3000/node_modules/@angular/material/ 404 (Not Found) (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/material(…) I

问题 I am using the Angular2 Material Design data table in my application and it's awesome. I was wondering if there is any way to get the index number or row number? Something like row.index ? I noticed in the CDK data table documentation that it mentions that "The directive also exports the same properties as ngFor (index, even, odd, first, last)" but does not have any examples how to get the index. Any help or guidance is greatly appreciated. Thanks! 回答1: You can get the row index the same way

问题 I am new to material2 I am trying to keep the the main app toolbar fixed on the top of the screen the problem is that the elevation is not working correctly (the content hides the drop shadow of the toolbar) I Here is my HTML code .app-content { height: calc(100% - 64px); overflow: auto; } <md-toolbar class="mat-elevation-z5" color="primary" style="z-index: 100!important;"> <button md-icon-button (click)="start.open()"> <md-icon class="demo-toolbar-icon">menu</md-icon> </button> <span>E

问题 I want to have tabs aligned at the bottom of the md-tab-group , like shown below: It is possible in Material 1 using md-tabs-align="bottom" . Is there anything available in Material 2 for this purpose? Here is my code: <md-tab-group> <md-tab label="Tab One"> Tab One Contents </md-tab> <md-tab label="Tab Two"> Tab Two Contents </md-tab> </md-tab-group> 回答1: For whomever may stumble across this question. The Tabs section of the component demo site references the following in the API Reference