angular-material2

问题 Instead of opening as a layover popup, it opens as a block on the bottom of the page left aligned. I searched for similar problems, found this angular2 MdDialog is not appearing as a popup but also doesn't work. Made a clean page, maybe it was some of my other css that interfered, but nope. <div> <h4 mat-dialog-title>New consultant</h4> </div> <mat-dialog-content> <div *ngIf="!allFieldsAreFilledIn()" class="alert alert-info"> <strong>{{ getAddFeedback('emptyFields') }}</strong> </div> <div

问题 I want to add my own custom colors, similar to "primary", "warn" etc. For example, I added a class for an orange background, but I use it as a class and not as a color attribute. It works, but the code looks a bit confusing. <button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"> <i class="material-icons">description</i> Deactivate </button> What do I need to do to add it as color="orange" ? 回答1: You can change the color of the button only in the normal css way by

问题 I want to add my own custom colors, similar to "primary", "warn" etc. For example, I added a class for an orange background, but I use it as a class and not as a color attribute. It works, but the code looks a bit confusing. <button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"> <i class="material-icons">description</i> Deactivate </button> What do I need to do to add it as color="orange" ? 回答1: You can change the color of the button only in the normal css way by

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 Taking the mat-slide-toggle as an example, locally I see the HTML tag looks like this: <div class="mat-slide-toggle-ripple mat-ripple" mat-ripple="" ng-reflect-centered="true" ng-reflect-radius="20" ng-reflect-animation="[object Object]" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLLabelElement]"> <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div> </div> However in production, it's missing the Angular attributes: <div class="mat-slide-toggle-ripple mat

问题 Anybody know if it is possible to create a “column” component for use with mat-table, I have tried creating a component for a commonly used column definition but when adding to the table i get an error that was unable to find the column selector, my column definition is below: @Component({ selector: 'iam-select-column', template: ` <ng-container matColumnDef="select"> <mat-header-cell *matHeaderCellDef> <mat-checkbox></mat-checkbox> </mat-header-cell> <mat-cell *matCellDef="let row"> <mat

问题 How to correctly display icon inside the select drop down control using material select control. After selecting mat option its selecting text of icon as well how to overcome this issue ? <mat-form-field> <mat-select formControlName="genderFormControl" placeholder="Gender"> <mat-option>None</mat-option> <mat-option *ngFor="let gender of genders" [value]="gender.value"> <mat-icon matListIcon>pregnant_woman</mat-icon> {{gender.name}} </mat-option> </mat-select> </mat-form-field> 回答1: You can

问题 I want align button right corner of the dialog below is my html <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat-form-field> </div> <div mat-dialog-actions> <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button> </div> demo 回答1: You can use the align HTML attribute: <div mat-dialog-content> <p>What's your favorite animal?</p> <mat-form-field> <input matInput [(ngModel)]="data.animal"> </mat