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
once instalation after you will enter the command for opeaning your project “D:\ngforTable\Employeelistbind>code .”
after create the componet using this command for creating the component “D:\ngforTable\Employeelistbind>ng g c EmpList
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
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more
- How to create dynamic form fields using jQuery - January 4, 2021
- What is CTS (Common Type System) in .Net - October 16, 2020
- What is main method in c# - October 13, 2020