angular-material

问题 I use Angular Material 2. There is one CSS style in material CSS: .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: #fff; } I tried to override it in custom CSS file like: .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: red !important; } Also I tried this: /deep/ .mat-radio-button.mat-accent .mat-radio-inner-circle { background-color: red !important; } It does not work, how to do this right and in which place? 回答1: You do it in your global style

问题 I am using the angular material outline mat-form-field to design a form. I am getting the default mat-form-field outline text-box view with a border corner radius. Is there any way to remove the border corner radius of the outline mat-form-field and convert into a square text box view. I tried to change the default styles of the angular material mat-form-field with the following, but it's not working. //css .mat-form-field-appearance-outline .mat-form-field-outline-start .alignment{ border

问题 I'm using angular 5 and angular material (latest version) and I'm trying to open a dialog from a page. When I click the button that triggers the opening, the entire website is put in blank background like if the dialog were overlaping it contents and hiding it all. import { Component, OnInit, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; @Component({ moduleId: module.id, selector: 'app-dialog', templateUrl: 'dialog.component.html', styleUrls

问题 I need to change the color of angular material progress bar dynamically. I realized that it is not that simple, so what is the best way to to it? requirements: I will receive the color hex code from an external API. So I can not create a set of predefined themes The background color will be white. So, I just need one color, not the entire palette (lighter, darker) colors. related link: (1) 回答1: We can create an attribute directive which accepts the color value and override default styles of

问题 I'm trying to use Angular Material 6 Dynamic grid-list. The example relating to the documentation puts contents of the grid in the centre of each tile. See example here I want the content to go in the top left hand corner of each tile. I have tried the following css which does not work. .mat-grid-tile .mat-figure { justify-content: flex-start; align-items: flex-start; } 回答1: Put in styles.css : DEMO .mat-grid-tile .mat-figure { justify-content: flex-start !important ; align-items: flex-start

问题 How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6... In below URL its working when press enter, but whenever we press tab button it should select highlighted option. <mat-form-field class="example-full-width"> <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of options" [value]=

问题 I'm having problems finding the magic sauce here.. It doesn't look like the API supports it, so I guess I'm looking for some CSS to make the slider bigger. I am getting the one on the left, but I would like to style it like the one on the right? Any CSS tricks or has anyone done this before. Specifically the height of the 'bar'. there are a million things set to height: 2px. i tried upping all of them but nothing changed.. i guess maybe it's a border or something else? Thanks in advance!

问题 I'm trying to implement a footer row into a mat-table component after recently upgrading to angular 6 for this purpose, but after adding both the mat-footer-cell and mat-footer-row elements in the table, I get the following error: ERROR TypeError: Cannot read property 'template' of undefined at MatFooterRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkFooterRowDef.extractCellTemplate (vendor.js:17400) The table still appears on the page, but with no data, no footer row, and a T

问题 I'm trying to implement a footer row into a mat-table component after recently upgrading to angular 6 for this purpose, but after adding both the mat-footer-cell and mat-footer-row elements in the table, I get the following error: ERROR TypeError: Cannot read property 'template' of undefined at MatFooterRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.CdkFooterRowDef.extractCellTemplate (vendor.js:17400) The table still appears on the page, but with no data, no footer row, and a T

问题 I added this but when inspecting element using Chrome DevTools, the click function doesn't show! Here's my code: <mat-table [dataSource]="dataSource1" class="mat-table"> <!-- Position Column --> <ng-container matColumnDef="Objname"> <mat-header-cell *matHeaderCellDef> ObjName </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.objname}} </mat-cell> </ng-container> <!-- Weight Column --> <ng-container matColumnDef="Successcount"> <mat-header-cell *matHeaderCellDef> Successcount <