Angular tutorials

Updated : Sep 28, 2020 in Angular

angular 10 ngfor table bind the list of object

in this article we will see how to bind the list of object in angular 10 ngfor table.

Go your director create one folder name like “Ngfortable” inside that folder install the angular 10 version see the given below screen shot for how to installing the angular 10 in your folder.

install command line for angular

npm install -g @angular/cli

or

npm install –global @angular/[email protected]

once instalation after you will go to your projects path in

Command prompt like ‘D:\ngforTable’. then after run the following given command for creating the project.

D:\ngforTable>ng new Employeelistbind

run the given below command for opening your application

angular 10 ngfor table bind

once instalation after you will enter the command for opeaning your project “D:\ngforTable\Employeelistbind>code .”

angular 10 ngfor

after create the componet using this command for creating the component “D:\ngforTable\Employeelistbind>ng g c EmpList

angular 10 ngfor table bind
angular 10 ngfor

inside the emp-list.component.ts you will enter following code

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

@Component({
  selector: 'app-emp-list',
  templateUrl: './emp-list.component.html',
  styleUrls: ['./emp-list.component.scss']
})
export class EmpListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  emlpoyees=[
    {Name:"vijay",Age:"30",Location:"Hydearabd",Salary:"300000"},
    {Name:"kumar",Age:"50",Location:"Bangular",Salary:"600000"},
    {Name:"vijay",Age:"30",Location:"Hydearabd",Salary:"300000"},
    {Name:"kumar",Age:"50",Location:"Bangular",Salary:"600000"},
    {Name:"vijay",Age:"30",Location:"Hydearabd",Salary:"300000"},
    {Name:"kumar",Age:"50",Location:"Bangular",Salary:"600000"},
   ];
   
}

inside the emp-list.component.html you will enter following code

<p>employee-list form Employee component!</p>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Location</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of emlpoyees">
            <th>{{ item.Name }}</th>
            <td>{{ item.Age }}</td>
            <td>{{ item.Location }}</td>
            <td>{{ item.Salary }}</td>
            <td>
                <button type="button" >Delete</button>
            </td>
        </tr>
    </tbody>
</table>

inside the app.component.html you will enter following code

<app-emp-list></app-emp-list>

D:\ngforTable\Employeelistbind>ng serve

http://localhost:4200/
angular 10 ngfor table bind the list of object

Latest posts by DuttaluruVijayakumar (see all)
Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x