angular-material

问题 I'm using some angular material components but something went wrong with input box and and select option elements. The select option is not aligned properly. when i click to see select option list it showing me outside of my current div or can say left side of page which is not correct. ng -v Angular CLI: 1.7.4 Node: 8.11.1 OS: win32 x64 Angular: 5.2.11 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

问题 How to reset the paginator and go to the first page? this.page = 1 does not work correctly. Just in case, I'll explain that I do not use MatPaginator . ts: pageSizeOptions = [5, 10, 25, 50, 100]; pageSize = 5; page = 1; applyFilter() { let searchFilter: any = { filterValue: this.search }; this.categories.filter = searchFilter; if (this.page !== 1) { this.page = 1; } else { this.load(); } } onPaginateChange(event) { this.page = event.pageIndex + 1; this.pageSize = event.pageSize; this.load();

问题 I'm using the Angular Material tabs component. Using an example straight from the official docs... <mat-tab-group> <mat-tab label="First"> Content 1 </mat-tab> <mat-tab label="Second"> Content 2 </mat-tab> <mat-tab label="Third"> Content 3 </mat-tab> </mat-tab-group> Everything works fine except that the font size in the tab labels is smaller than I would like and I can't seem to figure out how to make it bigger. I've tried multiple things in CSS but clearly I'm missing something. If someone

问题 I have a component which has a checkbox. <mat-checkbox class="mr-5"></mat-checkbox> I need to capture when it is checked, and then display text in another component based on the checkbox tick/selection. The second component is not the parent of the component which has the check box. How can I capture the checkbox value change, from the non-parent component? I am new to Angular. Really appreciate if I could get an example. 回答1: Exists different ways for implement transfer events between

问题 Edit: Resolved with Jojofoulk's comment. when using the autocomplete components of angular-material, I'm trying to use setValue to the input form, but its [matAutocomplete] attribute is preventing setValue from showing on the input. Inspecting the reactive control reveals the value is right, and removing [matAutocomplete] makes it work, but with it it's just not showing up. <mat-list-item role="listitem" *ngFor="let skill of curObj.skills;index as ind"> <div> <mat-form-field> <input type=

问题 Hello Stackoverflow community, I am trying to add a "Delete" button next to each mat-option of a given mat-select when hovering over the option itself. The hover portion works just fine. However, given the way I implemented this button, the data displayed after selecting an option is altered : From this : To this : Here is a snippet of the code used : HTML template : <mat-form-field appearance="outline"> <mat-select> <mat-option *ngFor="let year of data" [value]="year"> <div style="display

问题 Now on clicking of the hamburger menu i am getting drop down list instead i need it on mouse hover on hamburger menu here is the stack blitz link. 回答1: You can do this using matMenuTrigger Directive <button mat-icon-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()"> To hide menu, add mouseleave event for a menu. Bundle all your menu items within a span or div tag. And then attach (mouseleave) event to it <mat-menu #menu="matMenu"

问题 Hello Stackoverflow community, I am trying to add a "Delete" button next to each mat-option of a given mat-select when hovering over the option itself. The hover portion works just fine. However, given the way I implemented this button, the data displayed after selecting an option is altered : From this : To this : Here is a snippet of the code used : HTML template : <mat-form-field appearance="outline"> <mat-select> <mat-option *ngFor="let year of data" [value]="year"> <div style="display

问题 I am using table component in my project.In the 4th column i am displaying players names using chips as shown in below image: Here my issue is: if i add 2 or more names in players string like this: players: 'Dwayne Jhonson,Tom cruise' both the names are displaying in the same chip as shown in the above image,but i want each name to be displayed in separate chips . Something like this: Component code: HTML: <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container

问题 I am using an Angular Material Table with a rather big, pre queried Datasource. Now, everytime i change the Table Pages with the built in Paginator, i have a short Delay before the new Table-Rows are rendered and i would like to display a Loading Spinner in the meantime. The Problem is, the Paginator does only fire a single Event when the Table-Page starts changing and up to now, I did not find a solution to find out, when the new Rows are rendered completely. (This would be the moment when I