Activity → Apply the concepts of list, object, and list of objects. The goal of this activity is to help you understand the key differences between three important data structures: List, Object, and List of Objects. This activity requires no coding; it is purely focused on comprehension of these concepts.

Documentation: Data Structures in Angular Application

In this documentation, we will explore how to work with data structures in an Angular application. We will focus on Lists, Objects, and Lists of Objects and demonstrate how they are utilized within an Angular environment.

1. Product Table:

List Representation

To represent a list of products in an Angular template, we can use the following HTML structure:

<h2>Product Table</h2>
<table>
  <thead>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Category</th>
    <th>Price</th>
    <th>Stock</th>
    <th>Supplier Email</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let product of products">
    <td>{{ product.id }}</td>
    <td>{{ product.name }}</td>
    <td>{{ product.category }}</td>
    <td>{{ product.price }}</td>
    <td>{{ product.stock }}</td>
    <td>{{ product.supplierEmail }}</td>
  </tr>
  </tbody>
</table>

Object Definition

In Angular, we can define a Product object using TypeScript as follows:

class Product {
  id!: number;
  name!: string;
  category!: string;
  price!: number;
  stock!: number;
  supplierEmail!: string;
}

List of Objects Initialization

To initialize a list of Product objects in Angular, we can use the following TypeScript code snippet:

products: Product[] = [
  { id: 1, name: "Laptop", category: "Electronics", price: 750, stock: 50, supplierEmail: "supplier1@gmail.com" },
  { id: 2, name: "Desk Chair", category: "Furniture", price: 100, stock: 200, supplierEmail: "supplier2@gmail.com" },
  { id: 3, name: "Smartwatch", category: "Electronics", price: 200, stock: 150, supplierEmail: "supplier3@gmail.com" },
  { id: 4, name: "Notebook", category: "Stationery", price: 5, stock: 500, supplierEmail: "supplier4@gmail.com" },
  { id: 5, name: "Running Shoes", category: "Apparel", price: 80, stock: 100, supplierEmail: "supplier5@gmail.com" }
];

CSS

this css i use this to design my app:

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

table {
  border-collapse: collapse;
  width: 80%;
  margin: 50px auto;
  border: 1px solid #ccc;
}

th, td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
}

td {
  font-size: 14px;
}

.arrow-container {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.arrow {
  font-size: 24px;
  margin-right: 10px;
}

This is the Output

2. Employee Table:

Representing Data with Lists

In Angular, we can utilize lists to display structured data in a tabular format. Here's an example of how to create an employee table using a list:
htmlCopy

<h2>Employee Table</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees">
      <td>{{ employee.id }}</td>
      <td>{{ employee.name }}</td>
      <td>{{ employee.department }}</td>
      <td>{{ employee.age }}</td>
      <td>{{ employee.email }}</td>
    </tr>
  </tbody>
</table>

Defining Objects

Objects are used to represent data with key-value pairs. In Angular, we can define an Employee object using an interface:
typescriptCopy

interface Employee {
  id: number;
  name: string;
  department: string;
  age: number;
  email: string;
}

Working with Lists of Objects

To manage a collection of Employee objects, we can use a list of objects:
typescriptCopy

employees: Employee[] = [
  { id: 1, name: "John Doe", department: "Sales", age: 30, email: "john.doe@company.com" },
  { id: 2, name: "Jane Smith", department: "Human Resources", age: 25, email: "jane.smith@company.com" },
  { id: 3, name: "Mark Johnson", department: "IT", age: 40, email: "mark.johnson@company.com" },
  { id: 4, name: "Lisa Wong", department: "Marketing", age: 28, email: "lisa.wong@company.com" },
  { id: 5, name: "Paul McDonald", department: "Finance", age: 35, email: "paul.mcdonald@company.com" }
];

Enhancing Presentation with CSS

To style the employee table, we can add the following CSS:
cssCopy

table {
  border-collapse: collapse;
  width: 80%;
  margin: 50px auto;
  border: 1px solid #ccc;
}

th, td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
}

td {
  font-size: 14px;
}

Output:

The output of the above code will be a neatly formatted table displaying the employee data:

3.Books Table:

Displaying Data with Lists

In Angular, lists are essential for displaying structured data in a tabular format. Let's create a table to showcase a collection of book.

<h2>Books Table</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Author</th>
      <th>Genre</th>
      <th>Published Year</th>
      <th>ISBN</th>
      <th>Stock</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let book of books">
      <td>{{ book.id }}</td>
      <td>{{ book.title }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.genre }}</td>
      <td>{{ book.publishedYear }}</td>
      <td>{{ book.isbn }}</td>
      <td>{{ book.stock }}</td>
      <td>{{ book.price | currency }}</td>
    </tr>
  </tbody>
</table>

Defining Objects

Objects are used to represent data with key-value pairs. In our bookstore example, we can define a Book object using an interface:

interface Book {
  id: number;
  title: string;
  author: string;
  genre: string;
  publishedYear: number;
  isbn: string;
  stock: number;
  price: number;
}

Working with Lists of Objects

To manage a collection of Book objects, we can use a list of objects:

books: Book[] = [
  { id: 1, title: "The Great Gatsby", author: "F. Scott Fitzgerald", genre: "Fiction", publishedYear: 1925, isbn: "978-0743273565", stock: 20, price: 15.99 },
  { id: 2, title: "To Kill a Mockingbird", author: "Harper Lee", genre: "Fiction", publishedYear: 1960, isbn: "978-0060935467", stock: 35, price: 10.99 },
  { id: 3, title: "1984", author: "George Orwell", genre: "Dystopian", publishedYear: 1949, isbn: "978-0451524935", stock: 40, price: 9.99 },
  { id: 4, title: "The Catcher in the Rye", author: "J.D. Salinger", genre: "Fiction", publishedYear: 1951, isbn: "978-0316769488", stock: 25, price: 8.99 },
  { id: 5, title: "A Brief History of Time", author: "Stephen Hawking", genre: "Non-fiction", publishedYear: 1988, isbn: "978-0553380163", stock: 10, price: 18.99 }
];

Adding Style with CSS

To enhance the visual presentation of the book table, we can add the following CSS

table {
  border-collapse: collapse;
  width: 80%;
  margin: 50px auto;
  border: 1px solid #ccc;
}

th, td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
}

td {
  font-size: 14px;
}

Output:

The output of the above code will be a well-structured table displaying the book data:

4.University Table:

Displaying University Data with Lists

In Angular, lists are essential for displaying structured data in a tabular format. Let's create a table to showcase a collection of universities:

<h2>University Table</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Location</th>
      <th>Established Year</th>
      <th>Type</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let university of universities">
      <td>{{ university.id }}</td>
      <td>{{ university.name }}</td>
      <td>{{ university.location }}</td>
      <td>{{ university.establishedYear }}</td>
      <td>{{ university.type }}</td>
      <td><a href="{{ university.website }}" target="_blank">{{ university.website }}</a></td>
    </tr>
  </tbody>
</table>

Defining University Objects

Objects are used to represent data with key-value pairs. In our university database example, we can define a University object using an interface:

interface University {
  id: number;
  name: string;
  location: string;
  establishedYear: number;
  type: string;
  website: string;
}

Working with Lists of University Objects

To manage a collection of University objects, we can use a list of objects:

ersities: University[] = [
  { id: 1, name: "University of the Philippines", location: "Quezon City", establishedYear: 1908, type: "Public", website: "www.up.edu.ph" },
  { id: 2, name: "Ateneo de Manila University", location: "Quezon City", establishedYear: 1859, type: "Private", website: "www.ateneo.edu" },
  { id: 3, name: "De La Salle University", location: "Manila", establishedYear: 1911, type: "Private", website: "www.dlsu.edu.ph" },
  { id: 4, name: "University of Santo Tomas", location: "Manila", establishedYear: 1611, type: "Private", website: "www.ust.edu.ph" },
  { id: 5, name: "Polytechnic University of the Philippines", location: "Manila", establishedYear: 1904, type: "Public", website: "www.pup.edu.ph" }
];

Adding Style with CSS

To enhance the visual presentation of the university table, we can add the following CSS:

table {
  border-collapse: collapse;
  width: 80%;
  margin: 50px auto;
  border: 1px solid #ccc;
}

th, td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
}

td {
  font-size: 14px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Output

The output of the above code will be a well-structured table displaying the university data:

4.Restaurant Table:

Displaying Restaurant Data with Lists

In Angular, lists are essential for displaying structured data in a tabular format. Let's create a table to showcase a collection of restaurants:

<h2>Restaurant List</h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Location</th>
      <th>Cuisine Type</th>
      <th>Established Year</th>
      <th>Website or Contact</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let restaurant of restaurants">
      <td>{{ restaurant.id }}</td>
      <td>{{ restaurant.name }}</td>
      <td>{{ restaurant.location }}</td>
      <td>{{ restaurant.cuisineType }}</td>
      <td>{{ restaurant.establishedYear }}</td>
      <td><a href="{{ restaurant.websiteOrContact }}" target="_blank">{{ restaurant.websiteOrContact }}</a></td>
    </tr>
  </tbody>
</table>

Defining Restaurant Objects

Objects are used to represent data with key-value pairs. In our restaurant guide example, we can define a Restaurant object using an interface:

interface Restaurant {
  id: number;
  name: string;
  location: string;
  cuisineType: string;
  establishedYear: number;
  websiteOrContact: string;
}

Working with Lists of Restaurant Objects

To manage a collection of Restaurant objects, we can use a list of objects:

restaurants: Restaurant[] = [
  { id: 1, name: "Vikings Luxury Buffet", location: "Pasay City", cuisineType: "Buffet", establishedYear: 2011, websiteOrContact: "www.vikings.ph" },
  { id: 2, name: "Antonio's Restaurant", location: "Tagaytay", cuisineType: "Fine Dining", establishedYear: 2002, websiteOrContact: "www.antoniosrestaurant.ph" },
  { id: 3, name: "Mesa Filipino Moderne", location: "Makati City", cuisineType: "Filipino", establishedYear: 2009, websiteOrContact: "www.mesa.ph" },
  { id: 4, name: "Manam Comfort Filipino", location: "Quezon City", cuisineType: "Filipino", establishedYear: 2013, websiteOrContact: "www.manam.ph" },
  { id: 5, name: "Ramen Nagi", location: "Various Locations", cuisineType: "Japanese", establishedYear: 2013, websiteOrContact: "www.ramennagi.com.ph" }
];

Adding Style with CSS

To enhance the visual presentation of the restaurant table, we can add the following CSS:

table {
  border-collapse: collapse;
  width: 80%;
  margin: 50px auto;
  border: 1px solid #ccc;
}

th, td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
}

td {
  font-size: 14px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Output

The output of the above code will be a well-structured table displaying the restaurant data:

This Is GITHUB LINK:
https://github.com/jerome09232/activity17

Activity 17: Data Structure Again

Documentation: Data Structures in Angular Application

1. Product Table:

Object Definition

List of Objects Initialization

CSS

This is the Output

2. Employee Table:

Representing Data with Lists

Defining Objects

Working with Lists of Objects

Enhancing Presentation with CSS

Output:

3.Books Table:

Displaying Data with Lists

Defining Objects

Working with Lists of Objects

Adding Style with CSS

Output:

4.University Table:

Defining University Objects

Working with Lists of University Objects

Adding Style with CSS

Output

4.Restaurant Table:

Displaying Restaurant Data with Lists

Defining Restaurant Objects

Working with Lists of Restaurant Objects

Adding Style with CSS

Output