angular-material

问题 I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers. Below is my HTML for startDate and endDate : startDate: <div class="start-date" fxFlex="50%" fxFlexOrder="1"> <mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]=

问题 I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers. Below is my HTML for startDate and endDate : startDate: <div class="start-date" fxFlex="50%" fxFlexOrder="1"> <mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]=

问题 I have a page with four forms. Each form's layout is defined using the following CSS grid configuration, which is shared between all of the forms: .base-grid-wrapper { display: grid; grid-template-columns: repeat(12, 1fr); grid-row-gap: 1em; grid-column-gap: 1em; width: 75%; } Since Chrome 80 was released, the styling for the first of these forms has been (sort of) broken. The computed values for grid-template-columns is non-uniform, but only for the first of the four forms. For the following

问题 What I am trying to do is to load ( ngOnInit() ) a src image onto a Mat-Card, but it keeps showing the same (the first one in my case) image whenever I filter with the Paginator. HTML <mat-paginator #MatPaginator [length]='3' [pageSizeOptions]="[1,2,5,10,20]"></mat-paginator> <div *ngFor="let a of obs|async; let i =index;"> <mat-card class="example-card"> <mat-card-header> <mat-card-title>{{a.vehicleMake}} | {{a.vehicleModel}} ({{a.vehicleYear}}) -- R{{a.sellingPrice}} </mat-card-title> <mat

问题 I am creating a simple toggle app that that has two toggles.I'm saving the toggle state in a db. My issue is that when I toggle one slide-toggle, the value of other slide toggle also changes.I have seperate onChnage() methods for both toggles but still I get the same issue.Please help.Thanks in advance: Here is my ts code: export class PolicyComponent implements OnInit { @Output() change: EventEmitter<MatSlideToggleChange>; formGroup: FormGroup; policy1: boolean=false; policy2: boolean=false;

问题 I have this stackblitz set up by way of an example. I have a standard input form field and a custom field that shows a select bound to an array. <form [formGroup]="formGroup"> <mat-form-field class="field"> <mat-label>City</mat-label> <input matInput placeholder="City" formControlName="address1" /> </mat-form-field> <app-dataset-select label="Country" [items]="countries" formControlName="countryId"></app-dataset-select> </form> The whole thing is wrapped by a form with validation: this

问题 I got this stackblitz example for lists with selection as shown in below image. In the selection list,the list is selecting fine but how can i remove the checkbox? 回答1: add display:none for this I have create a demo on Stackblitz .css /.sccc :host { ::ng-deep.mat-pseudo-checkbox{ display: none !important; } } 来源： https://stackoverflow.com/questions/51942439/how-to-remove-the-check-box-in-the-lists

问题 How can I design a nav-bar styled like the one Google+ has using angular material ? I don't know how to get this nav bar, and with the search box styled this way, it thought material design made by google was used for this, but i can't see such things in angular material implementation. I wanted to make a style similar to G+ for an app, coz it's very nice and suitable for that one. 回答1: Here you go! It´s not exactly as the design but it´s a good starting point for you.. http://codepen.io

问题 Hellow. I'm using angular 6, and agular material, and I have an array of strings, which I display in a mat-select form field. If an user selects one element, and then another, I need to track what was the previous value and what is the new value. So far, I've been able to obtain current value using $event.value, but I haven't found a way to store or obtain what the previous value was. <mat-select placeholder="Choose..." (selectionChange) ="checkTitle($event.value);"> <mat-option *ngFor="let

问题 I am using a angular tree material to display JSON data, I am unsatisfied by the amount of white spacing there is between lines. I have tried playing with mat-tree-node.line-height in the css with zero changes. How can I reduce all this vertical white space? 回答1: Simply by overriding their css: .mat-tree-node { min-height: 30px } 回答2: The only working way I found with angular 8 on a nested element (and nested tree) is .mat-tree-node { min-height: 1.2em !important; height: 1.2em; } 来源： https:/