angular-material2

问题 Hello i'm having an issue with Angular Material theme breaking in a Dialog Component, where the color of text and other components aren't working in the ways they should. In app.component I have a setting icon button to open a dialog main.settings.dialog but when it opens as seen in the picture below the coloring is not fitting the Dark Theme. Any insight as to why this isn't working in a normal way would be greatly appreciated as i can't find a way to fix this. Live example site Link to full

问题 I am having an issue when using Angular Material Datepicker and I can't seem to find the root problem of it. I couldn't think of a way to word this question. Whenever I open the calendar and I'm selecting the day, the overlay is too large and is past the boundaries of the box. Hopefully, this attached image can help: I have the following imports in the module the component is in: import { MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatOptionModule } from '

问题 I have a CSS problem when I pass my mouse over a mat-form-field . To be able to use a colored mat-card, I added some CSS class in style.scss to change the background-color of the mat-form-field . .mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white

问题 I have a CSS problem when I pass my mouse over a mat-form-field . To be able to use a colored mat-card, I added some CSS class in style.scss to change the background-color of the mat-form-field . .mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; } .mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white

问题 How can I programmatically set focus to "Address" input after clicking "Next" button on step one, so after going form step 1 ("Fill out your name") to step 2 ("Fill out your address"). https://stackblitz.com/angular/onnbkqrydrg?file=app%2Fstepper-overview-example.ts https://material.angular.io/components/stepper/overview This is what I want to achieve: I was already experimenting with MatStepper's selectionChange event, but it seems that it is fired before step 2 is visible, so it doesn't

问题 Plunkr: http://plnkr.co/edit/y4e4jS89gOxRKQOyUW2r?p=preview I'm using the selectionChange @Output on a mat-chip to see the resulting behavior of chip selection but it seems that the eventEmitter isn't firing on chip selection? .html: <mat-chip-list> <mat-chip (selectionChange)="changeSelected($event)">Papadum</mat-chip> <mat-chip (selectionChange)="changeSelected($event)">Naan</mat-chip> <mat-chip (selectionChange)="changeSelected($event)">Dal</mat-chip> </mat-chip-list> <p>Currently Selected

问题 I have followed the official guide and created a app-theme.scss with the following content: @import '~@angular/material/theming'; @include mat-core(); $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); $candy-app-warn: mat-palette($mat-red); $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); @include angular-material-theme($candy-app-theme); Content of styles.css : @import './app-theme.scss';

问题 I am new to Angular2/4 and angular typescript. I want to style the angular material design snackbar for example change the background color from black and font color to something else. How do i go about styleing the "snackbar" ? I have the material design snackbar in the service/core and to make it available i call it in every component as needed. How can I style the Angular 2 material design "snackbar"in Angular 2/4? I have included the code snippet below: service/core import { Injectable,

问题 I am new to Angular2/4 and angular typescript. I want to style the angular material design snackbar for example change the background color from black and font color to something else. How do i go about styleing the "snackbar" ? I have the material design snackbar in the service/core and to make it available i call it in every component as needed. How can I style the Angular 2 material design "snackbar"in Angular 2/4? I have included the code snippet below: service/core import { Injectable,

问题 I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've found: <cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5"> <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item"> <div class="state">{{state.name}}</div> <div class="capital">{{state.capital}}</div> </div> <