angular-material2

问题 As you can see in this example when you change tabs vertical scrollbar appears on animation. <md-tab-group> <md-tab label="Tab 1"> <div style="height: 2000px">Content 1</div> </md-tab> <md-tab label="Tab 2"> <div style="height: 500px">Content 2</div> <div>Content 2</div> </md-tab> </md-tab-group> Is it possible to remove that scrollbar (only on tab transition)? 回答1: Yes it is possible, set the dynamicHeight input to true . <md-tab-group [dynamicHeight]="true"> <md-tab label="Tab 1"> <div

问题 I have multiple tabs view with a component rendering in each one of them. Here is the code for that: <mat-tab-group> <mat-tab *ngFor="let g of goals; index as i"> <ng-template mat-tab-label>{{g.name}}</ng-template> <div class="row"> <app-summary [goal]="g"></app-summary> </div> <div class="row"> <mat-table #table [dataSource]="dataSource[i]"> ## some table content here </mat-table> </div> </mat-tab> </mat-tab-group> Here is what app-summary looks like: <div fxLayout="column" fxLayoutGap="20px

问题 I am working on an angular project, I've implemented angular material components like the side-nav. The side-nav has ul li elements, where the links are nested and are router links not href. my question when I select a link to go to another view, I want to make a call to side nav to toggle and close. cause it always remains open 回答1: Option 1: You can subscribe to Router events and close sidenav whenever router event takes place. Code: requires these imports: import { Component,ViewChild,

问题 I'm trying to extract the logic that filters and displays my mat-option s for my mat-select s into their own component. For some reason however, the options get displayed but clicking on them doesn't fire an event. The web app I'm writing have a lot of mat-select s which each potentially have a lot of mat-option s. For obvious reasons, I need a way to filter the options so I'm using this node package. This pattern of "select with search field" appears a lot throughout the application, which

问题 I'm working with Angular 2+ and Material 2. I have some md-button(s) which I want to change to md-raised-button dynamically. For example I want this: <a md-button [routerLink]="['/home']">Home</a> to change into this: <a md-raised-button [routerLink]="['/home']">Home</a> when the link is active or I'm hovering over it etc. 回答1: according to this answer That is not supported. but you can do this : <a *ngIf="condition" md-button [routerLink]="['/home']" (mouseover)="condition= true" (mouseout)=

问题 This is my form group. I'm using a form group inside another one: this.shopGroup = this.fb.group({ _user: [''], name: ['', Validators.compose([Validators.required, Validators.maxLength(60)])], url_name: [''], desc: ['', Validators.compose([Validators.required, Validators.maxLength(600)])], photos: [''], currency: ['Real'], language: ['Português do Brasil'], address: this.fb.group({ zipcode: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{5}[\-]?[0-9]{3}')])], street: [

问题 I use the md-fab-button from the original angular2 material-framework. I want to set the md-fab-button(for adding a new entity) position: fixed but I want to place the button in an inner component inside the md-sidenav-layout but if I do so then the position: fixed doesn't work. The code above: <div class="{{themeService.ActualTheme}}"> <md-sidenav-layout class="full-height" fullscreen> This class attribute is just for theming the app I also tried it without fullscreen and set with the class

问题 I am trying to style an input so that it is a certain width. I am using Angular Material 2 but for some reason the styles in the css isn't being applied to the input tag. Here is a working plunker of my issue along with the affected code: @Component({ selector: 'my-app', template: ` <div> <form> <md-input [(ngModel)]="cycleTime" type="number" name="email"> <span md-prefix>Cycle Time:</span> <span md-suffix> minutes</span> </md-input> </form> </div> `, styles:[` input { width: 50px; text-align

问题 I have <mat-menu #saveMenu="matMenu">...</mat-menu> in app-save-document component and <app-save-document></app-save-document> <button mat-icon-button [matMenuTriggerFor]="saveMenu"> in another component. if I have mat-menu and button with [matMenuTriggerFor] in different components, can I do something to make the button see the menu? now I have ERROR Error: mat-menu-trigger: must pass in an mat-menu instance. 回答1: Well, if you want to do something like this: <button mat-button

问题 I'm using Material Angular (from Angular Material). The examples in the site seem a Little too overcomplicated and every other tutorial in the internet seems either outdated or to be using AngularJS instead. How can I show a simple alert (just like Android's AlertDialog) with a title, a message and a confirm/cancel button? 回答1: EDIT : You could also use a template reference in your component's HTML file (or more commonly known as a "component view") and then reference it in your component's