QUESTION 1:

Commodity Storage Management Application

Your task is to create a web application that demonstrates the use of Angular's
HttpClient module for communication with a backend API. The application simulates
managing a collection of Storage Houses, allowing users to retrieve existing storage
houses, add new ones, edit them, and view their details.

Backend API:

The backend API is a mock JSON server that provides storage house data to the
frontend. It offers the following:

Endpoints:

• GET /storage-houses: Retrieves a list of existing storage houses in JSON format.

• POST /storage-houses: Adds a new storage house.

• PUT /storage-houses/{id}: Updates details of an existing storage house.

• GET /storage-houses/{id}: Retrieves details of a specific storage house by ID.

Note:

The JSON server URL is defined in the StorageHouseService class. Ensure the backend
is running while testing the application.

Implementation Guidelines:

• Use the title Commodity-Storage-System in the app.component.ts file.

• Define an interface for the StorageHouse model encapsulating its attributes in

the model folder.

• Develop an Angular service storage-house.service.ts inside the services folder to

handle HTTP requests.

• Create add-storage-house, edit-storage-house, and storage-house-list

components in the app folder.

• Utilize Angular's HttpClient to execute GET, POST, and PUT requests.

• Use Observables to manage asynchronous responses from the backend API.

 • Use the router links as follows:

o /add-storage-house for AddStorageHouseComponent.

o /storage-houses for StorageHouseListComponent.

o /edit-storage-house/:id for EditStorageHouseComponent.

Model (storage-house.model.ts):

typescript

CopyEdit

export interface StorageHouse {

id?: number;

name: string;

location: string;

capacity: number;

commodityType: string;

operationalStatus: string;

constructionDate: string;

lastInspectionDate: string;

temperatureControl: string;

Service (storage-house.service.ts):

Functions to Implement:

• getStorageHouses(): Makes an HTTP GET request to retrieve a list of storage

houses.

• addStorageHouse(): Makes an HTTP POST request to add a new storage house.

• updateStorageHouse(): Makes an HTTP PUT request to update storage house

details.
 • getStorageHouseById(): Makes an HTTP GET request to fetch a storage house by
ID.

Additional Notes:

• Import and use the StorageHouse model for type-checking.

• Declare a public property backendUrl to store the base URL for the API:

typescript

CopyEdit

backendUrl = '{your-portal-url}/proxy/3001/storage-houses';

Add Storage House Component (add-storage-house.component.ts):

This component implements a form for adding a new storage house using Angular's
Reactive Forms, bound to the storageHouseForm instance. The ngSubmit() directive
links the form submission event to the onSubmit() method.

Form Fields:

1. Storage House Name: Input type text with a placeholder "Enter storage house
name" and required validation.

2. Location: Input type text with a placeholder "Enter location" and required
validation.

3. Capacity: Input type number with a placeholder "Enter capacity (tons)" and a
minimum value validation (greater than 0).

4. Commodity Type: Dropdown selection with options like "Mirchi", "Wheat",

"Rice", etc.

5. Operational Status: Dropdown with options "Active", "Inactive", and

"Maintenance".

Submit Button:

• Label: "Add Storage House".

• Type: Submit.

• Disabled Condition: Disabled if the form is invalid.

Edit Storage House Component (edit-storage-house.component.ts):

• The form structure should match the Add Storage House Component but pre-
filled with the current details of the selected storage house.

• Submit Button:

o Label: "Update Storage House".

o Triggers the onSubmit() method, which calls the updateStorageHouse()

service method.

Storage House List Component (storage-house-list.component.ts):

This component manages the list of storage houses, allowing functionalities for
fetching, sorting, and editing data.

Properties:

1. storageHouses: An array to hold the list of storage house objects fetched from
the backend.

2. loading: A boolean indicating if the data is being fetched.

3. sortOrder: A string ('asc' or 'desc') managing the sorting order of storage houses
by capacity.

Methods:

1. getStorageHouses(): Fetches storage house data and populates the

storageHouses array.

2. sortStorageHouses(): Sorts the array by capacity, toggling between ascending

and descending order.

3. editStorageHouse(id): Navigates to the edit page with the warehouse ID.

Table Layout:

1. Headers:

o Name
 o Location

o Capacity (tons)

o Commodity Type

o Operational Status

o Action

2. Rows:

o Dynamically generated using *ngFor to iterate over the storageHouses

array.

3. Actions Column:

o Includes an "Edit" button navigating to /edit-storage-house/:id.

Loading Indicator:

Displays "Loading..." while fetching data using *ngIf="loading".

QUESTION 2:

Textile Manufacturing System

Your task is to create a web application that demonstrates the use of Angular's
HTTPClient module for communication with mock data. The application will simulate
managing textile products, allowing users to retrieve a list of products, add new ones,
and delete them using HTTP requests.

Static Data Mock: A JSON Server that provides static data to the frontend. It should
offer the following endpoints:

• GET /fabrics: This endpoint will return a list of static textile product details in
JSON format.

• POST /fabrics: To save new textile products.

• DELETE /fabrics/{id}: To delete a textile product by its ID.

Implementation Guidelines: Define an interface for a TextileProduct model,

encapsulating its attributes such as name, description, price, etc. This model will be
located in the model folder.
Develop an Angular service TextileService inside the services folder to handle HTTP
requests. This service will interact with the backend and provide methods for fetching,
adding, and deleting textile products.

Create two components:

• fabric-list.component: Displays the list of textile products retrieved from the

server.

• add-fabric.component: Allows users to add a new textile product.

Use Angular's HttpClient to execute GET, POST, and DELETE requests.

Manage asynchronous responses from the mock data using Observables.

Use Angular's router to navigate between the AddFabricComponent and the

FabricListComponent:

• /add-fabric for adding new products.

• /fabrics for listing all products.

Frontend (Angular): You will build an Angular application to interact with the mock data
via HTTPClient services. The frontend should include the following features:

• In AppComponent, the title of the application is set to "Textile-Management-

System".

Model (fabric.model.ts):

export interface TextileProduct {

id?: number;

fabricNumber: string;

name: string;

category: 'Cotton' | 'Silk' | 'Wool' | 'Polyester' | 'Linen';

price: number;

productionTime: number;

status: 'Available' | 'Out of Stock' | 'Coming Soon';

TextileService (services/textile.service.ts):
 • Declare a private property backendUrl to store the base URL for the API.
Example: backendUrl = '{your-portal-url}/proxy/3001/fabrics';

• getFabrics(): Makes an HTTP GET request to retrieve a list of textile products and
returns an Observable that emits an array of TextileProduct objects.

• addFabric(): Makes an HTTP POST request to add a new textile product. It takes
a TextileProduct object as a parameter and returns an Observable that emits the
added TextileProduct object.

• deleteFabric(): Makes an HTTP DELETE request with a specific product ID to

delete the textile product. It takes the product ID as a parameter.

Add Fabric Component (add-fabric.component.ts):

• Use the method name addFabric() to add textile product data.

• This method checks if the form is valid. If so, it calls the addFabric method from
the TextileService to make an HTTP request to add the product.

• Use fabricForm as the property for the FormGroup, which is utilized to manage
the form's state and validation.

• Initialize the form with textile-related fields:

o fabricNumber: Required field, pattern ^[A-Z0-9]{5}$ (5 alphanumeric

characters).

o name: Required field, with a minimum length of 3 characters and a

maximum length of 50 characters.

o category: Required field.

o price: Required field, with a minimum value of 0.01.

o productionTime: Required field, with a minimum value of 1 minute.

o status: Required field.

Validation Messages:

• "Fabric number must be 5 characters (letters and numbers)" if the fabric number
doesn’t match the pattern.

• "Fabric name must be between 3 and 50 characters" if the name length is invalid.

• "Price must be greater than 0" if the price is less than 0.01.

• "Production time must be at least 1 minute" if the production time is less than 1
minute.
Use the constructor to inject FormBuilder, TextileService, and Router.

The textile product data is sent to the backend via TextileService.addFabric().

Upon successful addition, the user is redirected to the product list page (/fabrics).

The form is reset after successful submission.

Add Fabric Component HTML (add-fabric.component.html): This form is

implemented using Reactive Forms and is associated with a FormGroup instance
named fabricForm. The ngSubmit() directive is used to bind the form submission event
to the addFabric() method in the component.

Form Fields:

• Fabric Number:

o Input type: text

o Placeholder: "Enter fabric number"

o Bound to formControlName="fabricNumber"

• Fabric Name:

o Input type: text

o Placeholder: "Enter fabric name"

o Bound to formControlName="name"

• Category:

o Input type: select

o Options: Cotton, Silk, Wool, Polyester, Linen

o Bound to formControlName="category"

• Price:

o Input type: number

o Placeholder: "Enter price"

o Bound to formControlName="price"

• Production Time:

o Input type: number

o Placeholder: "Enter production time"

 o Bound to formControlName="productionTime"

• Status:

o Input type: select

o Options: Available, Out of Stock, Coming Soon

o Bound to formControlName="status"

• Submit Button:

o Label: "Add Fabric"

o Type: submit

o Disabled when the form is invalid.

Fabric List Component (fabric-list.component.ts):

Properties:

• fabrics: An array of TextileProduct objects, initialized as an empty array to hold

the list of products.

• filteredFabrics: A filtered array of TextileProduct objects for applying search

filters.

• loading: A boolean flag that shows if the data is loading.

• sortOrder: A string property (asc or desc), managing the sorting direction of the
product list.

• filterText: A string property used for searching products by fabric number, name,
or category.

Use Method Names:

• getFabrics(): Makes an HTTP GET request to retrieve textile products from the
TextileService.

• sortFabrics(): Sorts the filtered fabrics array in ascending or descending order

based on production time.

• deleteFabric(): Deletes a fabric by ID and updates the fabrics array dynamically.

• applyFilter(): Filters fabrics based on the filterText.

Fabric List HTML (fabric-list.component.html):

This component's template displays a dynamic table of products, structured as follows:

Filter Input: At the top of the table, an input field is provided to filter products by fabric
number, name, or category.

Sort Button: Below the filter input, a button is provided to trigger the sortFabrics()
method, allowing users to sort by production time in ascending or descending order.

Table Structure: Rows and Columns:

• The table headers are defined in <thead>, with column labels inside <th> tags in
a single <tr>.

• Product data is displayed in rows (<tr>) inside <tbody>.

• The price column uses Angular’s number pipe to format the value to two decimal
places.

• The status column uses Angular’s [ngClass] directive to apply CSS classes
(available, out-of-stock, coming-soon) based on the product status.

• The last column contains a "Delete" button that triggers the

deleteFabric(product.id) function to remove the corresponding fabric.

Textile Form

The Add Textile Form is designed to allow users to input textile product details and
submit them. It uses Angular Reactive Forms (fabricForm) and includes the following
fields:

• Fabric Number:

o Input type: text

o Placeholder: "Enter fabric number"

o Bound to formControlName="fabricNumber"

o Validation: Required field. Pattern: ^[A-Z0-9]{5}$ (5 alphanumeric

characters).

o Error message: "Fabric number must be 5 characters (letters and

numbers)."

• Fabric Name:

o Input type: text

o Placeholder: "Enter fabric name"

 o Bound to formControlName="name"

o Validation: Required field. Minimum length: 3 characters. Maximum

length: 50 characters.

o Error message: "Fabric name must be between 3 and 50 characters."

• Category:

o Input type: select

o Dropdown menu with options: Cotton, Silk, Wool, Polyester, Linen.

o Placeholder: "Select Category"

o Bound to formControlName="category"

o Validation: Required field.

• Price:

o Input type: number

o Placeholder: "Enter price"

o Bound to formControlName="price"

o Validation: Required field. Minimum value: 0.01.

o Error message: "Price must be greater than 0."

• Production Time:

o Input type: number

o Placeholder: "Enter production time"

o Bound to formControlName="productionTime"

o Validation: Required field. Minimum value: 1 minute.

o Error message: "Production time must be at least 1 minute."

• Status:

o Input type: select

o Dropdown menu with options: "Available", "Out of Stock", "Coming Soon".

o Placeholder: "Select Status"

o Bound to formControlName="status"

o Validation: Required field.

 • Submit Button:

o Type: submit

o Label: "Add Fabric"

o Disabled when the form is invalid.

QUESTION 3:

Pharmacy Management System

Your task is to create a web application that demonstrates the use of Angular's
HttpClient module for communication with a backend API. The application simulates
managing a collection of Pharmaceuticals, allowing users to retrieve existing
medicines, add new ones, edit medicines, and view specific medicine details.

Backend API:

The backend API is a mock JSON server that provides pharmaceutical data to the
frontend. It offers the following:

Endpoints:

• GET /medicines: Retrieves a list of existing medicines in JSON format.

• POST /medicines: Adds a new medicine.

• PUT /medicines/{id}: Updates details of an existing medicine.

• GET /medicines/{id}: Retrieves details of a specific medicine by ID.

Note:

The JSON server URL is defined in the MedicineService class. Ensure the backend is
running while testing the application.

Implementation Guidelines:

• Use the title Pharmacy-Management-System in the app.component.ts file.

• Define an interface for the Medicine model encapsulating its attributes in the
model folder.

• Develop an Angular service medicine.service.ts inside the services folder to

handle HTTP requests.
 • Create add-medicine, edit-medicine, and medicine-list components in the
app folder.

• Utilize Angular's HttpClient to execute GET, POST, and PUT requests.

• Use Observables to manage asynchronous responses from the backend API.

• Use the router links as follows:

o /add-medicine for AddMedicineComponent.

o /medicines for MedicineListComponent.

o /edit-medicine/:id for EditMedicineComponent.

Folder Structure: (Follow the folder structure)

Frontend (Angular):

You will build an Angular application to interact with the backend API via HttpClient
services. The frontend should include the following features:

Model:

Model (medicine.model.ts):

export interface Medicine {

id?: number;

name: string;

genericName: string;

uses: string[];

dosageForm: 'Tablet' | 'Syrup' | 'Injection' | 'Cream';

sideEffects: string[];

Service (medicine.service.ts):

getMedicines(): GET request

addMedicine(): POST request

updateMedicine(): PUT request

getMedicineById(): GET request

Services:

medicine.service.ts:

Import and use the Medicine model.

Method Implementations:

• addMedicine():

o The addMedicine() method makes an HTTP POST request to the backend

URL to add a new medicine.

o It takes a Medicine object as a parameter, representing the new medicine

to be added.

o It returns an Observable that emits the added Medicine object.

• getMedicines():

o The getMedicines() method makes an HTTP GET request to the backend

URL to retrieve a list of medicines.

o It returns an Observable that emits an array of Medicine objects.

• getMedicineById():

o The getMedicineById() method makes an HTTP GET request to fetch data

for a specific medicine by its ID.

o It takes the medicine ID as a parameter.

o It returns an Observable that emits the Medicine object corresponding to

the provided ID.

• updateMedicine():

o The updateMedicine() method makes an HTTP PUT request to the

backend URL with a specific medicine ID to update that medicine.

o It takes a medicine ID and a partial Medicine object as parameters.

o It returns an Observable that emits the updated Medicine object.

Add Medicine Form (add-medicine.component.ts):

Method Workflow:

The form is submitted via the onSubmit() method. If the form is valid, it calls
MedicineService.addMedicine() to send the data to the backend.

Upon successful submission, the user is redirected to the medicines list page
(/medicines), and the form is reset.

Purpose:

Create a form to add a new medicine to the collection.

Form Handling:

• Utilize ngSubmit to bind the form submission to the onSubmit() method.

• Fields:

o name: Text input, bound to formControlName="name", with a required

validation.

o genericName: Text input, bound to formControlName="genericName",

with a required validation.

o uses: Text input, bound to formControlName="uses", with a required

validation. Uses are entered as a comma-separated list and are split into
an array.

o dosageForm: Select input, bound to formControlName="dosageForm",

with options for dosage forms and required validation.

o sideEffects: Textarea input, bound to formControlName="sideEffects",

with validations ensuring the value is entered as an array.

o Submit Button: The submit button is placed inside the last <tr> in the
<table>. It is labeled "Add Medicine" and is disabled when the form is
invalid.

Edit Medicine Component (edit-medicine.component.ts):

Form Layout:

The form structure should mirror the layout of Add Medicine Component. All fields
should display the medicine's current details to allow editing.

Submit Button:

The submit button is positioned in the last <tr> of the table and labeled 'Update
Medicine'.
Functionality:

When the form is submitted, the onSubmit() method is invoked.

Medicine List Component (medicine-list.component.ts):

This component manages a list of medicines, providing functionalities for fetching,

sorting, and editing medicine data.

Properties:

• medicines: An array to hold the list of medicine objects fetched from the
backend.

• loading: A boolean flag indicating whether the data is being loaded.

• sortOrder: A string property ('asc' or 'desc') to manage the sorting direction of

the medicines by spread rate.

Methods:

• getMedicines(): Makes an HTTP GET request to fetch all the medicines from the
backend using the MedicineService and populates the medicines array.

• sortMedicines(): Sorts the medicines array by spread rate, toggling between

ascending and descending order based on the sortOrder property.

• editMedicine(): Navigates to the medicine edit page, passing the medicine ID as

a parameter to allow editing.

Add Medicine Component Structure:

The Add Medicine form (medicineForm) is structured using a <table>, with rows (<tr>)
and columns (<td>) defining the layout for input fields and their labels.

Form Details:

• Form Initialization: The form is bound to a formGroup using Angular’s Reactive

Forms.

• Input Fields:

o Name: Input type text, bound to formControlName="name".

o Generic Name: Input type text, bound to

formControlName="genericName".
 o Uses: Textarea input, bound to formControlName="uses".

o Dosage Form: Select input with options "Tablet", "Syrup", "Injection",

"Cream", bound to formControlName="dosageForm".

o Side Effects: Input type text, bound to

formControlName="sideEffects".

• Submit Button: The submit button is placed inside the last <tr> in the <table>. It
is labeled "Add Medicine" and is disabled when the form is invalid.

Medicine List Page:

Purpose:

Display a list of all medicines retrieved from the backend API.

Features:

• Display a table with the following columns:

o Name

o Generic Name

o Uses

o Dosage Form

o Side Effects

o Action

Edit Button:

• Add a button for each medicine to edit its details, which navigates to the Edit
Medicine page.

Sort Medicines by Spread Rate:

• Add a button to sort the medicines by spread rate in ascending or descending

order.

Loading Indicator:

• Display a loading message while fetching data from the backend.

QUESTION 4:

Wildlife Protection Application

Your task is to create a web application that demonstrates the use of Angular's
HttpClient module for communication with a backend API. The application simulates
managing a collection of Wildlife Species, allowing users to retrieve existing species,
add new ones, edit species, and sort them based on population.

Backend API:

The backend API is a mock JSON server that provides species data to the frontend. It
offers the following:

Endpoint:

• GET /species: Retrieves a list of existing wildlife species in JSON format.

• POST /species: Adds a new wildlife species.

• PUT /species/{id}: Updates details of an existing species.

• GET /species/{id}: Retrieves details of a specific species by ID.

Note: The JSON server URL is defined in the WildlifeService class. Ensure the backend is
running while testing the application.

Implementation Guidelines:

• Use the title Wildlife-Protection-System in app.component.ts file.

• Define an interface for the Wildlife model encapsulating its attributes in the
model folder.

• Develop an Angular service wildlife.service.ts inside the services folder to

handle HTTP requests.

• Create add-species, edit-species, and species-list components in the app

folder.

• Utilize Angular's HttpClient to execute GET, POST, and PUT requests.

• Use Observables to manage asynchronous responses from the backend API.

• Use the router link as /add-species for AddSpeciesComponent, /species for

SpeciesListComponent, and /edit-species/:id for EditSpeciesComponent.

Frontend (Angular):
You will build an Angular application to interact with the backend API via HttpClient
services. The frontend should include the following features:

Model:

export interface Wildlife {

id?: number;

name: string;

habitat: string;

diet: string;

conservationStatus: string;

population: number;

lastSighted: string;

• getSpecies(): GET request

• addSpecies(): POST request

• updateSpecies(): PUT request

• getSpeciesById(): GET request

Services:

wildlife.service.ts:

• Import and use the Wildlife model.

• Use the method name addSpecies() for POST and getSpecies() for GET in
WildlifeService.

• The getSpecies() method makes an HTTP GET request to the backendUrl to

retrieve a list of species. It returns an Observable that emits an array of Wildlife
objects.

• The addSpecies() method makes an HTTP POST request to the backendUrl to

add a new species. It takes a Wildlife object as a parameter, representing the
new species to be added, and returns an Observable that emits the added
Wildlife object.
 • Use getSpeciesById() to retrieve a species by its ID. This method makes an HTTP
GET request to fetch a specific species data.

• The updateSpecies() method makes an HTTP PUT request to the backendUrl

with a specific species ID to update that species. It takes a species ID and a
Wildlife object as parameters and returns an Observable that emits the updated
Wildlife object.

• Declare a public property backendUrl to store the base URL for the API:
backendUrl = '{your-portal-url}/proxy/3001/species';

Components:

Add Species Form: (add-species.component.ts)

Method Workflow:

• The form is submitted via the onSubmit() method. If the form is valid, it calls
WildlifeService.addSpecies() to send the data to the backend.

• Upon successful submission, the user is redirected to species page (/species),

and the form will reset.

Purpose:

• Create a form (speciesForm) to add a new species to the collection.

Form Handling:

• Utilize ngSubmit to bind the form submission to the onSubmit() method.

• All fields are required.

Fields:

• name (text input)

• habitat (text input)

• diet (text input)

• conservationStatus (select input with options: "Endangered", "Vulnerable",

"Least Concern")

• population (number input)

• lastSighted (date input)

Submission:
 • When the form is submitted and valid, a POST request is sent to the backend to
add the species details. Upon successful addition, the form resets and the user
is redirected to the species list page.

Edit Species Form: (edit-species.component.ts)

Method Workflow:

• The form is submitted via the onSubmit() method. If the form is valid, it calls
WildlifeService.updateSpecies() to send the data to the backend.

• Upon successful submission, the user is redirected to the species list page
(/species), and the form resets.

Purpose:

• Create a form (speciesForm) to edit an existing species.

Form Handling:

• Use ngSubmit to bind the form submission to the onSubmit() method.

• Fields: Same fields and validation as per the Add Species form.

• Validation: All fields are mandatory, with similar validation.

• Submission: When the form is submitted, if valid, a PUT request is sent to the
backend to update the species details. Upon successful update, the user is
redirected to the species list page.

Species List Page: (species-list.component.ts)

Purpose:

• Display a list of all species retrieved from the backend API.

Methods:

• getSpecies(): Makes an HTTP GET request to the backendUrl to retrieve a list of

species.

• sortSpecies(): Method to sort the species by population in ascending or

descending order for the next click.

Features:

• Display a table with columns for Name, Habitat, Diet, Conservation Status,
Population, Last Sighted, Action.
 • Add a button for each species to edit its details, which navigates to the Edit
Species page.

• Include a button to sort the species by population in ascending or descending

order.

• Show a loading message while fetching data from the backend.

Sort Species by Population:

• The sortSpecies() method sorts the species by population in ascending or

descending order for the next click.

Add Species Component Structure:

• The Add Species Component form is structured using <table>, with rows (<tr>)
and columns (<td>) defining the layout for input fields and their labels.

Form Details:

Form Initialization:

• The form is bound to a formGroup using Angular’s Reactive Forms.

• The (ngSubmit) directive triggers the onSubmit() method when the form is
submitted.

Add Species Form

• The form to add a new species is implemented using Angular Reactive Forms
(speciesForm), all are required fields. It contains the following fields:

o Name: Input type text, placeholder "Enter species name", bound to

formControlName="name".

o Habitat: Input type text, placeholder "Enter habitat", bound to

formControlName="habitat".

o Diet: Input type text, placeholder "Enter diet", bound to

formControlName="diet".

o Conservation Status: A select dropdown with options "Endangered",

"Vulnerable", "Least Concern", bound to
formControlName="conservationStatus".

o Population: Input type number, placeholder "Enter population", bound to

formControlName="population".
 o Last Sighted: Input type date, bound to formControlName="lastSighted".

o Submit Button: A submit button labeled "Add Species", which is disabled

if the form is invalid.

Input Fields:

• Each input field and its label are placed inside a <tr>:

o Name Field

o Habitat Field

o Diet Field

o Conservation Status Field

o Population Field

o Last Sighted Field

o Submit Button

Edit Species Component

Form Layout:

• The form structure should mirror the layout of the Add Species Component.

Submit Button:

• The Submit button should be positioned in the last <tr> of the table and labeled
with 'Update Species'.

Functionality:

• When the form is submitted, the onSubmit() method is invoked.

Submission:

• When the form is submitted and valid, a PUT request is sent to the backend to
update the species details. Upon successful update, the user is redirected to the
species list page.

Species List Component Structure:

 • A button allows sorting the species by their population in ascending or
descending order, which should call the sortSpecies() method. Refer UI for
button placement.

The Species List Component dynamically displays species data in a table format, with
rows (<tr>) generated inside a <tbody>.

Table Structure

Rows and Columns:

• The table headers (<th>) are organized in a single row (<tr>) inside <thead>.

• Species data is displayed in rows (<tr>) inside <tbody>.

Table Headers (<thead>, <tr>, <th>):

• Name

• Habitat

• Diet

• Conservation Status

• Population

• Last Sighted

• Action

Table Body (<tbody>, <tr>, <td>):

• The table rows are dynamically generated using Angular’s ngFor directive,
iterating over the species array:

o Name, Habitat, Diet, Conservation Status, Population, Last Sighted:

These details are displayed in <td> elements within <tr>.

o Population: Population is displayed in a <td> element with a nested span.

CSS classes (small, medium, large) are applied dynamically using
Angular’s [ngClass] directive based on population values.

o Action: The last column contains an "Edit" button, which uses [routerLink]
to navigate to the species editing page with the corresponding species ID.