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

Part 6 - How to use bootstrap 4 in Angular 5 application | Bootstrap Card Example- Continued

In this tutorial, You will learn about how to use Bootstrap 4 in Angular 5 application. Here basically we talk about the bootstrap4 card features. This is in continuation of 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

Follow below steps to install bootstrap4 and ngx-Bootstrap

Step1. Add ngx-Bootstrap:  npm install ngx-bootstrap --save
Step2. Add Bootstrap 4: npm install bootstrap --save 

Step3. Add bootstrap css reference in angular-cli .json file:

Bootstrap Card Example: (Please watch Part 5 for 1, 2, and 3)
1. Simple Card 
2. Card with background color
3. Card with border 
4. Card with navigation bar
5. Card with Image

AppComponent.ts Code

import { Component } from '@angular/core';

import { Employee } from './Employee';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

name: string;

age: number;

numArray: number[];

strArray: Array<string>;

dynamicValue: any;

IsTrue: boolean;

tupleVal: [string, number, boolean];

student: object;

employee: Employee;

constructor() {

this.name="Ashish";

this.age = 52;

this.numArray = [10, 11, 20];

this.strArray = ["Ashish", "Kumar", "Tiwary"];

this.dynamicValue = 10000;

this.IsTrue = false;

this.tupleVal = ["Ashish", 45, true];

this.student = { name: "Ashish", age: "45", email: "a@b.com" }

this.employee = new Employee();

this.employee.Name = "Rose";

this.employee.Salary = 52000;

this.employee.Department = "Development";

this.employee.IsActive = true;

}

Test(mynum: number,str:string): number {

return 25;

}

}

AppComponent.Html Code

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

<div class="row">

<div class="col-md-4">

<div class="card border-primary text-primary mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card bg-primary text-white mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card  mb-3" style="max-width:18rem">

<img class="card-img-top" src="../assets/RE_Classic350_Black.png">

<div class="card-body">

<h4 class="card-title">Title</h4>

<p class="card-text">Your text goes here</p>

<p class="card-text ">

<small class="text-muted">last update 3min ago</small>

</p>

</div>

<div class="card-footer">

<a class="btn btn-success">Share</a>

<a class="btn btn-primary">Buy</a>

</div>

</div>

<div class="card  mb-3" style="max-width:18rem">

<img class="card-img-top" src="../assets/RE_Classic350_Green.png">

<div class="card-body">

<h4 class="card-title">Title</h4>

<p class="card-text">Your text goes here</p>

<p class="card-text ">

<small class="text-muted">last update 3min ago</small>

</p>

</div>

<div class="card-footer">

<a class="btn btn-success">Share</a>

<a class="btn btn-primary">Buy</a>

</div>

</div>

</div>

<div class="col-md-4">

<ul class="list-group">

<li class="list-group-item">Name: {{name}}</li>

<li class="list-group-item">Age:{{age}}</li>

<li class="list-group-item">Number Array: {{numArray}}</li>

<li class="list-group-item">String Array: {{strArray}}</li>

<li class="list-group-item">Dynamic value: {{dynamicValue}}</li>

<li class="list-group-item">Is true: {{IsTrue}}</li>

<li class="list-group-item">Tuple:{{tupleVal}}</li>

<li class="list-group-item">Student Object:{{student|json}}</li>

<li class="list-group-item">Employee Class: {{employee|json}}</li>

</ul>

</div>

</div>

<router-outlet></router-outlet>

</div>

</div>

<div class="card-footer">

<p class="text-center"><small class="text-muted">&copy;Copy Right Technotips Ashish</small></p>

</div>

</div>

Employee.ts Class

export class Employee {

Name: string;

Salary: number;

Department: string;

IsActive: boolean;

}

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

Part 5 - How to use bootstrap 4 in Angular 5 application | Bootstrap Card Example

In this tutorial, You will learn about how to use Bootstrap 4 in Angular 5 application. Here basically we talk about the bootstrap4 card features. 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

Follow below steps to install bootstrap4 and ngx-Bootstrap

Step1. Add ngx-Bootstrap:  npm install ngx-bootstrap --save
Step2. Add Bootstrap 4: npm install bootstrap --save 

Step3. Add bootstrap css reference in angular-cli .json file:

Bootstrap Card Example:
1. Simple Card 
2. Card with background color
3. Card with border 
4. Card with navigation bar
5. Card with Image

AppComponent.ts Code

import { Component } from '@angular/core';

import { Employee } from './Employee';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

name: string;

age: number;

numArray: number[];

strArray: Array<string>;

dynamicValue: any;

IsTrue: boolean;

tupleVal: [string, number, boolean];

student: object;

employee: Employee;

constructor() {

this.name="Ashish";

this.age = 52;

this.numArray = [10, 11, 20];

this.strArray = ["Ashish", "Kumar", "Tiwary"];

this.dynamicValue = 10000;

this.IsTrue = false;

this.tupleVal = ["Ashish", 45, true];

this.student = { name: "Ashish", age: "45", email: "a@b.com" }

this.employee = new Employee();

this.employee.Name = "Rose";

this.employee.Salary = 52000;

this.employee.Department = "Development";

this.employee.IsActive = true;

}

Test(mynum: number,str:string): number {

return 25;

}

}

AppComponent.Html Code

<div class="container" style="border:2px solid gainsboro; margin-top: 5%">

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

<div class="row">

<div class="col-md-4">

<div class="card border-primary mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card border-success mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card border-info mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card border-danger mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card border-dark mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card bg-primary text-white mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card bg-success text-white mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card bg-info text-white mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card bg-danger text-white mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<div class="card bg-dark text-white mb-3" style="max-width:18rem">

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

<p class="card-text text-center text-white">

<small class="text-muted">&copy; Copy Right Technotips Ashish</small>

</p>

</div>

</div>

<ul class="list-group">

<li class="list-group-item">Name: {{name}}</li>

<li class="list-group-item">Age:{{age}}</li>

<li class="list-group-item">Number Array: {{numArray}}</li>

<li class="list-group-item">String Array: {{strArray}}</li>

<li class="list-group-item">Dynamic value: {{dynamicValue}}</li>

<li class="list-group-item">Is true: {{IsTrue}}</li>

<li class="list-group-item">Tuple:{{tupleVal}}</li>

<li class="list-group-item">Student Object:{{student|json}}</li>

<li class="list-group-item">Employee Class: {{employee|json}}</li>

</ul>

</div>

</div>

<router-outlet></router-outlet>

</div>

Employee.ts Class

export class Employee {

Name: string;

Salary: number;

Department: string;

IsActive: boolean;

}

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