can we control mat-drawer toggle speed in angular?

93 views Asked by At

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>

0

There are 0 answers