Sunday, September 23, 2018

Part 7- Display a list of record in Angular 5 Application


In this tutorial, You will learn about how to display a list of records in Angular 5 application.  If have not watched basics of bootstrap card the please watch Part 5.  If you are new to Angular then please also visit below Links Part1: Create your first Angular 5 application and Part2:  How does Angular 5 works?

Expected Output




BikeComponent.ts Code


import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bike',
templateUrl: './bike.component.html',
styleUrls: ['./bike.component.scss']
})
export class BikeComponent implements OnInit {
bikeList: Array<Bike> = [];
constructor() {
this.bikeList.push(
{ Name: "Royal enfield Classic 350 Black", Price: "1.4Lakh", Mileage: "37kmpl", Model: 2018, ImagePath: "../assets/RE_Classic350_Black.png" },
{ Name: "Royal enfield Classic 350 Green", Price: "1.4Lakh", Mileage: "37kmpl", Model: 2018, ImagePath: "../assets/RE_Classic350_Green.png" },
{ Name: "Royal enfield Classic 350 GMetal", Price: "1.4Lakh", Mileage: "37kmpl", Model: 2018, ImagePath: "../assets/RE_Classic350_GunMetal.png" },
{ Name: "Royal enfield Classic 350 Red", Price: "1.4Lakh", Mileage: "37kmpl", Model: 2018, ImagePath: "../assets/RE_Classic350_Red.PNG" },
{ Name: "Royal enfield Thunder bird Black", Price: "1.7Lakh", Mileage: "37kmpl", Model: 2018, ImagePath: "../assets/RE_ThunderBird_Black.png" },
{ Name: "Royal enfield Thunder bird Blue", Price: "1.7Lakh", Mileage: "37kmpl", Model: 2018, ImagePath: "../assets/RE_ThunderBird_Blue.png" },
{ Name: "Royal enfield Thunder bird Red", Price: "1.7Lakh", Mileage: "37kmpl", Model: 2018, ImagePath: "../assets/RE_ThunderBird_Red.png" },
)
}
ngOnInit() {
}
}
class Bike {
Name: string;
Model: number;
Price: string;
Mileage: string;
ImagePath: string;
}

Bike.Component.html Class


<div class="card">
<div class="card-header bg-info text-white">
<h4 class="card-title">Royal enfield Popular Bikes</h4>
</div>
<div class="card-body">
<div class="card-columns">
<div class="card mb-3" style="max-width:18rem" *ngFor="let bike of bikeList">
<div style="min-height:220px">
<img class="card-img-top" [src]="bike.ImagePath">
</div>
<div class="card-body">
<h4 class="card-title">{{bike.Name}}</h4>
<small class="badge">{{bike.Price}}</small>
<small class="badge bg-info text-white">{{bike.Mileage}}</small>
<div class="">
<a href="#" class="card-link">Specification</a>
<a href="#" class="card-link">Showroom</a>
</div>
</div>
<div class="card-footer">
<p class="text-muted">Model: {{bike.Model}}</p>
</div>
</div>
</div>
</div>
</div>

App.Component.html 

<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-items">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-items">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-items">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="container">
<div class="card mb-3">
<div class="card-header">
<h4 class="card-title">My header Title</h4>
</div>
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Your text goes here</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-primary">primary</a>
<a href="#" class="btn btn-danger">danger</a>
<a href="#" class="btn btn-dark">dark</a>
<a href="#" class="btn btn-info">info</a>
<a href="#" class="btn btn-secondary">secondary</a>
</div>
</div>
<!-- <app-home></app-home> -->
<app-bike></app-bike>
<router-outlet></router-outlet>
</div>
</div>
<div class="card-footer" style="position:fixed;bottom:0;width:100%">
<p class="text-center"><small class="text-muted">&copy;Copy Right Technotips Ashish</small></p>
</div>
</div>


Bike.Component.SCSS 

@media (min-width: 576px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 992px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 4;
}
}

For more details please watch above video.

You are done! Please share, Like, Comment