angular-material2

问题 I am using @angular/material in my Angular 5 app. The version of Angular Material I am using is 5.0.2. I am using @angular/animations 5.1.2. I have a very simple use case of the slider, like this: <mat-slider style="width:100%;"></mat-slider> but for some reason, when dragging the slider handle, it does not move to its new position until the mouse is released, which is obviously not very good. I have checked the Material demo and that works as expected: the slider moves on mouse move, and

问题 The problem I'm having is the following: the behaviour I need is, when an option is selected from the autocomplete input, it should add a chip to the Angular Material Chips component (which it does) and it should also clear the autocomplete input, so I can then select another options. This is my html: <div class="col-md-6"> <md-form-field> <input type="text" placeholder="Categoría" aria-label="Categoría" mdInput [mdAutocomplete]="auto" [formControl]="categoryCtrl"> <md-autocomplete #auto=

问题 We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like " custom-tabs ". Using the components of MatTabModule directly works like a charm, whereas when using our custom components the projected content does not show up. Usage looks very similar to the Angular Material API: <custom-tabs> <custom-tab [label]="labelA"

问题 I want to use the icons from https://materialdesignicons.com/ in my angular 4 project. The instructions on the website are only covering how to include it in Angular 1.x (https://materialdesignicons.com/getting-started) How can I include the Material design icons so I can use them like <md-icon svgIcon="source"></md-icon> using Angular Material and ng serve ? NOTE: I already Included the google material icons which are different! 回答1: Simply follow these steps: Download mdi.svg from here

问题 What I'm Using Angular Angular Material ^2.0.0-beta.12 What I'm doing I just started a new project and installed material When copying some syntax from a previous project, I get an error when trying to import 'import { MdInputModule} from '@angular/material'; After digging through the typings, it looks as though it's now changed to 'MatInputModule' I've updated my module to use 'MatInputModule' Now the HTML throws an error 'md-form-field' is not a known element: This is using the syntax

问题 I have the following piece of code for md-input-container using angular material design: <md-input-container> <input mdInput [placeholder]="'common.password' | translate" type="password" formControlName="password" (change)="onPasswordChange($event.target.value)" required validate-onBlur/> <md-hint *ngIf="frmLoginInfo.controls.password.pristine" class="s-text-caption s-hint">{{ 'signup.pwdRule' | translate }}</md-hint> </md-input-container> This container has a div inside with class (mat-input

问题 I want to use Angular Material Datepicker to get a date into my page. I use this code, but cannot figure out how to access the selected value correctly. <md-input-container> <input mdInput [mdDatepicker]="myDatepicker"> <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button> </md-input-container> <md-datepicker #myDatepicker></md-datepicker> I tried the [value] field in input but how can I get the date to send it to my backend? Thanks. 回答1: You can access the datepicker value by using

问题 I am using mat-tree with mat-nested-tree-node in Angular 6. What I want is to load the data dynamically when the user toggles expand icon. Using the dynamic data example of Flat Tree given in Material Examples I have tried to use the same concept for Nested Tree . This is what I have tried so far https://stackblitz.com/edit/angular-naarcp But it only shows the data which was prepopulated in the data array although in the console it is clear that data is getting updated but it never gets shown

问题 Hi I am new to Angular Material and I want to create grid of cards of the form r rows c columns (r X c) dynamically. e.g If I have 5 users then it should create r=3 and c=2 as follows. user1 user2 user3 user4 user5 I achieved it as follows: <md-grid-list cols="2" rowHeight="200px" gutterSize="10px"> <md-grid-tile class="divcls" *ngFor="let user1 of users"> <md-card fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px"> <md-card-title>User : {{user1.name}}</md-card-title> <md

问题 So I have an Angular 2 Material application. And all I wanna do is just switch/toggle theme from dark to light by clicking simple button . How can I do it ? 回答1: In your menu : app.component.html : <div [class.dark-theme]="isDarkTheme"> <!--Your application content here--> <md-menu #more="mdMenu"> <!--Your content here--> <button md-menu-item (click)="changeTheme()"> Change Theme </button> </md-menu> </div> app.component.ts : // import statements here import {Component} from '@angular/core';