Angular Sales Project — Step-by-Step Development Process

Angular Sales Project — Step-by-Step Development Process

Step 1: Create a new project

Use Angular CLI to create a new Angular application:

ng new salesproject

cd salesproject

Run the project:

ng serve --open

✅ Your browser will open automatically at http://localhost:4200/

---

Step 2: Update main template page

Open src/app/app.component.html and remove all default HTML.
Add the following line:

<h1>Sales Teams</h1>

---

Step 3: Generate a new component

Use Angular CLI to create a new component named sales-person-list:

ng generate component sales-person-list

This command creates 4 files inside
src/app/sales-person-list/:

sales-person-list.component.html

sales-person-list.component.css

sales-person-list.component.ts

sales-person-list.component.spec.ts

---

Step 4: Add new component selector to app template page

In sales-person-list.component.ts, notice the selector:

selector: 'app-sales-person-list'

Now open app.component.html and update it like this:

<h1>Sales Teams</h1>

<app-sales-person-list></app-sales-person-list>

✅ This renders your new component below the heading.

---

Step 5: Generate a SalesPerson class

Create a simple TypeScript class model to represent a salesperson:

ng generate class sales-person-list/SalesPerson

Then open the generated file sales-person.ts and define the constructor:

export class SalesPerson {

  constructor(

    public firstName: string,

    public lastName: string,

    public email: string,

    public salesVolume: number

  ) {}

}

---

Step 6: In SalesPersonListComponent, create sample data

Open sales-person-list.component.ts and import the model:

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

import { SalesPerson } from './sales-person';

 

@Component({

  selector: 'app-sales-person-list',

  templateUrl: './sales-person-list.component.html',

  styleUrls: ['./sales-person-list.component.css']

})

export class SalesPersonListComponent {

  salesPersonList: SalesPerson[] = [

    new SalesPerson("Govind", "Khan", "govindkhan@gmail.com", 5000),

    new SalesPerson("Vickey", "Kumar", "vickykumar@gmail.com", 6000),

    new SalesPerson("Rishabh", "Verma", "rishabhverma@gmail.com", 7000),

    new SalesPerson("Nihal", "Bhasha", "nihalbhasha@gmail.com", 8000)

  ];

}

✅ This creates a hardcoded array of salesperson objects.

---

Step 7: In template file, build HTML table by looping over data

Open sales-person-list.component.html and add:

<table border="1" cellspacing="0" cellpadding="5">

  <tr>

    <th>First Name</th>

    <th>Last Name</th>

    <th>Email</th>

    <th>Sales Volume</th>

  </tr>

  <tr *ngFor="let person of salesPersonList">

    <td>{{ person.firstName }}</td>

    <td>{{ person.lastName }}</td>

    <td>{{ person.email }}</td>

    <td>{{ person.salesVolume }}</td>

  </tr>

</table>

✅ Angular’s *ngFor directive loops through the list and displays each salesperson.

---

✅ Final Output

When you run:

ng serve --open

You will see:

Sales Teams

First Name	Last Name	Email	Sales Volume
Govind	Khan	govindkhan@gmail.com	5000
Vickey	Kumar	vickykumar@gmail.com	6000
Rishabh	Verma	rishabhverma@gmail.com	7000
Nihal	Bhasha	nihalbhasha@gmail.com	8000