mat-table

问题 Is it possible to insert a component into another parent component and pass data to the child component from the parent component? User Component Table Component Detail Component in user.html <app-table> <app-detail></app-detail> </app-table> in table.html <div *ngFor="let item of items"> <ng-content [item]="item"></ng-content> (its my problem) </div> 回答1: You can use ngTemplateOutlet : https://angular.io/api/common/NgTemplateOutlet <app-user> <app-table [cardTemplate]="pCard"></app-detail> <

问题 Is it possible to insert a component into another parent component and pass data to the child component from the parent component? User Component Table Component Detail Component in user.html <app-table> <app-detail></app-detail> </app-table> in table.html <div *ngFor="let item of items"> <ng-content [item]="item"></ng-content> (its my problem) </div> 回答1: You can use ngTemplateOutlet : https://angular.io/api/common/NgTemplateOutlet <app-user> <app-table [cardTemplate]="pCard"></app-detail> <

问题 Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example: https://material.io/design/components/data-tables.html#behavior it look like it's still an open issue on gitHub: https://github.com/angular/material2/issues/5982 回答1: inside your matColumnDef you should have a <th></th> and a <td></td> , simply add input to the <td></td> with reactive forms. if you wish it to be practically the same as the

问题 Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example: https://material.io/design/components/data-tables.html#behavior it look like it's still an open issue on gitHub: https://github.com/angular/material2/issues/5982 回答1: inside your matColumnDef you should have a <th></th> and a <td></td> , simply add input to the <td></td> with reactive forms. if you wish it to be practically the same as the

问题 I have different types of items in my mat-table : Files and Folders. They have to get sorted like in Microsofts file-explorer. Folders can`t be separated from folders and likewise with files. All other sorting rules staying the same. Has anyone an idea how to solve this? Thank you in advance! 回答1: You will have to overwrite the sortData on your MatTableDataSource attached to the table. This is the function that is responsible for sorting records, e.g. this.dataSource.sortData = (data:

问题 I have different types of items in my mat-table : Files and Folders. They have to get sorted like in Microsofts file-explorer. Folders can`t be separated from folders and likewise with files. All other sorting rules staying the same. Has anyone an idea how to solve this? Thank you in advance! 回答1: You will have to overwrite the sortData on your MatTableDataSource attached to the table. This is the function that is responsible for sorting records, e.g. this.dataSource.sortData = (data:

问题 When scrolling horizontally mat-table, row does not expand to the end of column, just columns that are present on the screen. Because of that, when horizontal scrolling to the right, when mat-row goes out of screen, left sticky columns also leaves (see black border that are present on bottom of mat-row). Url example link: https://stackblitz.com/edit/angular-ddqxvn Is it possible to expand mat-row to all columns (even does that are out of screen), which will keep sticky columns on the left. I

问题 When scrolling horizontally mat-table, row does not expand to the end of column, just columns that are present on the screen. Because of that, when horizontal scrolling to the right, when mat-row goes out of screen, left sticky columns also leaves (see black border that are present on bottom of mat-row). Url example link: https://stackblitz.com/edit/angular-ddqxvn Is it possible to expand mat-row to all columns (even does that are out of screen), which will keep sticky columns on the left. I

问题 I am having the spitted header angular material table and I was looking for help to add the sticky header. I have tried to using sticky: true but somehow it is not working for my first column (as I am hiding the column.) And for the first rows. It is showing the second row. Below is my table When I go with the dropdown only these headers get sticky behavior than others. Below is my stackblitz. https://stackblitz.com/edit/angular-bklajw-5foa62 回答1: To make the top header sticky add sticky tag

问题 Is there a way to extend a mat-table that automatically includes the matSort directive (and other custom directives that interact with the columns, like filter) and still have the content inside hold the mat-sort-header directives? <mat-table [matSortActive]="sortActive" [matSortDirection]="sortDirection" matSort> <ng-content></ng-content> </mat-table> Here is an example: https://stackblitz.com/edit/angular-bxsavu. I've tried creating a component on its own that just puts <ng-content> inside