Scribd
Upload
2 views

1. lab assignment angular directives

The document describes a lab assignment for using Angular directives ngIf and ngFor to display employee data from a JSON object. If no employee records are available, the application should indicate that no employee information is found. It includes a TypeScript component, HTML structure for displaying the data in a table, and CSS for styling.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

1. lab assignment angular directives

The document describes a lab assignment for using Angular directives ngIf and ngFor to display employee data from a JSON object. If no employee records are available, the application should indicate that no employee information is found. It includes a TypeScript component, HTML structure for displaying the data in a table, and CSS for styling.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Lab Assignment: Angular ngIf, ngFor directive

Use employees json data given to print on ui using ngIf and ngFor, if no employee record is there
application should print no employee inforation is found.

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

@Component({
selector: 'list-employee',
templateUrl: 'app/employee/employeeList.component.html',
styleUrls: ['app/employee/employeeList.component.css']
})
export class EmployeeListComponent {
employees: any[] = [
{
code: 'emp101', name: 'Raj', gender: 'Male',
annualSalary: 5500, dateOfBirth: '25/6/1988'
},
{
code: 'emp102', name: 'Keshav', gender: 'Male',
annualSalary: 5700.95, dateOfBirth: '9/6/1982'
},
{
code: 'emp103', name: 'Gunika', gender: 'Female',
annualSalary: 5900, dateOfBirth: '12/8/1979'
},
{
code: 'emp104', name: 'Ekta', gender: 'Female',
annualSalary: 6500.826, dateOfBirth: '14/10/1980'
},
];
}

html page:
---------

<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Gender</th>
<th>Annual Salary</th>
<th>Date of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

css:
-------
table {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border-collapse: collapse;
}

td {
border: 1px solid #369;
padding:5px;
}

th{
border: 1px solid #369;
padding:5px;
}

You might also like