angular-material2

问题 I want to prevent mat-option from being selected because clicking on it will open a dialog. Only when selecting something from the dialog, should my option be selected. If nothing was selected from the dialog, mat-option should not be changed from previous value. <mat-select [(ngModel)]="filter_defaultSelectedValue" (change)="changeSelectedValue($event.value)"> <mat-option *ngFor="let filter of filters" [value]="filter"> <span *ngIf="filter.id != 'custom'; else content_dialog"> {{filter.label

问题 I've been staring at this for too long, and I can't figure it out. There's a good example of an Angular Material table with an expandable row in this stackoverflow answer. I can plug the example into my app, and it works correctly. I'm failing to apply the example to my data. I think my problem is in the HTML, since the table renders, the expanded row CSS seems to get applied (the row delineation disappears on clicking the first row), but the expansion row does not appear. Does anyone see the

问题 I have an Angular 5 app that must use Angular Material's mat-select inside a Bootstrap modal. The issue is that the dropdown options appear behind the modal. My code looks like this: <mat-form-field class="mdb-form-field form-adjustments"> <mat-select placeholder="What fruit are you looking for?" [formControl]="fruitType" [(ngModel)]="defaultFruitType"> <mat-option *ngFor="let fruitType of fruitTypes" [value]="fruitType">{{ fruitType }} </mat-option> </mat-select> </mat-form-field> I know I

问题 I have a input component from angular material: <input mdInput placeholder="Name" disabled floatPlaceholder="never"> I have two issue: How do I change the underline to bold from dotted when in disabled state? I know the APIs don't specifically say it but is there any way to to make the floatPlaceholder property work here. (The API only mentions the use of this property for md-select ). 回答1: 1. How do I change the underline to bold from dotted when in disabled state? Use ViewEncapsulation to

问题 I have a input component from angular material: <input mdInput placeholder="Name" disabled floatPlaceholder="never"> I have two issue: How do I change the underline to bold from dotted when in disabled state? I know the APIs don't specifically say it but is there any way to to make the floatPlaceholder property work here. (The API only mentions the use of this property for md-select ). 回答1: 1. How do I change the underline to bold from dotted when in disabled state? Use ViewEncapsulation to

问题 I set up a linear stepper using the Angular Material 2 Stepper. I have forms in different components (component-a, component-b, component-c). In my main container component (container-component) I want to have linear stepper that 'steps' through each component when their form is valid. Is there some sort of functionality to talk up to the stepControl in the stepper to make it properly work? I have attached documentation for the stepper and a StackBlitz version of the application. Also, a link

问题 I am new to angular 2 and material design. I would like to know how to style the slide-toggle button to be smaller. <div class="example-section"> <mat-slide-toggle class="line-toggle" <span class="font-size-12">Slide Me</span> </mat-slide-toggle> </div> The css is as below .example-section { display: flex; align-content: center; align-items: center; height: 18px; margin-top: -12px; } .line-toggle{ height: 10px; line-height: 8px; } I would like to decrease the size of the button and reduce the

问题 I have created an autocomplete field with Angular Material and getting country list from web api succesfully. CountryID -> item value(or index) Country -> item text When I try to get selected item's value (not text) it return the text as expected. But I need to get selected item's value. This is my code: this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France and <md-input-container> <input mdInput placeholder="Select Country..." [mdAutocomplete]=

问题 My question is how we can disable button or checkbox animation in angular material widgets? There are some css solutions to override transition with none but it s not working. Thanks, 回答1: You can disable animation using @.disabled property which is introduced in angular 4.3.1. Either add below code to your component @HostBinding('@.disabled') disabled = true or in your html <div [@.disabled]="expression"></div> Here is working plnkr https://plnkr.co/edit/sVJM8H?p=preview 回答2: try this: <mat

问题 Does any one know how to programmatically open or close mat-select? As pert the api there are methods for open and close but don't know how to call those methods from component and there isn't any example showing that on site. Thanks 回答1: In order to access these properties you need to identify the DOM element and access it with a ViewChild : component.html <mat-select #mySelect placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }} <