angular-material2

Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental

由 旧街凉风 提交于 2021-02-05 19:59:57
问题 I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've found: <cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5"> <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item"> <div class="state">{{state.name}}</div> <div class="capital">{{state.capital}}</div> </div> <

Using Virtual Scroll in Angular Material 2 Table with @angular/cdk-experimental

由 可紊 提交于 2021-02-05 19:59:27
问题 I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've found: <cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5"> <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item"> <div class="state">{{state.name}}</div> <div class="capital">{{state.capital}}</div> </div> <

mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window

由 南笙酒味 提交于 2021-02-04 23:57:39
问题 When I checked the slide toggle it should work as expected. But when I try to uncheck it there is a confirmation window asking if you are sure. When I click cancel in that confirmation window, still the toggle changes to unchecked, which shouldn't happen. It should stay in the same state. Here is my Html and TS Code // html <mat-slide-toggle (change)="change($event)" [checked]="isChecked()" > To-pay </mat-slide-toggle> TS code: // ts change(e) { if(this.checked) { if(confirm("Are you sure"))

Connect method DataSource is not emitting all paginated rows for MatTable

由 僤鯓⒐⒋嵵緔 提交于 2021-02-02 09:57:01
问题 I am trying to use the DataSource interface to update MatTableData, using server-side pagination. <div> <mat-table [dataSource]="dataSource" matSort matSortDisableClear> <ng-container matColumnDef="type"> <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200 th-center"> Type</mat-header-cell> <mat-cell *matCellDef="let v" class="w-200 th-center"> {{v.type}} </mat-cell> </ng-container> <ng-container matColumnDef="title"> <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200

Connect method DataSource is not emitting all paginated rows for MatTable

由 ぐ巨炮叔叔 提交于 2021-02-02 09:56:53
问题 I am trying to use the DataSource interface to update MatTableData, using server-side pagination. <div> <mat-table [dataSource]="dataSource" matSort matSortDisableClear> <ng-container matColumnDef="type"> <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200 th-center"> Type</mat-header-cell> <mat-cell *matCellDef="let v" class="w-200 th-center"> {{v.type}} </mat-cell> </ng-container> <ng-container matColumnDef="title"> <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200

Connect method DataSource is not emitting all paginated rows for MatTable

由 て烟熏妆下的殇ゞ 提交于 2021-02-02 09:56:13
问题 I am trying to use the DataSource interface to update MatTableData, using server-side pagination. <div> <mat-table [dataSource]="dataSource" matSort matSortDisableClear> <ng-container matColumnDef="type"> <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200 th-center"> Type</mat-header-cell> <mat-cell *matCellDef="let v" class="w-200 th-center"> {{v.type}} </mat-cell> </ng-container> <ng-container matColumnDef="title"> <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200

Add MatDialog popup to Angular Root and not to body

由 北战南征 提交于 2021-01-29 13:48:46
问题 I have made an Angular 6 app where I have some MatDialog. This works perfectly in development mode. Now I have to implement this into an existing website (that uses sitecore 9). This works great, except that the dialogs won't open correctly. I've found out that the dialogs are added to the body and not to my angular root DOM element. <html> <head></head> <body> <app-library>...</app-library> <div class="cdk-overlay-container">...</div> </body> </html> Is there a way to add the dialog to the

Multiple dateInput formats on mat-datepicker

由 守給你的承諾、 提交于 2021-01-28 06:00:37
问题 I'm creating two mat-datepickers, one with the format "MM/YYYY" and another with the format "DD/MM/YYYY",but i can't configure both formats in the module. I tried to put in one module the settings for MM/YYYY and in the app module the settings for DD/MM/YYYY. Code 1: export const MY_FORMATS = { parse: { dateInput: 'MM/YYYY', }, display: { dateInput: 'MM/YYYY', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, ... providers: [{ provide: DateAdapter, useClass:

mat-select dropdown position not aligned

由 為{幸葍}努か 提交于 2021-01-28 05:34:14
问题 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

Ink bar under centered tabs not being aligned properly when opening sidenav using Angular Material

由 倖福魔咒の 提交于 2021-01-27 16:52:37
问题 I want to add some tabs on top of my page, and I want to center them. I am however getting the ink bar under the tabs misaligned when I open the sidenav. Clicking on either tab will reset the ink bar, and reposition it correctly though. How can I make the ink bar be aligned properly? I am using ViewEncapsulation.None on my component, and I have overriden the css for mat-tab-list like this: .mat-tab-list{ display: flex; justify-content: center; } Maybe there is another (proper) way to center
订阅 angular-material2