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

33 comments:

Tejuteju said...

very informative blog and useful article thank you for sharing with us, keep posting learn more Ruby on Rails Online Course

Gayathri S said...

Nicely Written. Thanks for sharing the useful blog about Displaying a list of records in Angular 5 Web Application.

Web Application Development Company in Coimbatore

Praylin S said...

Thanks for taking your valuable time to share this awesome article with us. This is really informative. Looking forward to learn more from you.
IoT Training in Chennai
IoT Courses in Chennai
Oracle Training in Chennai
Oracle Training institute in chennai
JavaScript Training in Chennai
JavaScript Course in Chennai
IoT Training in OMR
IoT Training in Velachery

priya rajesh said...

Fabulous post admin, it was too good and helpful. Waiting for more updates.
DevOps Training in Chennai
Data Science Course in Chennai
Machine Learning Course in Chennai
AWS Training in Chennai
Machine Learning Training in Chennai
Blue Prism Training in Chennai
R Programming Training in Chennai

Raj Sharma said...

Good Post. I like your blog. Thanks for Sharing
.NET Training Institute in Noida

Mr. eXcellent said...

Hey,

Do you want to promote your business on the social media platform and unable to find time for posting contents everyday? do not worry, here is the easiest way.

https://www.fiverr.com/s2/3d382a05ab

PoL said...

How does an ODC work? Here's what you need to know about setting up an offshore development center

PoL said...

Comprehensive, community-driven list jquery interview questions. Whether you're a candidate or interviewer, these interview questions will help prepare you for your next jQuery interview ahead of time.

Manipriyan said...
This comment has been removed by the author.
Norton.com/setup said...

Canon Printer Tech Support Phone Number - Is it accurate to say that you are hunting down Canon printer bolster? Well you have arrived on the correct page on the grounds that the Canon Printer Support Phone Number is presently accessible to fix all your printer related issues. Canon is a worldwide brand that is generally known for its printer segments at sensible expense.

Canon fabricates such printers that satisfies all your printing necessities and gives you the best printing arrangements. Yet, here and there it can fall into a few issues and mistakes that can influence your work. To fix the issues, you can call us at our Canon Printer Support Phone Number and the help group will be there to help you in a matter of moments.


HP Printer Tech Support Phone Number | QuickBooks Tech Support Phone Number | Norton Tech Support Phone Number

maria vero said...

Fast and reliable financial assistance service offer

We finance individuals who hold projects but who lack resources for implementation.
Contact us :

E-mail: contact@creditfinancesinstitut.com
Direct call: 33756823852
Sms direct: 33756823852
WhatsApp number: 33756823852
WhatsApp number: 33784505888
Web site: https://www.creditfinancesinstitut.com
Web site: https://www.creditfinance-bank.com

Biswajit Das said...

Error: [$controller:ctrlreg] in AngularJS Fix.

Raj Sharma said...

Good Post. I like your blog. Thanks for Sharing
.Net Training Institute In Noida

Bhavana said...

I was just examining through the web looking for certain information and ran over your blog.It shows how well you understand this subject. Bookmarked this page, will return for extra.
360DigiTMG

tejaswini said...

I see some amazingly important and kept up to length of your strength searching for in your on the site

data scientist malaysia

360DigiTMGMY said...


incredible article!! sharing these kind of articles is the decent one and I trust you will share an article on information science.By giving an organization like 360DigiTMG.it is one the best foundation for doing guaranteed courses
"
hrdf claimable courses"

360DigiTMGMY said...


These musings just knocked my socks off. I am happy you have posted this.
"
hrdf claimable courses"

dataanalyticscourse said...

I was looking at a portion of your posts on this site and I consider this site is really enlightening! Keep setting up..
big data course

360digitmgdelhi said...

I looked at some very important and to maintain the length of the strength you are looking for on your website
iot training in delhi

tejaswini said...

There is plainly a ton to consider this. Keep working, remarkable work!
360DigiTMG data science course in malaysia

360DigiTMG said...

This is a great post I saw thanks to sharing. I really want to hope that you will continue to share great posts in the future.
HRDF training

Bhavana said...

This is my first time visit here. From the tremendous measures of comments on your articles.I deduce I am not only one having all the fulfillment legitimately here! https://360digitmg.com/course/artificial-intelligence-ai-and-deep-learning

devika iangar said...

I would prescribe my profile is critical to me, I welcome you to talk about this point...
difference between analysis and analytics

dataanalyticscourse said...

Here at this site actually the particular material assortment with the goal that everyone can appreciate a great deal.
360DigiTMG big data course in malaysia

Anonymous said...

“Benjamin Briel Lee was very professional at all times, keeping me aware of everything that was happening, If I had any questions he was always available to answer. This was my first home purchase, I didn’t know much about the loan process, he made it very easy to understand the things I had questions about. I really enjoyed working with him.”  
He's a loan officer working with a group of investor's who are willing to fund any project or loan you any amount with a very low interest.Contact Benjamin Briel Lee E-Mail: 247officedept@gmail.com  Whats-App Number: +1-989-394-3740.

360DigiTMGNoida said...

I was looking at a portion of your posts on this site and I consider this site is really enlightening! Keep setting up
data science course noida

Bhavana said...

I really like your writing style, great date, thank you for posting.
https://360digitmg.com/course/artificial-intelligence-ai-and-deep-learning

Bhavana said...

I will truly value the essayist's decision for picking this magnificent article fitting to my matter.Here is profound depiction about the article matter which helped me more.
360DigiTMG Artificial Intelligence Course in malaysia

dataanalyticscourse said...

Here at this site actually the particular material assortment with the goal that everyone can appreciate a great deal.
360DigiTMG data analytics courses

Bhavana said...

"
I was just examining through the web looking for certain information and ran over your blog.It shows how well you understand this subject. Bookmarked this page, will return for extra."
AI courses in malaysia

Aptron Gurgaon said...

Thanks for Sharing this Information. AngularJS Institute in Gurgaon

360DigiTMGAurangabad said...

Nice and very informative blog, glad to learn something through you.
data science training in aurangabad

traininginstitute said...

Always so interesting to visit your site.What a great info, thank you for sharing. this will help me so much in my learning
data science training in malaysia