This is my code. I want to slow the mat-drawer
toggle speed. How does it do it?
<mat-drawer-container class="example-container" autosize>
<mat-drawer
#drawer
mode="side"
*ngIf="fulDeviceList.length !== 0"
[position]="isRtl ? 'start' : 'end'"
>
<h1 class="expand-header" [ngClass]="{ 'expand-header__rtl': isRtl }">
CMV:Cinematic
</h1>
<mat-accordion [ngClass]="{ 'mat-accordion__rtl': isRtl }">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Device Info</mat-panel-title>
</mat-expansion-panel-header>
<div class="mat-expantion-body-item">
<div>deviceRealModel</div>
<div>DB43J</div>
</div>
<div class="mat-expantion-body-item">
<div>deviceModel</div>
<div>DBJN</div>
</div>
<div class="mat-expantion-body-item">
<div>deviceVersion</div>
<div>1.3</div>
</div>
<div class="mat-expantion-body-item">
<div>deviceFirmwareVersion</div>
<div>T-KTMLAKUC-2140.2</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Network Info</mat-panel-title>
</mat-expansion-panel-header>
<div class="mat-expantion-body-item">
<div>deviceIP</div>
<div>10.20.1.230</div>
</div>
<div class="mat-expantion-body-item">
<div>deviceMAC</div>
<div>64:1c:b0:46:b8:49</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</mat-drawer>
<div
class="qm-blocking-list__main"
[ngStyle]="{ height: dashboardRowCSSHeight }"
>
<div
class="mat-elevation-z8 qm-blocking-list__container"
[ngClass]="{
'qm-blocking-list__container__full':
fulDeviceList === undefined ||
(fulDeviceList && 6 > fulDeviceList.length)
}"
[ngClass]="{ 'qm-blocking-list__main__rtl': isRtl }"
>
<table
*ngIf="fulDeviceList.length !== 0"
id="app-full-list"
mat-table
[dataSource]="dataSource"
matSort
class="qm-blocking-list__table"
matSortDirection="asc"
multiTemplateDataRows
>
<ng-container matColumnDef="name">
<th
class="qm-blocking-list__table__header-cell"
[ngClass]="{ 'qm-blocking-list__table__rtl': isRtl }"
*matHeaderCellDef
mat-sort-header
>
{{ "device.list.name" | translate }}
</th>
<td
mat-cell
class="qm-blocking-list__table__data-cell"
[ngClass]="{ 'qm-blocking-list__table__data-cell__rtl': isRtl }"
*matCellDef="let row"
>
{{ row.name }}
</td>
</ng-container>
<ng-container matColumnDef="action">
<th
class="qm-blocking-list__table__header-cell"
[ngClass]="{ 'qm-blocking-list__table__rtl': isRtl }"
*matHeaderCellDef
mat-sort-header
>
{{ "device.list.action" | translate }}
</th>
<td
mat-cell
class="qm-blocking-list__table__data-cell"
[ngClass]="{ 'qm-blocking-list__table__data-cell__rtl': isRtl }"
*matCellDef="let row"
>
<div class="qm-blocking-list__table__buttons">
<button
(click)="openDeviceSettingModal()"
class="qm-action-btn qm-action-btn qm-blocking-list__table__edit-btn"
[ngClass]="{ 'qm-blocking-list__table__editrtl': isRtl }"
>
<i
class="qm-action-btn__icon icon-edit"
aria-hidden="true"
></i>
</button>
<button
type="button"
class="qm-action-btn qm-action-btn qm-blocking-list__table__close-btn"
(click)="checkDrawer(row)"
*ngIf="!isRtl; else Rtl"
>
<ng-container
*ngIf="
fulDeviceList[row.id - 2].expanded === true;
else collapsed
"
>
<i
class="qm-action-btn__icon icon-caret-right"
aria-hidden="true"
></i>
</ng-container>
<ng-template #collapsed>
<i
class="qm-action-btn__icon icon-caret-left"
aria-hidden="true"
></i>
</ng-template>
</button>
<ng-template #Rtl>
<button
type="button"
class="qm-action-btn qm-action-btn qm-blocking-list__table__close-btn"
(click)="checkDrawer(row)"
>
<ng-container
*ngIf="
fulDeviceList[row.id - 2].expanded === true;
else collapsed
"
>
<i
class="qm-action-btn__icon icon-caret-left"
aria-hidden="true"
></i>
</ng-container>
<ng-template #collapsed>
<i
class="qm-action-btn__icon icon-caret-right"
aria-hidden="true"
></i>
</ng-template>
</button>
</ng-template>
</div>
</td>
</ng-container>
<tr
mat-header-row
*matHeaderRowDef="displayedColumns; sticky: true"
></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
[ngClass]="{ highlight: sharedService.selectedRowIndex == row.id }"
></tr>
<tr class="mat-row" *matNoDataRow>
<td
*ngIf="dataSource.filter.length > 0"
class="mat-cell"
colspan="4"
>
{{ "label.no.data.matching" | translate }} "{{
dataSource.filter
}}"
</td>
</tr>
</table>
<div *ngIf="fulDeviceList.length === 0" class="qm-empty-table">
<div class="qm-empty-table__heading"></div>
<div class="qm-empty-table__content">
<i
class="qm-action-btn__icon icon-search qm-empty-table__icon"
aria-hidden="true"
></i>
<div class="qm-empty-table__text">
{{ "device.list.default.placeholder" | translate }}
</div>
</div>
</div>
</div>
<div
class="qm-pagination-container"
[ngClass]="{ 'qm-pagination-container__rtl': isRtl }"
>
<mat-paginator
[ngClass]="{ 'qm-pagination-container__paginator__rtl': isRtl }"
[pageSizeOptions]="[5, 10, 25]"
showFirstLastButtons
></mat-paginator>
</div>
</div>
</mat-drawer-container>