angular-material

问题 I have two dropdowns that I populate with data from the server. The first dropdown contains a state, and the second one contains city. Like if I select one state name only cities in that state should show in 2nd drop down using Angular 4. <mat-tab-group> <mat-tab label="Basic Info"> <ng-template mat-tab-label> <div fxLayout="center center"> <mat-icon style="font-size: 16px; line-height: 18px">gps_fixed</mat-icon> State </div> </ng-template><br /><br /><br /><br /> <div class="ui fluid

问题 UPDATED: Changed the code to immediately call and assign the dataSource , but I still experience the same results, with the exception that the sourceData.paginator is working. The sourceData.filter and sourceData.sort is still not working. PLEASE NOTE: I am getting no errors, as the error had to do with the paginator that is now working. Also, it might have to do with the format of my data, so included some data as an example. As a note, I use response.data for assigning my data to the source

问题 This question already has answers here : How can i make a MatDialog draggable / Angular Material (2 answers) Closed 10 months ago . Is it possible to make a Angular Material Dialog draggable? because after a loosing a lot of time for searching i didn't found a very clear answer. 回答1: Yes and this was included in Angular Material version 7+ update, by using the cdkDragRootElement Here's a sample copied from material.angular.io HTML: <button (click)="openDialog()">Open a draggable dialog<

问题 i have a large list and i want to load it as the user scroll down the select field but how can i get the scroll event in mat-select there is no event that fire the scroll event. <mat-form-field> <mat-select placeholder="Choose a Doctor" formControlName="selectedDoc" (change)="drSelected()"> <div *ngFor="let dr of doctors;let i = index" [matTooltip]="getDocDetail(i)" matTooltipPosition="right"> <mat-option (scroll)="docScroll()" [value]="dr"> {{dr.name}} </mat-option> </div> </mat-select> <mat

问题 Overflow! I am building an Angular Material site for the first time and I seem to be having an issue with the Dialog box feature. I can get the box to display and close fine except on a mobile device. Namely, when the user presses the "Clear" or "Back Button" on the phone. When you do this (or click the back button on the browser) it has no affect on the dialog box. It remains in view and waiting for input. Pressing the ESC key closes it. Anybody on a phone would instinctively think they can

问题 My Material table displays the value in below manner: Name |quatity Mango|10 <div class="table-cover center-table"> <div class="mat-elevation-z8 elevation-scroll-control"> <table mat-table class="full-width-table left-margin" [dataSource]="dataSource" matSort aria-label="Elements"> <!-- Name Column --> <ng-container matColumnDef="name"> <td mat-header-cell *matHeaderCellDef >Name</td> <td mat-cell *matCellDef="let row" class=""> <div class="cell-style padding-left">{{row.Name}}</div> </td> <

问题 I found a very helpful explanation about how to apply material theme color schemes/palettes for other non-material-components here. Before I read this, I thought of something similar but couldn't imagine how to consider the recommendation from Theming your Angular Material app, if I don't want to have only global themes: Your custom theme file should not be imported into other SCSS files. This will duplicate styles in your CSS output. If you want to consume your theme definition object (e.g.,

问题 I have a form on a component's template: <form (ngSubmit)="submitLogin(loginForm)" #loginForm="ngForm"> <mat-input-container> <input matInput [placeholder]="'User Name'" ngModel name="username" autofocus required> </mat-input-container> <br> <mat-input-container> <input matInput [placeholder]="'Password'" ngModel type="password" name="password" required> </mat-input-container> <br> <button [disabled]="loginForm.invalid" mat-raised-button type="submit"> Login </button> </form> And here is my

问题 Is there a way to set different background colors for different tabs in md-tabs ? The default is no color as can be seen in tabs demo I tried <md-tabs background-color="green"> but it's not working 回答1: AngularJS Material design (md) tabs, md-tabs background color is transparent and uses the background color of your main container. Try to add CSS class for md-tabs . Added background to entire md-tabs md-tabs { background: red; border: 1px solid #e1e1e1; } By adding CSS childs to md-tab class,

问题 I'm trying to implement a Material table in my angular application. Pagination and Filter are working fine, but i'm not able to sort my table. My reference to MatSort is undefined. I did import it in AppModule: import {MatTableModule} from '@angular/material/table'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatButtonModule, MatCheckboxModule,MatPaginatorModule,MatInputModule} from '@angular/material'; import {MatSortModule} from '@angular/material/sort'; ...