angular-material-6

问题 I am using Angular 6.0.8 with Angular Material theme version 6.4.0 Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows: currentColor .mat-input-element (material theme) initial input, textarea, select, button (user agent stylesheet) #1072BA .English #1072BA .English #1072BA body Only the first property is applied (the rest are striked through) I have tried multiple variations to solve

问题 I'm using Angular Material to render the table. Code: <ng-container matColumnDef="type"> <th mat-header-cell *matHeaderCellDef> Workout type </th> <td mat-cell *matCellDef="let workout"> {{workout.type}} </td> </ng-container> <ng-container matColumnDef="set1"> <th mat-header-cell *matHeaderCellDef> Weight x Reps </th> <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[0].weight}} x {{workoutData.workoutSessions[0].sets[0].repetitions}} </td> </ng-container> <ng

问题 I want to set different width for different form in mat-step.The content in first form to be as width of 400px and the second form content to be as width of 700px. <mat-horizontal-stepper labelPosition="bottom" #stepper> <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> <ng-template matStepLabel>Fill out your name</ng-template> <div style="width:400px"> <mat-form-field> <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required> </mat

问题 I want to set different width for different form in mat-step.The content in first form to be as width of 400px and the second form content to be as width of 700px. <mat-horizontal-stepper labelPosition="bottom" #stepper> <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> <ng-template matStepLabel>Fill out your name</ng-template> <div style="width:400px"> <mat-form-field> <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required> </mat

问题 I'd like to change the color of the mat-slider background based on the value, i.e. each value has an associated color. I see that I can override the background-color like so: ::ng-deep .mat-accent .mat-slider-track-fill { background-color: red; } But how might I set it dynamically? 回答1: I would create CSS classes for each value/color, then use a dynamic container ID to override the child slider's CSS classes. HTML <div id="{{'container-' + slider.value}}"> <md-slider #slider min="1" max="5"

问题 I need to make the Header of the mat-table component fixed to the top, But It doesn't work. I have Angular v6.1.7 and @angular/material v6.4.7. I added the "sticky: true" propertie to the matHeaderRowDef as someone mentions here but it doesn't do anything :( <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> I have this example project: https://stackblitz.com/edit/angular-wem2qa This is my imports on the TS file: import { Component, Input, OnChanges, OnInit,

问题 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"/> <

问题 I need to export an angular material data table into excel file, using xlsx library. The issue is that, if I am using pagination within the data table, and on export, only the visible rows are exported: exportTable() { //let data = Object.values(this.dataSource); const ws: xlsx.WorkSheet=xlsx.utils.table_to_sheet(this.table.nativeElement); const wb: xlsx.WorkBook = xlsx.utils.book_new(); xlsx.utils.book_append_sheet(wb, ws, 'All Data Export'); /* save to file */ xlsx.writeFile(wb,

问题 Based on this question on stack, I need to bind a drop down list, for each row generated from angular material table dataSource . The drop down list should select automatically the correspondent value, as other values. This is table: <form [formGroup]="formGroup"> <table mat-table [dataSource]="dataSource" matSort> <!-- <ng-container matColumnDef="ind_id"> <th mat-header-cell *matHeaderCellDef> Ind. ID </th> <td mat-cell *matCellDef="let element"> {{element.iid}} </td> </ng-container> --> <ng

问题 Per Material Issue 9631 centering the mat-menu to the button is as follows. the issue is that supporting it deviates from the spec and may end up looking weird. I have a need for this functionality... Because writing my own CDK overlay would be more time intensive than overriding the mat-menu component... I am not interested in re-creating the mat-menu , and simply need the menu to be centered... I am also not interested in any other library's to accomplish this, I want to use Material mat