angular-material2

问题 I'm starting a project with angular material. Does it have a native system for positioning elements in a responive grid like bootstrap does ? Otherwise is it ok practice to combine material design with bootstrap for the grid system ? Maybe I am taking the wrong aproach to the problem. 回答1: If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight. Basically Material2 + Flex-layout is equivalent to Bootsrap library. Here's

问题 I am using the latest Angular Material 5.0.0-rc0 in my Angular 5 app. I am trying to select a range of dates with the datepicker provided with Angular material, but I couldn't find any documentation regarding that. All I could work with it is to select a startDate or set the minDate and maxDate . Here's the HTML code for that <mat-form-field> <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"><

问题 tltr: can I access the assets directory from angular? I have a bunch of SVGs in a folder src/assets/icons that I use with mat-icon . The only drawback is when I add a new icon, I have to add the file and I have to add the filename to an array which I use to loop through for adding it to matIconRegistry . Is there a way to simply read all files from the directory? Here's my current solution: @NgModule() export class CustomIconModule { constructor( private matIconRegistry: MatIconRegistry,

问题 tltr: can I access the assets directory from angular? I have a bunch of SVGs in a folder src/assets/icons that I use with mat-icon . The only drawback is when I add a new icon, I have to add the file and I have to add the filename to an array which I use to loop through for adding it to matIconRegistry . Is there a way to simply read all files from the directory? Here's my current solution: @NgModule() export class CustomIconModule { constructor( private matIconRegistry: MatIconRegistry,

问题 Looking at the Angular Material documentation, they recommend using a -theme file per component to manage applying any theme-related styles to a specific class. From my perspective, some downsides to this approach are: quite verbose splits up the style into two different locations all your frontend devs need to understand how Angular Material colours work makes it harder to change values (e.g. we might've been using mat-color($primary, 200) for border colours and now want to change it to mat

问题 I am using Angular 2 with Angular Material. Looking at the documentation, I am trying to get the select to have a default value as oppose to an empty place holder. I have tried the following two options and both of them does not set a default value <md-select selected="1"> <md-option value="1" >One</md-option> <md-option value="2">Two</md-option> </md-select> <md-select> <md-option value="1" selected="true">One</md-option> <md-option value="2">Two</md-option> </md-select> I looked at all the

问题 I have the following files: .html <nav> <md-toolbar color = "primary"> <a [routerLink] = "['new-patient']">New Patient</a> <button md-icon-button color = "accent"> <md-icon class = "material-icons md-24">person_add</md-icon> </button> </md-toolbar> </nav> .ts import { Component, OnInit } from '@angular/core'; import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router'; import { MdToolbar } from '@angular2-material/toolbar'; import { MdIcon, MdIconRegistry } from '@angular2-material

问题 For mdDialog, how do I pass in variable? Specifically, how to inject an Angular service into the dialog component? 回答1: For passing variables you can grab the instance of the component opened in the dialog, from the MdDialogRef instance returned in the MdDialog.open() method call. dialogRef = this.dialog.open(PizzaDialog, config) dialogRef.componentInstance.<property_name> Modified Pizza from the github material2 docs @Component({ selector: 'pizza-component', template: ` <button type="button"

问题 I succeeded in making the menu appear on mouseenter . What I want to do now is make it disappear on the mouseleave event of the menu itself. Any ideas on how to make this possible? <button mat-button [mat-menu-trigger-for]="menu" #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()"> TRIGGER BUTTON </button> <mat-menu #menu="matMenu" [overlapTrigger]="false" (mouseleave)="menuTrigger.closeMenu()"> <button mat-menu-item [routerLink]="['sources']"> <mat-icon>view_headline</mat

问题 I have an array that comes from my API and I'm using Material2#AutoComplete to filter this... it's working so far, however I'm in trouble to display the another property instead of the binded value in option . I know I have to use displayWith, however it isn't working as I'm expecting. The function called as [displayWith]="displayFn.bind(this)"> just returns me the id , how can I get the full object and so return the name on function. BTW, I still want to have the id binded in my FormControl