A Simple Angular Switchable Grid Component Library

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

Table of Contents

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.

PropertyInput/OutputDefault valueDescription
[data]Input[] – empty arrayThe data to be displayed in the grid.
[columns]Input[] – empty arrayTitles of the columns in the grid. Type should be Array<{ property: string, displayName: string, width?: string }>
[enableSelection]InputfalseEnable the selection of the rows of the grid.
[enableMultiSelect]InputfalseEnable the multiple selection of the rows of the grid.
[filterBy]Input” – empty stringGrid will be filtered by this key.
[filterTerm]Input” – empty stringGrid will filter its’s content by the filterBy and will display only the items which are similar to the this.
[enableSort]InputfalseEnables sorting in the grid
[enablePagination]InputfalseEnables pagination in the grid
[isGridView]InputfalseIf sets to true, Grid’s view will be changed to Tile view from List view.
[noDataTemplate]InputSimple text ‘No Data’The template that will be displayed when there is no data.
(getSelectedItems)Output[] – empty arrayWill 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.

Related Posts

Cookie-Consent-Using-Bootstrap

How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Bootstrap-Alert-Bootbox

Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…