angular-material-5

Add a new row into mat-table using angular 4

由 放肆的年华 提交于 2019-12-21 03:01:24
问题 How to add a new row into Angular Material table manually from a input field. Please see this image in that if i add a state name and state code it should present in the following table please help me how to achieve it using Angular 4. 回答1: I've put together a quick example that should give you a good hint as to where to start from: Working demo This works by using two-way data binding on the input field to keep track of what the user typed in the form. When the add button is then pressed,

How to get Id of selected value in Mat-Select Option in Angular 5

由 元气小坏坏 提交于 2019-12-19 05:23:47
问题 How to get the id of selected option value in mat-select angular 5. Get only value of selected option in onchangeevent. but how can get id of selected option value. client.component.html <mat-form-field> <mat-select placeholder="Client*" #clientValue (change)="changeClient($event)"> <mat-option *ngFor="let client of clientDetails" [value]="client.clientName"> {{client.clientName | json}} </mat-option> </mat-select> </mat-form-field> client.component.ts file export class Client{ changeClient

How to place “mat-toolbar” on top of “mat-sidenav” Angular Material 5

由 扶醉桌前 提交于 2019-12-12 13:42:35
问题 I'm writing here since I have a question about Mat Toolbar and Mat-sidenav from Angular Material. I'm trying to get the Sidenav to go under the toolbar and the toolbar always occupies the top part, something like this: Example Here´s my code: <mat-sidenav-container class="sidenav-container" autosize> <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'" [opened]="(isHandset$ |

Sorting Not Working Angular Material Design Table

由 半腔热情 提交于 2019-12-11 18:16:50
问题 Using an Angular Material Design table, I'm simply trying to sort the headers of two columns in a data table. (They are the Employee Name and Job Title columns in the code below.) Both aren't sorting. Not sure why. Here's my code and thanks, CM employee-table.component.html <div> <mat-table [dataSource] = "dataSource" matSort> <ng-container matColumnDef="photo"> <mat-header-cell *matHeaderCellDef>Profile</mat-header-cell> <mat-cell *matCellDef="let employee"><img width = "100" height = "100"

Center Mat-Menu, Center MatMenu Overlay to Button

由 别等时光非礼了梦想. 提交于 2019-12-11 17:17:18
问题 Per Material Issue 9631 centering the mat-menu to the button is as follows. the issue is that supporting it deviates from the spec and may end up looking weird. I have a need for this functionality... Because writing my own CDK overlay would be more time intensive than overriding the mat-menu component... I am not interested in re-creating the mat-menu , and simply need the menu to be centered... I am also not interested in any other library's to accomplish this, I want to use Material mat

Angular Material mat-form-field Placeholder text on multiple lines

由 自闭症网瘾萝莉.ら 提交于 2019-12-11 03:01:55
问题 I use a regular mat-form-field with a textarea inside. My issue is that the placeholder text for this Textarea is rather long. In mobile, where space is more limited, this placeholder text is truncated by Angular Material with an ellipsis. I would like to have the placeholder text adjust to space restrictions by shifting down onto the next line. So, for example, instead of: This is a really long text and it cannot fit on a single li... I would like: This is a really long text and it cannot

Angular 5 Material Multiple mat-menu

由 妖精的绣舞 提交于 2019-12-06 03:49:51
问题 I am quite new to Angular 5 and have just started learning it. Recently, I have been trying to create a menu bar with multiple menus for my app using Angular 5 Material. The menu will be triggered/opened during mouse enter and closed when the mouse leaves the menu. My problem is that everytime the mouse mouse hovers to the first menu it loads the menu items of the 2nd menu. Here is a screenshot of the problem: Here are my codes: mainmenu.component.html : <div> <button mat-button

How to get Id of selected value in Mat-Select Option in Angular 5

由 五迷三道 提交于 2019-12-05 01:16:32
How to get the id of selected option value in mat-select angular 5. Get only value of selected option in onchangeevent. but how can get id of selected option value. client.component.html <mat-form-field> <mat-select placeholder="Client*" #clientValue (change)="changeClient($event)"> <mat-option *ngFor="let client of clientDetails" [value]="client.clientName"> {{client.clientName | json}} </mat-option> </mat-select> </mat-form-field> client.component.ts file export class Client{ changeClient(event){ console.log(event); } } Vivek Doshi For that you need to : Change (change)="changeClient($event)

Why can't I style angular material stepper elements directly?

由 試著忘記壹切 提交于 2019-12-05 00:59:19
问题 Here is a code example I've forked from the official angular documentation for stepper: https://stackblitz.com/edit/angular-tth817 In my fork, I'm trying to achieve a couple of things: I want to hide the stepper header. I've tried doing this by styling .mat-horizontal-stepper-header-container (actually just adding a border to it). I forced the content of the last step to be tall. There, you can see that the buttons on each step no longer align. What I would like to do is have the stepper

Angular 5 Material Multiple mat-menu

由 馋奶兔 提交于 2019-12-04 08:35:34
I am quite new to Angular 5 and have just started learning it. Recently, I have been trying to create a menu bar with multiple menus for my app using Angular 5 Material. The menu will be triggered/opened during mouse enter and closed when the mouse leaves the menu. My problem is that everytime the mouse mouse hovers to the first menu it loads the menu items of the 2nd menu. Here is a screenshot of the problem: Here are my codes: mainmenu.component.html : <div> <button mat-button [matMenuTriggerFor]="menu1" (mouseenter)="openMyMenu()">Trigger1</button> <mat-menu #menu1="matMenu" overlapTrigger=
订阅 angular-material-5