Angular Switchable Grid is a simple angle grid, which can be toggled between a typical list view and a tile block view.
toggle between list and grid view angular, angular grid example, grid and list view in angular
How to make use of it:
Installation:
npm install --save angular-switchable-grid
1. Then import GridModule and include it in your apps for the module.
import { Component, NgModule } from '@angular/core'; import { GridModule } from 'angular-switchable-grid'; @NgModule({ imports: [ GridModule ] }) export class MyModule {}
2. Then add angular-switchable-grid to your app template.
<angular-switchable-grid [data]="data" [columns]="columnTitles" [enableSelection]="true" [enableMultiSelect]="true" [filterBy]="'first_name'" [filterTerm]="filterTerm" [enableSort]="true" [isGridView]="isGridView" [noDataTemplate]="null" (getSelectedItems)="getSelectedItems($event)"> <ng-template let-item> <div>{{item.id}}</div> <div>{{item.first_name}}</div> <div>{{item.last_name}}</div> <div>{{item.email}}</div> <div>{{item.gender}}</div> <div>{{item.ip_address}}</div> </ng-template> </angular-switchable-grid>
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. |
angular switchable grid component, angular switchable grid Plugin/Github
See Demo And Download
Official Website(sanuradhag): Click Here
This superior jQuery/javascript plugin is developed by sanuradhag. For extra advanced usage, please go to the official website.