angular-material2

问题 I am using Angular material-2 for my frontend, I want to display different images for desktop and mobile screens I have this code shown below <div class="banner"> <img [src]="images.desktopBanner"/> <img [src]="images.mobileBanner"/> </div> I want to display desktopBanner image in large devices and mobileBanner in small screens. NOTE: marking display:none using media query is not the best solution as this might not display both the images together but if you check the network call it will

问题 I try to create a component which includes two dataTables each of it with another dataSource. My Tables aren't visible right after the component is loaded because of my *ngIf so that i couldn't use ngAfterViewInit() instead i'm using a solution a user pointed out on Github: private paginator: MatPaginator; private reportingPaginator: MatPaginator; private sort: MatSort; private reportingSort: MatSort; @ViewChild(MatSort) set matSort(ms: MatSort) { this.sort = ms; this.reportingSort = ms; this

问题 The mat-select element is acting funny. See below. Code <mat-form-field> <input matInput placeholder="Name" #NameInput> </mat-form-field> <mat-select placeholder="How Many?"> <mat-option>One</mat-option> <mat-option>Two</mat-option> <mat-option>Three</mat-option> <mat-option>Four</mat-option> <mat-option>Five</mat-option> </mat-select> Results Wrapping the mat-select in a mat-form-field gives me the following error: mat-form-field must contain a MatFormFieldControl. Did you forget to add

问题 So I'm trying to use an MdDialog to display an error message. Unfortunately, it appears not as a popup, but as a block at the bottom of the page. What do I need to look at or change to make this work correctly? code below common-modal.component.html <h2 md-dialog-title>{{ title }}</h2> <md-dialog-content> <p>{{ message }}</p> </md-dialog-content> <md-dialog-actions align="right"> <button md-raised-button md-dialog-close>{{ closeText }}</button> <button md-raised-button *ngIf="enableNext" id=

问题 Is there a way to make a collapsible card using angular material? Seems like something that would be fairly popular, but I've been searching for the appropriate angular material component/setting here:Angular Material - Card and found nothing. Thanks! 回答1: Like Will mentioned, just use the expansion panels. https://material.angular.io/components/expansion/overview Otherwise just create a normal Angular Material card and implement your own collapse mechanic with the [hidden] quality or some

问题 What is the best way to update angular material in a project to latest version material@2.0.0-alpha.8-3 ? I tried: npm install --save @angular/material @angular/cdk 回答1: You'll want to use the npm update command. And example would look like this. npm update @angular/material @angular/cdk This will install the latest stable version. If you would like to target a specific version, you would have to specify it by adding the version to the end after an @ symbol. Additionally, you can check for

问题 Does anybody know how to use/enable the animated icons in an Angular WebApplication which are shown in the material design documentation: https://material.io/design/iconography/animated-icons.html#usage 回答1: As other have stated the examples on the Material Icon sites would have to be built. However, I found my way to this question looking for a guide on how to animate angular material icons and for others looking for the same I have a solution. The default animation can be customized to

问题 I am using Angular Material on a project. Within that project I have a form that is using an autocomplete component. Everything is working well - however, I would like to add placeholder text when the user focuses the input element. Here is my html template: <input type="search" matInput placeholder="My Placeholder" aria-label="My Placeholder" [matAutocomplete]="mySearch" [formControl]="myCtrl" (focus)="onInputFocus()" [(ngModel)]="myModel"> within my .ts file, I have this method: public

问题 There are numerous questions regarding this topic specifically with regards to expanding rows. However, all implementations I have seen are done by either using accordion/panels styled like tables (which require more things to be done to accommodate pagination and sorting), using the when predicate (which seems to have issues when trying to utilize pagination), or what seems to be the ideal solution is to have a directive attached to the mat-row element. The last solution is really close to

问题 I'm trying to implement infinite scroll for autocomplete in angular material 6. My scenario is straightforward, I have an input filed with autocomplete enabled. when the user types, I will make the HTTP call with text in the input filed to show the results as suggestions. But I want to show only 25 suggestions, if results count more than 25 when user scroll to the bottom I want to add one more 25. Like this in angular 2 I was not able to find online. Please advise or help me. Thankyou in