angular-material2

问题 I'm learning about angular ViewChild currently, but I seem to be missing something when using ViewChild to select custom reference variables from the DOM. In my template I have two tables: <mat-table #eventTable [dataSource]="eventDataSource" matSort> <mat-table #eventDateTable [dataSource]="dateEventDataSource" matSort> I am attempting to target them with a sort for each: @ViewChild('eventTable') eventTableSort: MatSort; @ViewChild('eventDateTable') eventDateTableSort: MatSort; Then I

问题 I am trying to add angular material2 to my project. (I use angular-cli) However, I get the following error when I run ng serve : material.es5.js:177 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming Although I added it to my global style file. @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; How can I fix it? Thank you. 回答1: in your angular-cli

问题 I am working on creating a multi-select drop down in Angular 2 using Material Design. There is a hierarchy in the data elements and I need to implement the Parent-Child selection logic similar to a typical tree structure, wherein upon selecting the parent, all children get selected and de-selecting the parent, de-selects all children. That part is working fine for me. However, I'm facing an issue in showing the state of parent when a partial list of children is selected. In that condition, I

问题 I have a input field in which i want to show the value of the matSlider <div class="col-lg-4 col-md-4 col-sm-12"> <mat-slider class="example-full-width" [max]="" [min]="min" [step]="step" [thumb-label]="thumbLabel" (input)="onInputChange($event)"></mat-slider> </div> <div class="col-lg-2 col-md-2 col-sm-12"> <mat-form-field class="example-full-width"> <input type="number" matInput formControlName="txtMinPriceRange" placeholder="Minimum" [value]="minValue"> </mat-form-field> </div> right now I

问题 I am trying to decrease the padding, on an angular material stepper component, since I am developing a compact from this: To remove the padding here: Ibn the official angular material documentation, they point out that you should create a specific selector. I just don't know how to do that. I have tried the following: In the chrome tools, I have found a CSS class .mat-horizontal-stepper-header . I am trying to decrease the padding from 24 pixels to 10px like this: .mat-horizontal-stepper

问题 I am trying to get the autocomplete to display one parameter of object but save another and so far it doesn't seem to be behaving. Code is as per Material2 Autocomplete site: Autocomplete The difference is that [value] i want to save 'option.Id' and not 'option'. The error is that while it records the option.Id it doesn't actually display the value in input field (leaves it blank). my-comp.html <md-input-container> <input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">

问题 I am using angular material 2 tabs and i wanted to have next button in one tab which navigates to another tab after clicking it. What should i need to use to achieve that functionality? 回答1: Its preety simple : <mat-tab-group class="demo-tab-group" #matgroup> .... </mat-tab-group> <button (click)='matgroup.selectedIndex = 2'>Go Next</button> WORKING DEMO 来源： https://stackoverflow.com/questions/48313792/how-to-do-navigation-after-button-has-been-clicked-using-angular-material-2-tabs

问题 I wonder if it is possible to change the icon displayed using the datePicker of angular material. This is the code from the angular material docs. <md-input-container> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker> Is there a way to achieve that? 回答1: You can add a mat-icon custom in mat-datepicker-toggle <input matInput [matDatepicker]="dp" placeholder=

问题 Hopefully, this is a stupid question. I just added a md-slider to a project I am building for my employer. (thus I have no code to show sorry) I Imported MdSliderModule into the module I'm working in. Added the tag in my template where I wanted it. It showed up and looks great but won't drag. I can click on it to change its value but I can't drag it. Am I missing something? Does Angular have a Dragging module this component uses that I need to import? Has anyone else seen this? We are using:

问题 How can I animate Angular Material 2 dialog? I tried using the normal Angular 2+ animation theory. it works, but what happens is the elements on the dialog get animated (as expected), and the dialog simply stays. But what I want is the dialog itself should animate, for example, the opacity should go from 1 to 0 in a couple of seconds. I also checked whether the MdDialog.close() method has any options to animate, but there seems nothing. Animating the opacity of a dialog from 1 to 0 (before