angular-material2

问题 I am using Grid List of angular material 2. Here is the plunker https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview Here I have defined a grid list of three columns and there are three tiles (showing in a row as defined as three columns). I want to change the layout direction of tiles like if the screen size gets shrunk at a certain point then all the tiles should be in column one below the other that is somehow value of cols parameter changed to 1. How is it possible? Is it possible with

问题 So I have a user-list component and a user-detail component. The user-list component has an md-table listing all users registered. The user is able to click on a button to see the details of the corresponding entity. After editing the Name property and saving (for example), the user-detail redirects to the user-list component. But the md-table displays the old information. How can I trigger an md-table refresh after editing the entity in another component like this scenario? Here is my user

问题 Ugrading to material 2.0.0 beta 11 now I have this errors, How can I fix it <mat-form-field> <input matInput placeholder="{{'hotel.detail.labels.city' | translate }}" [matAutocomplete]="tdAuto" name="city" #city="ngModel" [(ngModel)]="selected.city" (ngModelChange)="searchCity($event)"> </mat-form-field> <mat-autocomplete #tdAuto="mdAutocomplete"> <mat-option (onSelectionChange)="setCity(city)" *ngFor="let city of cities" [value]="city.name"> <div class="row"><span>{{city.name}} ({{city

问题 When tab inside tab then if selected index of sub tab is 1 then it should show as selected. Let parent tab has two tabs, it has selectedIndex is 0, and sub tab inside parent tab1 has selectedIndex = 1 then content inside it showing but is not showing as selected. Tab content is showing but tab is not selected Here is the working example 回答1: There is currently an open issue for this. As a workaround you can use 2 way binding on your parent tab selectedIndex and then only show the subtab group

问题 By default, when the esc button is pressed, the dialog closes. However, I don't want this intended behaviour. What I would like to happen is to prevent closing when the esc button is pressed but still allow a click on the backdrop to close the dialog. How can this be done? I've tried something like this. However, it doesn't work: openEditDialog() { const dialogRef = this.dialog.open(EditPlaceDialogComponent, { width: '90%', height: '720px' }); dialogRef.keydownEvents().subscribe(e => { if (e

问题 I want to use mat-card directive for show my products.The angular-material docs seems to me not thorough. I found many examples on the Internet with using Table with dataSource ( example 1, example 2 ) Now I get the productList with all products and iterate it with ngFor . I show all products on the page. How can I feed the productList to the paginator and iterate with processed data ( paginationList ). *component.html file it show all products: <mat-paginator #paginator [length]="productList

问题 I am practically new in Angular2 and inherited the project with Angular 2 frontend. After switching to the new Angular 4.0 on console I see the error: "compatibility.ts:221 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming" The mdb.min.css is in the app/assets/css folder. The specification in package.json shows the following: "@angular/common": "^4.0.0", "@angular

问题 I've noticed that the directive matTooltip doesn't work on a disabled button. How can I achieve it? Example: <button mat-raised-button [disabled]="true" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> For an enabled button it works perfectly: <button mat-raised-button [disabled]="false" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> 回答1: This doesn't work because it is triggered by mouseenter event which doesn't get fired by most browsers

问题 How to switch between mat-vertical-stepper and mat-horizontal-stepper from angular component with same stepper steps? 回答1: to avoid rewriting identical html content, do like this. Create the template and give them a reference using a #hashtag . then you can instert them using ng-container *ngTemplateOutlet="hashtag"></ng-container> . here is an example of making a responsive stepepr, the angular material way. <ng-template #stepOne> <div>step one</div> </ng-template> <ng-template #stepTwo>

问题 I want to call a function when an option is selected. After some search it seem that i have to use : property optionSelections of MdAutocompleteTrigger In the documentation : https://material.angular.io/components/component/autocomplete optionSelections Stream of autocomplete option selections. I dont understand that , what is a stream, how to implement this ? 回答1: On md-option you can set "onSelect" <md-autocomplete #auto="mdAutocomplete"> <md-option (onSelect)="callSomeFunction()" *ngFor=