Toggle Grid List View in an angular
In this article, we will learn how to implement Toggle Grid List View in an angular application. Using bootstrap, we will perform Toggle Grid List View.
In some situations, such as when we want a list and grid layout for the same kind of data, such as Product listing, Managing products, etc., this type of design would be extremely helpful.
In order to use it from everywhere and several times with the same kind of data, we will construct a generic/shared component.
So, let's start with the implementation
First, we need to create a new angular application using the following command in the terminal.
ng new list-grid-view-angular
Now, we need to install the ng-bootstrap npm package using the following command
ng add @ng-bootstrap/ng-bootstrap
Now, we need to create a new component for list grid view using the following command.
ng g c listGridView
Now, we need to create a new class model for Contents and add the following code.
export class Contents {
id: string;
email: string;
name: string;
imageURL: string;
bio: string;
dateOfBirth: string;
mobile: string;
house: string;
}Now, add the following code under the list-grid-view.component.css to set CSS design.
.glyphicon {
margin-right: 5px;
}
.thumbnail {
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item {
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,
.item.list-group-item:hover {
background: #428bca;
}
.item.list-group-item .list-group-image {
margin-right: 10px;
}
.item.list-group-item .thumbnail {
margin-bottom: 0px;
}
.item.list-group-item .caption {
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd) {
background: #eeeeee;
}
.item.list-group-item:before,
.item.list-group-item:after {
display: table;
content: " ";
}
.item.list-group-item img {
float: left;
}
.item.list-group-item:after {
clear: both;
}
.list-group-item-text {
margin: 0 0 11px;
}
.thumbnail > img {
height: 300px !important;
}Now, Add the following code under the list-grid-view.component.html file.
<div class="container">
<div class="well well-md">
<strong>{{title}}</strong>
<div class="btn-group pull-right">
<a href="#" (click)="listView()" id="list" class="btn btn-default btn-sm"><span
class="glyphicon glyphicon-th-list">
</span>List</a> <a href="#" (click)="gridView()" id="grid" class="btn btn-default btn-sm"><span
class="glyphicon glyphicon-th"></span>Grid</a>
</div>
</div>
<div id="products" class="row list-group">
<div class="item col-xs-4 col-lg-4" *ngFor="let content of contents">
<div class="thumbnail">
<img class="group list-group-image" src="{{content.imageURL}}" width="400" height="150px" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
{{content.name}}</h4>
<p class="group inner list-group-item-text"> {{content.bio}}</p>
<p class="group inner list-group-item-text"> {{content.email}}</p>
<p class="group inner list-group-item-text"> DOB: {{content.dateOfBirth}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{content.mobile}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Contact</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Now, add the following code under the list-grid-view.component.ts file.
import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
import { Contents } from 'src/Models/contents';
declare var $: any;
@Component({
selector: 'app-listgridview',
templateUrl: './list-grid-view.component.html',
styleUrls: ['./list-grid-view.component.css']
})
export class ListGridViewComponent implements OnInit {
constructor() { }
@Input() title: string;
@Input() contents: Contents;
dataSource: Array<number> = [];
@ViewChild('listGrid', { static: false }) listGrid: ElementRef;
activeGridIcon: object = { 'background-color': '#18bc9c' };
activeListIcon: object = { 'background-color': '#212529' };
ngOnInit() {
}
listView() {
$('#products .item').addClass('list-group-item');
}
gridView() {
$('#products .item').removeClass('list-group-item');
$('#products .item').addClass('grid-group-item');
}
}Now, Using the following code add the ListGridView component under the app.component.html file.
<app-listgridview [title]="pageTitle" [contents]="contents"></app-listgridview> <router-outlet></router-outlet>
Now, add the following code under the app.component.ts file.
import { Component, OnInit } from '@angular/core';
import { Contents } from 'src/Models/contents';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title: 'ListGridViewAngular';
pageTitle: string;
contents: Contents[] = [];
ngOnInit(): void {
this.pageTitle = "My List Grid View Example";
this.contents = [
{
id: 'EMP1',
email: 'EMP1@gmail.com',
name: 'EMP 1',
imageURL: 'https://www.blogger.com/img/avatar_blue_m_96.png',
bio: 'The Code Points Developer.',
dateOfBirth: '12/09/1995',
mobile: '94290 10191',
house: '10'
},
{
id: 'EMP2',
email: 'EMP2@gmail.com',
name: 'EMP 2',
imageURL: 'https://www.blogger.com/img/avatar_blue_m_96.png',
bio: 'The Code Points Developer.',
dateOfBirth: '07/07/2018',
mobile: '94XXX 1XX91',
house: '10'
},
{
id: 'EMP3',
email: 'EMP3@gmail.com',
name: 'EMP 3',
imageURL: 'https://www.blogger.com/img/avatar_blue_m_96.png',
bio: 'The Code Points Developer.',
dateOfBirth: '07/07/2018',
mobile: '94XXX 1XX91',
house: '10'
},
{
id: 'EMP4',
email: 'EMP4@gmail.com',
name: 'EMP 4',
imageURL: 'https://www.blogger.com/img/avatar_blue_m_96.png',
bio: 'The Code Points Developer.',
dateOfBirth: '07/07/2018',
mobile: '94XXX 1XX91',
house: '10'
}
];
}
}Now, run the application using the ng serve command into the terminal and see the browser screen we are able to toggle Grid and List view.
Conclusion
In this article, we learned how to implement Toggle Grid and List View in the angular application.
I hope this article helps you and you will like it.👍
Please give your valuable feedback and comments or suggestion in the comment section
If you have any doubt or confusion then free to ask in the comment section.