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?
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 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