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.
