angular-material

问题 I am trying to create md-toast with having some background color to toast using angular-material. I using answers from this SO question, I created this codepen, but it is showing some unwanted background to toast as well. HTML: <div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp"> <p> Toast is not properly working with theme defined in CSS. <br> </p> <div layout="row" layout-sm="column" layout-align="space-around"> <md-button

问题 How can I change height in mat-form-field with appearance="outline" ? I need to reduce the mat-form-field. My input example 回答1: Add these to your CSS in the your original stackblitz ::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;} ::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; } ::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; } UPDATED : with transition for the label...

问题 I am trying to do validation using the <mat-for-field> and <mat-error> . This works fine when user tabs out of the input without filling. But how do I force this error to show when I click a button? I am not using submit. Also, using template-driven forms. This is my code: HTML: <mat-form-field> <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" required> <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat

问题 i created grid list with column 6 and i want to be grid title take 100% width on small screen devices. Now it creates 6 column on small screens as well Expected: One grid-title occupies 100% of space on mobile device only 回答1: You have to set the cols attribute of the mat-grid-list dynamically depending on the screen width. You'd have to decide on which width breakpoint will the mat-grid-list render the 1-column version. HTML: <mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window

问题 I'm writing an web app with AngularJS and angular-material. The problem is that there's no built-in component for file input in angular-material. (I feel that file uploading doesn't fit the material design, but I need it in my app) Do you have a good solution for this problem? 回答1: Nice solution by leocaseiro <input class="ng-hide" id="input-file-id" multiple type="file" /> <label for="input-file-id" class="md-button md-raised md-primary">Choose Files</label> View in codepen 回答2: For Angular

问题 StackBlitz Here is my FormArray (variants): this.productGroup = this.fb.group({ name: '', variants: this.fb.array([ this.fb.group({ type: '', options: '' }) ]) }) I'm using MatChips to store a string array. This array needs to be passed to options : <div formArrayName="variants" *ngFor="let item of productGroup.controls['variants'].controls; let i = index;"> <div [formGroupName]="i"> <div class="row"> <mat-form-field class="col-12"> <input formControlName="type"> </mat-form-field> </div> <div

问题 I am using following code for displaying date picker <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> but it is returning result as Wed Jan 24 2018 00:00:00 GMT+0530 (India Standard Time) but I need it as 2018-01-24T11:23:00. Could you please help me here? Thank you. 回答1: In your component.html, use two inputs, first one to

问题 I am trying to apply Error Validation style with ControlValueAccessor in custom Material Input Textbox. Ever since applying this custom component, all the red border validation status with formControlName/FormBuilders do not show, for required, minlength, etc. It worked natively (out of the box) with Angular Material textbox, until the custom control was applied. Goal is to have custom textbox working with Form validation. This showed naturally with matInput textbox. Update: Posted answer;

问题 I am showing the data of my JSON file in the mat-table . The mat-table works fine in showing the rows but I have to show the data inside an array in a row. However, I don't know what would be the best predicate to use. I tried where predicate but it didn't work. Data: { "fname": "Mark", "lname": "jhony", "parcels": [ { "parcelId": 123, "parcelName: "asd", "parcelItems": [ { "itemId": 2, "itemName": "perfume" }, { "itemId": 4, "itemName": "soap" } ] }, { "parcelId": 144, "parcelName": "parcel2

问题 I'm using md-autocomplete from Angular Material: here It seems the dropdown's width goes with the input field's width. If an item's text is too long, there is ellipsis . However, I want to show full text of an item, while keeping the input field's width relatively short. That is, the dropdown's width should expand with its content. I tried inspecting the styles of md-autocomplete 's elements, but couldn't find any style that does the trick. Any idea? EDIT: Here are the style I ended up having