angular-material2

问题 I've already got the content that is sent by a form home.component.ts ... constructor(private route: ActivatedRoute){} /** * Get the names OnInit */ ngOnInit() { this.form= { postcode: this.route.snapshot.params['postcode'], date_from: this.route.snapshot.params['date_from'], date_to: this.route.snapshot.params['date_to'] } console.log( this.form); // {postcode: "WEDSW", date_from: "11/09/2017", date_to: "16/09/2017"} } now what I need to do it's to populate it doing something like <input

问题 Continue to the Using angular material 2 table to display the result from backend based on user's current location My purpose for this code is when user enter the site, it will try to ask user the current location. Once my front end get current lat/lon, it will pass to backend to get the nearest restaurant based on user's location, and using angular material table to display it. But when I testing on Chrome, I got weird behavior, the home page will not display the result immediately on the

问题 I want to use Angular Material's components while taking advantage of Materialize CSS's utilities (text colors, typography, buttons...). However, it looks like both libraries can't work along-side each other. If I try to include Angular Material and Materialize (only css file) the styles looks broken. Now that I'm thinking about it, even the HTML that every library requires is different (I'm talking about the final-compiled html of course). Does anyone knows how to overcome this? I use

问题 Am trying to have a different background for odd/even rows in the md-list. Not sure if this is supported using Angular Material 2 - Md-list component as I don't see any documentation on this. I believe angular 2 supports this using the ng-class-odd/ng-class-even 回答1: You should be using below styles in your component .mat-list > .mat-list-item:nth-child(2n+1){ background-color:red; } .mat-list > .mat-list-item:nth-child(2n){ background-color:blue; } LIVE DEMO 来源： https://stackoverflow.com

问题 I have been trying to use the autocomplete component from Angular Material2. But I have some doubts. How to load suggestion data from HTTP service, and filter this list on the fly? How to get access to selected option(object) in my component? Is there any way to formatting selected option with HTML (multiline values), like on PrimeNg autocomplete using pTemplate? Sample: https://embed.plnkr.co/vR9QLk/ 回答1: You can get the selected item with help of the function, you have your selected item in

问题 We are rebuilding our web application and have chosen to use Angular as frontend framework and Google Material as main style concept because it is simple and popular. Most of our pages will be part of Angular application but some will be not. We want to use the same classes/styles and theme at any page of our application and avoid code duplication. The main question is: how to use Material Design classes from Angular Material toolkit on pages without Angular? We've not found complete Angular

问题 I'm writing a code to edit names in account information and button works fine but i want edit button as an icon (pencil). Icon does not support ngIf, is there any alternative? (Angular 5/6) My code is as follows: <div> <mat-form-field class="example-full-width" *ngIf="edit"> <input matInput placeholder="Enter name . [(ngModel)]="name"> </mat-form-field> <span *ngIf="!edit">Name : {{name}}</span> </div> <div class="example-button-row"> <button mat-raised-button color="primary" *ngIf="!edit"

问题 I work on angular 5 application that use material module as a UI interface, i create template for all my projects and i want projects use this application as a library and my changes to general part of template [sidebar, navigationbar] update on library and apply to all projects. is this a good pattern? if this possible, how to do this in angular 5? 回答1: If you want to create a reusable library you can use ng-packagr ng-packagr is a node library that can compile and package a TypeScript

问题 I have a simple mat-table with mat-paginator . By default design it looks like this: I would like to change the placing of the range label and put it between the navigation buttons, like this: Basically, I need to move the div.mat-paginator-range-label an element from the top of this container between button.mat-paginator-navigation-previous and button.mat-paginator-navigation-next . Any idea of how to do it? Thanks. 回答1: Actually because the "mat-paginator-container" uses flexbox you can

问题 I'm trying to generate a new material theme with a custom palette for the primary color, the scss code is below: @import '~@angular/material/theming'; @include mat-core(); $potti-brown: ( 50: #fcf2e7, 100: #f8dec3, 200: #f3c89c, 300: #eeb274, 400: #eaa256, 500: #e69138, 600: #e38932, 700: #df7e2b, 800: #db7424, 900: #d56217, A100: #ffffff, A200: #ffe3d4, A400: #ffc3a1, A700: #ffb287, contrastDefaultColor: light, contrastDarkColors: ( 50, 100, 200, 300, 400, 500, 600, 700, 800, A100, A200,