view-roles.component.html

<div fxLayout="row" fxLayoutWrap="wrap">
  <div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
    <div fxFlex.gt-xs="50" fxFlex="100" class="text-sm-right text-xs-left">
      <span fxFlex></span>
      <button mat-raised-button color="primary" class="mr-1" (click)="addRoleDialog()">Add Role </button>
    </div>
    <div class="mat-box-shadow">
      <ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
        [rowHeight]="50" [limit]="10" [rows]="roleDataSOurce" [columns]="columns">

        <ngx-datatable-column name="Role ID">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row?.roleId }}
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Role Name">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{ row?.roleName }}
          </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Status">
          <ng-template let-row="row" ngx-datatable-cell-template>
            <!-- {{ row?.status}} -->
            <mat-slide-toggle></mat-slide-toggle>
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>
    </div>
  </div>
</div>