In this article, we are going to see, how we can create a two-dimensional view (List and Grid) layout in angular. To perform this we will use bootstrap. This kind of design will very helpful in certain scenarios like if we want a list and grid layout for the same kind of data like Product listing, Manage products, etc.
We will create a generic/shared component so we can use it from anywhere and multiple times with the same kind of data.
let’s create a new app in VS code.
Go to that path where the project exists. (cd project-path) and create a new component with the below command.
ng g c listGridView
Open “list-grid-view.component.css” file and paste the below code.
.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 ;
}
Open “list-grid-view.component.html” file and paste the below code.
<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> Open “list-grid-view.component.ts” file and paste the below code.
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');
}
}
Here, we have done with our list-grid shared component now we need to just pass data to this component.
For time-saving, I directly added bootstrap CSS, script, and Jquery links inside “Index.html”. you can use same format or else you can install npm or other links as per need. I added Jquery inside the assets/js folder.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
My index.html looks like this.
Let’s see how we can use this component from other components.
<app-listgridview [title]="pageTitle" [contents]="contents"></app-listgridview>
Using this tag we can use list-grid view design from anywhere, we need to pass page title and an array of data.
We can pass the input parameters from the component where we want a list-grid view. I’ll use the app component to display a list-grid view design.
This is my app.component.ts file code.
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: 'faisalmpathan@gmail.com',
name: 'Faisal Pathan',
imageURL: 'http://staging.thecodehubs.com/wp-content/uploads/2019/06/DSC01399.jpg',
bio: 'Faisal Pathan is a . NET Project Manager, C# Corner MVP, and Founder of TheCodeHubs.com. He has extensive experience with designing and developing enterprise-scale applications.',
dateOfBirth: '12/09/1995',
mobile: '94290 10191',
house: '10'
},
{
id: 'EMP2',
email: 'info@staging.thecodehubs.com',
name: 'Faisal Pathan',
imageURL: 'http://staging.thecodehubs.com/wp-content/themes/Divi-child/img/th_author_placeholder.jpg',
bio: 'TheCodeHubs is the best way to Browse and Learn Programming. TheCodeHubs provides strategic business solutions and develop. Best Blog Website. Visit Today.',
dateOfBirth: '07/07/2018',
mobile: '94XXX 1XX91',
house: '10'
},
{
id: 'EMP2',
email: 'info@staging.thecodehubs.com',
name: 'Faisal Pathan',
imageURL: 'http://staging.thecodehubs.com/wp-content/themes/Divi-child/img/th_author_placeholder.jpg',
bio: 'TheCodeHubs is the best way to Browse and Learn Programming. TheCodeHubs provides strategic business solutions and develop. Best Blog Website. Visit Today.',
dateOfBirth: '07/07/2018',
mobile: '94XXX 1XX91',
house: '10'
},
{
id: 'EMP2',
email: 'info@staging.thecodehubs.com',
name: 'Faisal Pathan',
imageURL: 'http://staging.thecodehubs.com/wp-content/themes/Divi-child/img/th_author_placeholder.jpg',
bio: 'TheCodeHubs is the best way to Browse and Learn Programming. TheCodeHubs provides strategic business solutions and develop. Best Blog Website. Visit Today.',
dateOfBirth: '07/07/2018',
mobile: '94XXX 1XX91',
house: '10'
}
];
}
}
app.component.html code.
<app-listgridview [title]="pageTitle" [contents]="contents"></app-listgridview> <router-outlet></router-outlet>
I also created one class inside the model folder.
export class Contents {
id: string;
email: string;
name: string;
imageURL: string;
bio: string;
dateOfBirth: string;
mobile: string;
house: string;
}
I hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.
Related articles that you can read.
How To Pass Data In URL From One Component To Another In Angular
Using HttpInterceptor In Angular 9
How To Upload File And Save As Base64 In Angular 9
Display Angular Material’s Loader In Angular 8/9
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular