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

Angular Code Factory

• Part 1- Create your first Angular 5 application 
• Part 2- How does Angular 5 works?
• Part 3- Module and Component in Angular 5
• Part 4- How to use Data Types in Angular 5 application