How to toggle between List and Grid View in Angular?

1 min read

You can toggle between the Grid and List view by rendering the components based on the condition while clicking the button.

This is explained in the following sample code in which we have rendered the Grid and List View inside the *ngIf directive. While clicking the button the view will be changed based on the condition.

HTML

<div id="view" class="e-btn-group">
    <input type="radio" id="left" name="align" value="1" (click)="changeDisplay(1)"/>
    <label class="e-btn" for="left">Grid View</label>
    <input type="radio" id="right" name="align" value="2" (click)="changeDisplay(2)"/>
    <label class="e-btn" for="right">List View</label>
  </div>
 
  <div class="row" *ngIf="display === 1;else list_content">
    <ejs-grid [dataSource]='data' height='350'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
        <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
        <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'>
        </e-column>
      </e-columns>
    </ejs-grid>
  </div>
  <ng-template #list_content>
    <ejs-listview id='sample-list-flat' [dataSource]='listData'></ejs-listview>
  </ng-template>

 
changeDisplay(mode: number): void {
    this.display = mode;
  }

Demo: https://stackblitz.com/edit/angular-toggle-grid-list-view?file=app.component.html

Did you find this information helpful?

Yes

Comments (0)

How to toggle between List and Grid View in Angular?

Access denied