angular-material2

问题 Is there any way to use [stepControl] error matcher with template driven forms? The docs just teach about an AbstractControl instance, which apparently forces the use of a reactiveForm. I've tried to use [stepControl]="myNgForm" and [linear]="true" to validate the steps but the stepper just ignores it. I appreciate any help. Thanks! 回答1: The step control seems to work with "form.control". Here an example with one form per step and template driven forms. <mat-vertical-stepper [linear]="true">

问题 So I'm following the documentation of angular 2 material DataTables . At first it was working with the providing codes at the documentation. However I changed the code a bit so that if I'm going to provide the actual data it will not be as hard as following the documentation of the angular material because I'm already used to it. So inject all the imports to my TS File import { Component, OnInit, ViewChild } from '@angular/core'; import { DataSource } from '@angular/cdk/collections'; import {

问题 So I'm following the documentation of angular 2 material DataTables . At first it was working with the providing codes at the documentation. However I changed the code a bit so that if I'm going to provide the actual data it will not be as hard as following the documentation of the angular material because I'm already used to it. So inject all the imports to my TS File import { Component, OnInit, ViewChild } from '@angular/core'; import { DataSource } from '@angular/cdk/collections'; import {

问题 I am using angular4 with Redux and angular material to design my web page. I am trying to set the md-select panel to be open. example scenario: click button dispatches an action to open the select panel opens to dispaly all options. I am using redux actions to manipulate my components state. So basically I need to fire an action to set the select to open. Any suggestions? 回答1: Using the Material2 example as starting point for this answer. Here is how you can do that: Give an id to your panel,

问题 MatSort is not working properly. I have imported the MatSort module from @angular/material. MatSort is working only for first 2 rows. <mat-table [dataSource]="dataSource" matSort> <ng-container matColumnDef="slno"> <mat-header-cell *matHeaderCellDef mat-sort-header> SL NO. </mat-header-cell> <mat-cell *matCellDef="let row; let i = index"> {{i+1}} </mat-cell> </ng-container> <ng-container matColumnDef="project"> <mat-header-cell *matHeaderCellDef mat-sort-header> PROJECT</mat-header-cell> <mat

问题 I have list of removable chips: <md-chip-list> <md-chip *ngFor="let chip of chips; let i = index" color="accent"> {{chip}} <i class="fa fa-close" (click)="remove(i)"></i> </md-chip> </md-chip-list> But I need to create them in input or in text area like in this example: https://material.angularjs.org/latest/demo/chips How can I do that? 回答1: Material2's md-chip is not as mature as Material1. Material2 team is working on adding a lot of those input field features, you can check their latest

问题 I am having an EntryComponent that has a material button menu. When I try to override the default style by using ::ng-deep the styling changes for all the button component in the parent Component as well. <style> ::ng-deep .mat-button{ max-width: 50px !important; min-width: 45px !important; height: 5em; } ::ng-deep .mat-button-ripple mat-ripple{ max-width: 40px !important; min-width: 20px !important; } </style> I also tried to target styling using a class but it doesn't work like usual CSS I

问题 I want to display a description in a mat-panel-description that when overflowed shows the ellipsis-dots. I would like to be able to resize the window and the bigger the window the more I want to see of the text and the smaller the window the less I want to see. Here is a stackblitz: https://stackblitz.com/edit/angular-guszs6 HTML: <mat-accordion> <mat-expansion-panel> <mat-expansion-panel-header> <mat-panel-title> Personal data </mat-panel-title> <mat-panel-description> Lorem ipsum dolor sit

问题 My application seems to be working fine if I use ng serve. When I navigate to the localhost there are no errors. When I do a prod build and publish the site I get the following error: EXCEPTION: Error: Uncaught (in promise): No value accessor for form control with name: 'email' I am using cli 1.0.0-beta.11-webpack.2; angular 2 RC5; material 2.0.0-alpha.7-4. app.modlues.ts look as follows: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {

问题 I am using Angular Material 2 Autocomplete in my Angular 4 project. How can I implement such that the autocomplete values are loading from an HTTP call, in this example? Can anyone give me a Plunker demo? Thank you 回答1: First of all, you should please show some attempt to solve your issue, but luckily I'm bored and will provide an answer ;) Here in this sample I'm using: https://jsonplaceholder.typicode.com/users we store that JSON result as an observable in users . Then we have our