angular-material2

问题 I am trying to put justify-content:center to center the content of the toolbar. On targeting the toolbar I can see the expanded elements and one of them is md-toolbar-row to which giving justify-content:center centers the content(centers only while debugging through developer tools). Here is the plunker:https://plnkr.co/edit/qh3Kqi9GDXIL4H1HTzFu?p=preview How do I center the content? Tried following but none helps: md-toolbar-row{ justify-content:center; } .mat-toolbar-row{ justify-content

问题 I'm trying to change default Angular Material styles of md-menu . The problem is the Angular Material generates elements dynamically and I can't get access to them from my HTML. Here is my DOM: And here is my component HTML ( md-menu generates that DOM): <md-toolbar color="primary"> <h1>Logo</h1> <span class="spacer"></span> <img src="../../../images/avatar-default.png" class="avatar" [mdMenuTriggerFor]="userMenu" /> <md-menu #userMenu="mdMenu"> <button md-menu-item>{{username}}</button>

问题 When I select a data it fills the input with a format like DD/MM/YYYY but I need to send that data through a form, when I do a console.log on my component datapicker.component.ts onFindAWhip(form: NgForm){ const value = form.value; console.log(value); } I'm getting a full date like Thu Sep 28 2017 00:00:00 GMT+0100 (GMT Daylight Time) do I have to reformat again ? it's already done in my DateAdapter, I've tried to get it from here but I just get errors import { NativeDateAdapter } from '

问题 How is it possible, to add an secondary action (mat-icon-button) in an mat-selection-list inside the mat-list-option element. Currently all items are added inside the mat-list-text div. example (https://stackblitz.com/edit/angular-dwac7y): <mat-selection-list [(ngModel)]="selectedOptions"> <mat-list-option *ngFor="let item of items;" [value]="item.id" [disableRipple]="true"> <mat-icon matListAvatar>person</mat-icon> <h3 matLine> {{item.name}}</h3> <p matLine> {{item.details}} </p> <button mat

问题 I created one sample project using Angular Material example in plunker. its worked fine till yesterday today its not working. Even Angular Material example is not working. can you please point me into right direction. I was getting same error as original Angular material plunker error. Error: (SystemJS) Unexpected value 'undefined' exported by the module 'PlunkerMaterialModule' Error: Unexpected value 'undefined' exported by the module 'PlunkerMaterialModule' at d (https://cdnjs.cloudflare

问题 Could someone put a complete example of a mat-table with datasource adding a data later on when the table is loaded and the table is updated? My program manages to show the table, the load of data, the dialog box that asks for the new data, the data to add to the database, but I do not know how to refresh the table I found this example connect(): Observable<UserVModel[]> { return this._userService.dataChanged .switchMap(() => this._userService.getAllUsers() } in this link: Angular Material 2:

问题 The issue I'm having is that, the snackbar component, when initialised, is attached outside of cdk-global-overlay-wrapper (Which is within cdk-overlay-container) Which makes it visible for a split second, in the middle of the screen It then disappears and re-attaches itself within cdk-global-overlay-wrapper and scrolls from bottom as it should. Any ideas how to change this? 回答1: I had a similar issue where MatSnackBar existed outside the Angular zone which breaks it's interaction with Angular

问题 I'm implementing a language switch component which display checkboxes, one for each language of the app (translations with @ngx-translate ). When clicking one of the checkbox, app language is correctly switched but the clicked mat-checkbox is still unchecked. Template : <mat-checkbox [checked]="selectedLanguage == 'en'" (click)="switchLanguage('en')">English</mat-checkbox> <mat-checkbox [checked]="selectedLanguage == 'fr'" (click)="switchLanguage('fr')">French</mat-checkbox> <mat-checkbox

问题 I'm writing here since I have a question about Mat Toolbar and Mat-sidenav from Angular Material. I'm trying to get the Sidenav to go under the toolbar and the toolbar always occupies the top part, something like this: Example Here´s my code: <mat-sidenav-container class="sidenav-container" autosize> <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'" [opened]="(isHandset$ |

问题 I currently have an angular material table that returns values from an api endpoint that I have. Currently, it returns the proper values except for the cells where I have a selection dropdown. Here's a snippet of what I have for material table selection dropdown: <div class="matTable-container"> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="Active"> <mat-header-cell *matHeaderCellDef > {{ 'Active' | translate}}? </mat-header-cell> <mat-cell class="is-active" *matCellDef=