[![npm version](]( [![npm all downloads](]( [!


1132.0.03 years ago5 years agoMinified + gzip package size for angular-switchable-grid in KB


Angular Switchable Grid

npm version npm all downloads npm week downloads npm month downloads npm  year downloads npm license

A simple grid for angular, Which can be switched between typical List view and a tile block view



Install through npm;

npm install --save angular-switchable-grid

Then import GridModule and include it in your apps for module.

import { Component, NgModule } from '@angular/core';
import { GridModule } from 'angular-switchable-grid';
  imports: [
export class MyModule {}

Then add angular-switchable-grid to your app template.


  <ng-template let-item>



Style guide will be added soon.


angular-switchable-grid properties.

Property| Input/Output| Default value | Description | -------| --------|-------|:--------------| |[data]| Input | [] - empty array |The data to be displayed in the grid.| |[columns]| Input| [] - empty array | Titles of the columns in the grid. Type should be Array<{ property: string, displayName: string, width?: string }>| |[enableSelection]| Input| false| Enable the selection of the rows of the grid.| |[enableMultiSelect]| Input| false| Enable the multiple selection of the rows of the grid.| |[filterBy]| Input| '' - empty string| Grid will be filtered by this key.| |[filterTerm]| Input| '' - empty string| Grid will filter its's content by the filterBy and will display only the items which are similar to the this.| |[enableSort]| Input | false |Enables sorting in the grid| |[enablePagination]| Input | false |Enables pagination in the grid| |[isGridView]| Input | false |If sets to true, Grid's view will be changed to Tile view from List view.| |[noDataTemplate]| Input | Simple text 'No Data' | The template that will be displayed when there is no data.| |(getSelectedItems)| Output | [] - empty array | Will emit the selected items when user is selecting items from the grid.|

And should pass a template for the row template.

 <ng-template let-item>

Public methods that can be used to access features of the grid.

exportAsExcelFile() - Export the grid data to a excel file.
selectAll() - Select all the items in the grid.
deselectAll() - Deselect all selected item in the grid.


  • Grid pagination.
  • Lazy loading.

Any suggestions?

Drop me a e-mail

Or open a new issue in


Anuradha Gunasekara
Brion Mario
| | :---: | :---: |


This software is licensed under the MIT license

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from