angular-material2

问题 I'm using Angular 2 Material sidenav in my project this way: <md-sidenav-layout> <md-sidenav #start mode="side" [opened]="true"> <md-nav-list> </md-nav-list> </md-sidenav> <button md-button (click)="start.toggle()">Close</button> <router-outlet></router-outlet> </md-sidenav-layout> How to call start.toggle() from my component instead of element with click event? Thank you for reading 回答1: You want to declare a ViewChild in your controller that references the MdSidenav inside your component,

问题 I am using angular material2 in my angular project. This is the entry in package.json under dependencies "@angular/material": "^2.0.0-beta.1", I tried the following command npm update @angular/material but this ends with some errors +-- @angular/material@2.0.0-beta.2 `-- UNMET PEER DEPENDENCY rxjs@5.0.1 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1

问题 With the new update of Angular Material and its breaking changes, I can no longer use my <md-menu> components. It was working when I imported MaterialModule, but now when importing MatMenuModule or MdMenuModule the following error is generated: compiler.es5.js:1690 Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "matMenu" (" </mat-toolbar> <mat-menu xPosition="after" [ERROR ->]#wordListMenu="matMenu" ): ng:///NavbarModule/NavbarComponent.html@38:28 I follow

问题 I want to open calendar where user chooses date from date-picker not only when user clicks on calendar icon, but also when clicks on input field. Material DatePicker. So I create directive for this, attaching it to <md-datepicker> and also watching for (click) event on input: Html: <md-form-field class="field-half-width"> <input mdInput [mdDatepicker]="picker2" placeholder="Galioja iki" formControlName="dateUntil" (click)="clickInp()"> <md-datepicker-toggle id="calendar" mdSuffix [for]=

问题 I have a requirement where I need to implement drag and drop between two containers which have a tree-like structure. One container is TODO, the Other is Done. It's working but dropped data always getting attach to node 1 of the Container 2(Done) because I don't know how to find the dropped container node index? Here is code. Working demo can be found here import './polyfills'; import {HttpClientModule} from '@angular/common/http'; import {NgModule} from '@angular/core'; import {FormsModule,

问题 I am trying to implement a datepicker component with a dynamic name. I am developing in an Angular Material 2 based project with Angular 4, and this is my implementation: <input mdInput [mdDatepicker]="'start' + column.name + 'Picker'" placeholder="Start {{column.label}}" formControlName="start{{column.name}}"> <button mdSuffix [mdDatepickerToggle]="'start' + column.name + 'Picker'"></button> <md-datepicker #start{{column.name}}Picker></md-datepicker> where column.name changes dynamically in

问题 I am trying to implement a datepicker component with a dynamic name. I am developing in an Angular Material 2 based project with Angular 4, and this is my implementation: <input mdInput [mdDatepicker]="'start' + column.name + 'Picker'" placeholder="Start {{column.label}}" formControlName="start{{column.name}}"> <button mdSuffix [mdDatepickerToggle]="'start' + column.name + 'Picker'"></button> <md-datepicker #start{{column.name}}Picker></md-datepicker> where column.name changes dynamically in

问题 I have an angular material 2 date-picker implemented in a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h4> </div> <div class="modal-body"> <div class="timeline-cal"> <input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date"> <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle> <md-datepicker #picker></md-datepicker> </div> <div class="modal-footer">

问题 I have an angular material 2 date-picker implemented in a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h4> </div> <div class="modal-body"> <div class="timeline-cal"> <input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date"> <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle> <md-datepicker #picker></md-datepicker> </div> <div class="modal-footer">

问题 i am using angular material 6 ,i have a vaidation inside mat-form-field mat-error is not displayed , when move after mat-form-field to the mat-error which is displaying properly. Not Working code: <mat-form-field> <input matInput type="time" formControlName="ToTime"/> <mat-error *ngIf="DaterForm.get('ToTime').hasError('InValidToTime')">FromTime Should be less than ToTime if choose a same date</mat-error> </mat-form-field> Working Fine: <input matInput type="time" formControlName="ToTime"/> <