angular-material2

问题 I am trying to implement Material2 data table. But I am not able to understand how to use it in proper way. import {Component, ElementRef, ViewChild} from '@angular/core'; import {DataSource} from '@angular/cdk'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator

问题 how should I define an index variable when angular material table is used as ngFor is not used in this table. I did search for it in the documentation but index is not mentioned any where in it. <mat-table #table [dataSource]="dataSource"> <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <!-- Position Column --> <ng-container matColumnDef="position"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell

问题 I want to use my company's brand colors throughout the app. I have found this issue: AngularJS 2 - Material design - set color palette where I can build an allegedly custom theme, but it's basically just using different parts of pre-built palettes. I don't want to use Material2's predefined colors. I want my unique and special brand colors. Is there a better way (righter?) to create my own theme, than just hack around with _palette.scss ? Do I need to make a mixin for my brand palette? If so

问题 I need help. I don't know how to change the date format of the material 2 datepicker. I've read documentation but I don't understand what I actually need to do. Output date format which datepicker provides by default is f.e.: 6/9/2017 What I'm trying to achieve is to change format to the 9-Jun-2017 or any other. Documentation https://material.angular.io/components/component/datepicker doesn't help me at all. Thanks in advance 回答1: Here is the only solution I found for this one: First, create

问题 I'm not able to enable/disable the autocomplete textfield component dynamically or otherwise. I want the component to be disabled by default. And later on some user activity, like on click of a button this should enable the component. I tried the following code but didnt work: export class MyComponent { // this DIDN'T WORK opts:object={value: "", disabled: true}; ctrl= new FormControl(this.opts); ngDoCheck(){ // this DIDN'T WORK // this could be ngOnChange, ngOnInit or button click event if

问题 I have created below search bar component which interacts with API every time a key is pressed. <div class="fill-remaining-space"> <md-input-container class="example-full-width" color="accent"> <md-icon mdPrefix>search</md-icon> <input type="text" mdInput #input (keyup)="search(input)"> <md-icon mdSuffix *ngIf="input.value.length > 0" (click)="input.value=''">clear</md-icon> </md-input-container> </div> Now I am getting results array in my component.ts file. I want to show a dropdown below

问题 When a Angular Material mat-checkbox (https://material.angular.io/components/checkbox/overview) is checked it has the value "true". When it is unchecked it has the value "false". Is there a way to turn this behaviour around? I need just the opposite. A checked checkbox should serialize to "false" and a unchecked one should serialize to "true" when calling this.filterFormGroup.getRawValue() . I was hoping that there is something like this: <mat-checkbox [myCustomCheckedValue]="false"

问题 I'm trying to set value of 2 fields <input matInput> abnd <mat-select> programatically. For text input everything works as expected however for the <mat-select> on the view this field is just like it would have value off null . But if I would call console.log(productForm.controls['category'].value it prints correct value that I set programmatically. Am I missing something? Here is the code: form config: productForm = new FormGroup({ name: new FormControl('', [ Validators.required ]), category

问题 It's working on ng serve but giving error as follow ERROR in Unexpected value 'MaterialModule in E:/Code/employee-web/node_modules/@angular/material/typings/index.d.ts' impor ted by the module 'SharedModule in E:/Code/employee-web/src/app/shared/shared.module.ts'. Please add a @NgModule annotatio n. ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'E:\Code\employee-web\src' resolve './$$_gendir/app/app.module.ngfactory' in 'E:\Code

问题 I just upgraded to Alpha 7 and after upgrade Slide Toggle seems to be broken. When I compile my project in Visual Studio 2015 I receive the below errors: Error Build:Cannot find name 'HammerInput'. node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts 67 Error TS2304 Cannot find name 'HammerInput'. TypeScript Virtual Projects node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts 67 Apparently it seems that the below line is causing the problem in slide-toggle.d.ts: _onDrag