angular-material

问题 I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like displayFn(id) { return this.getValue(id) } getValue(id) { /**return some string } For the autocomplete <mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of outletFilterOptions | async [value]=

问题 I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like displayFn(id) { return this.getValue(id) } getValue(id) { /**return some string } For the autocomplete <mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of outletFilterOptions | async [value]=

问题 I am using angular 4 with angular materials to construct a table. I want the mat-sort-header to be added conditionally on the following template. <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell> I have tried the following code: <mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='id' ? column : false ">Id</mat-header-cell> But it still adds the sorting header in the table for this column. My overall table looks as follows, and is working fine, except for the

问题 I am using angular 4 with angular materials to construct a table. I want the mat-sort-header to be added conditionally on the following template. <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell> I have tried the following code: <mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='id' ? column : false ">Id</mat-header-cell> But it still adds the sorting header in the table for this column. My overall table looks as follows, and is working fine, except for the

问题 I'm using Material tabs in my application ( mat-tab s inside mat-tab-group ) When there are more tabs than can be displayed, two navigation buttons are shown to display the other tabs: My requirement is to enable the user to scroll on the tab bar so that other tabs are shown. I tried to do some css changes but couldn't solve it. It's highly appreciated if any solution or suggestion can be given. 回答1: Try my solution in this stackblitz demo. First get a reference to the matTabGroup: app

问题 Please how do I implement this type ahead from an api to display the list of countries in an input field on keypress. Here is an implementation using ng-bootstrap on stackblitz: https://ng-bootstrap.github.io/stackblitzes/typeahead/prevent-manual-entry/stackblitz.html But I want it in angular material. Please help. Here is the api for list of countries to display on keypress: https://api.printful.com/countries 来源： https://stackoverflow.com/questions/61575366/typeahead-in-angular-material-on

问题 As you can see in the picture above my search component(which is an autofill component from material.angular.io) displays its options after the navbar(green) ends, I want my options to display right under the search box, on top the green navbar. this is my bootstrap navbar <nav class="navbar navbar-expand-lg navbar-light bg-light mynavbar"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria

问题 I have a dropdown with user names. I would like to order it alphabetically. How can I achieve this? <md-select formControlName="user" id="user" style="min-width: 200px;"> <md-option *ngFor="let user of users" [value]="user.id"> {{user.displayName}} </md-option> </md-select> 回答1: you can build a custom OrderBy Pipe for this. For example the below OrderBy Pipe will sort the object array by the key you passed to it with alphabetically or value based (order: asc ): @Pipe({name: 'OrderBy'}) export

问题 I am working on a "Tasks" application in Angular 9 and PHP. I run into this a Cannot find control with name: <controll name> error while trying to pre-populate the update form with data. The form template: <form [formGroup]="updateTask" name="edit_task_form"> <mat-form-field appearance="standard"> <mat-label>Title</mat-label> <input matInput placeholder="Title" formControlName="title" placeholder="Title"> </mat-form-field> <mat-form-field appearance="standard"> <mat-label>Short Description<

问题 I have a mat-table where I display list of rows. I have a add new button through which user can manually add a row. Working Stackblitz: https://stackblitz.com/edit/angular-axjzov-8zmcnp I want the option to highlight the newly inserted row for 2-3 sec so that the user can see the newly created row. How do I achieve this? 回答1: You can add this to the style css mat-row.mat-row { animation: highlight 3s; } @keyframes highlight { 0% { background: red } 100% { background: none; } } In case you