Activity 15: Angular with TypeScript and data structures

To apply the learning from your previous lesson on Angular with TypeScript and data structures, you’ll implement an array or list similar to the example provided, using strings or numbers. The goal of this activity is to practice manipulating arrays in TypeScript, such as adding new data and fetching it from an array, through 50 different scenarios.

Here are 50 example scenarios for lists you can implement in your activity:

Student List – Manage a list of students.
Employee List – Manage a list of employees.
Fruit List – List different types of fruits.
Course List – List of courses offered in a school.
Book List – List of books in a library.
City List – List of cities a company operates in.
Movie List – List of movies in a theater.
Car Model List – List of car models available at a dealership.
Product List – List of products sold in a store.
Subject List – List of subjects taught in a semester.
Country List – List of countries by continent.
Sports List – List of popular sports.
Vegetable List – List of vegetables available at a grocery store.
Animal List – List of animals in a zoo.
Tool List – List of tools used in a workshop.
Language List – List of programming languages.
Game List – List of video games.
Software List – List of software installed on a computer.
Phone Contact List – List of phone contacts.
Music Playlist – List of songs in a playlist.
Food Menu – List of food items on a restaurant menu.
Grocery List – List of items to buy in a grocery store.
Classroom List – List of students in a classroom.
Inventory List – List of items in a store’s inventory.
Lecture List – List of lectures scheduled for a course.
Stationery List – List of office stationery.
Flower List – List of flowers for a wedding.
Destination List – List of travel destinations.
Laptop List – List of laptop models.
Laptop Specifications List – List of laptop specifications.
Computer Hardware List – List of computer components.
Mobile App List – List of apps on a phone.
Video List – List of videos in a library.
TV Show List – List of TV shows available for streaming.
Furniture List – List of furniture items in a store.
Accessory List – List of accessories for mobile phones.
Building List – List of buildings in a campus.
Painting List – List of famous paintings.
Artist List – List of famous artists.
Composer List – List of famous music composers.
Podcast List – List of podcast episodes.
Exercise List – List of exercises for a workout routine.
Meal Plan List – List of meals in a weekly plan.
Budget List – List of budget items for a project.
Presentation List – List of presentation topics.
Tour List – List of tour dates for a band.
Event List – List of upcoming events.
Developer Tools List – List of software developer tools.
Framework List – List of web development frameworks.

Library List – List of libraries used in a project.

Student List:

 <!-- student-list.component.html -->
 <main>
     <div class="container">
         <div class="row">
             <div class="col-md-12">
                 <h1>Student List</h1>
                 <table class="table table-bordered">
                     <thead>
                         <tr>
                             <th>Id</th>
                             <th>Name</th>
                             <th>Age</th>
                             <th>Grade</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let student of students">
                             <td>{{ student.id }}</td>
                             <td>{{ student.name }}</td>
                             <td>{{ student.age }}</td>
                             <td>{{ student.grade }}</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
         <div>
             <h2>Add Student</h2>
         </div>

         <div>
             <label for="id">Id:</label>
             <input
                 type="number"
                 id="id"
                 [(ngModel)]="id"
                 name="id"
                 required />
         </div>

         <div>
             <label for="name">Name:</label>
             <input
                 type="text"
                 id="name"
                 [(ngModel)]="name"
                 name="name"
                 required />
         </div>
         <div>
             <label for="age">Age:</label>
             <input
                 type="number"
                 id="age"
                 [(ngModel)]="age"
                 name="age"
                 required />
         </div>
         <div>
             <label for="grade">Grade:</label>
             <input
                 type="number"
                 id="grade"
                 [(ngModel)]="grade"
                 name="grade"
                 required />
         </div>
         <div>
             <button
                 class="btn btn-primary"
                 (click)="addStudent()">
                 Add Student
             </button>
         </div>
     </div>
 </main>

 /* student-list.component.ts */
 import { NgForOf } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import StudentList from '@app/interface/student-list';

 @Component({
     selector: 'app-student-list',
     standalone: true,
     imports: [NgForOf, FormsModule],
     templateUrl: './student-list.component.html',
 })
 export class StudentListComponent {
     students: StudentList[] = [];
     id: string = '';
     name: string = '';
     grade: string = '';
     age: number = 0;

     addStudent(): void {
         this.students.push({
             id: this.id,
             name: this.name,
             grade: this.grade,
             age: this.age,
         });

         this.age = 0;
         this.grade = '';
         this.id = '';
         this.name = '';
     }
 }
 /* @app/interface/student-list */
 export default interface StudentList {
     id: string;
     name: string;
     grade: string;
     age: number;
 }

Employee List:

 <!-- employee-list.component.html -->
 <main>
     <div class="container">
         <h1>Employee List</h1>
         <div class="table-responsive">
             <table class="table table-bordered table-striped">
                 <thead>
                     <tr>
                         <th>Id</th>
                         <th>Name</th>
                         <th>Position</th>
                         <th>Age</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr *ngFor="let employee of employees">
                         <td>{{ employee.id }}</td>
                         <td>{{ employee.name }}</td>
                         <td>{{ employee.position }}</td>
                         <td>{{ employee.age }}</td>
                     </tr>
                 </tbody>
             </table>
         </div>
         <div>
             <h2>Add Employee</h2>
         </div>

         <div>
             <label for="id">Id:</label>
             <input
                 type="number"
                 id="id"
                 [(ngModel)]="id"
                 name="id"
                 required />
         </div>

         <div>
             <label for="name">Name:</label>
             <input
                 type="text"
                 id="name"
                 [(ngModel)]="name"
                 name="name"
                 required />
         </div>
         <div>
             <label for="salary">Position:</label>
             <input
                 type="text"
                 id="salary"
                 [(ngModel)]="position"
                 name="salary"
                 required />
         </div>
         <div>
             <label for="age">Age:</label>
             <input
                 type="number"
                 id="age"
                 [(ngModel)]="age"
                 name="age"
                 required />
         </div>
         <div>
             <button
                 class="btn btn-primary"
                 (click)="addEmployee()">
                 Add Employee
             </button>
         </div>
     </div>
 </main>

 // employee-list.component.ts
 import { Component } from '@angular/core';
 import { NgForOf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { EmployeeList } from '@app/interface/employee-list';

 @Component({
     selector: 'app-employee-list',
     standalone: true,
     imports: [NgForOf, FormsModule],
     templateUrl: './employee-list.component.html',
     styles: ``,
 })
 export class EmployeeListComponent {
     employees: EmployeeList[] = [];

     id: string = '';
     name: string = '';
     position: string = '';
     age: number = 0;

     addEmployee(): void {
         this.employees.push({
             id: this.id,
             name: this.name,
             position: this.position,
             age: this.age,
         });

         this.age = 0;
         this.position = '';
         this.id = '';
         this.name = '';
     }
 }

 // @app/interface/employee-list
 export interface EmployeeList {
     id: string;
     name: string;
     position: string;
     age: number;
 }

Fruit List:

 <!-- fruit-list.component.html -->
 <main>
     <h2>Fruit List</h2>
     <table>
         <thead>
             <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Quantity</th>
                 <th>Price</th>
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let fruit of fruits">
                 <td>{{ fruit.id }}</td>
                 <td>{{ fruit.name }}</td>
                 <td>{{ fruit.quantity }}</td>
                 <td>{{ fruit.price }}</td>
             </tr>
         </tbody>
     </table>
     <div>
         <h2>Add Fruit</h2>
     </div>

     <div>
         <label for="id">Id:</label>
         <input
             type="text"
             id="id"
             [(ngModel)]="id"
             name="id"
             required />
     </div>

     <div>
         <label for="name">Name:</label>
         <input
             type="text"
             id="name"
             [(ngModel)]="name"
             name="name"
             required />
     </div>
     <div>
         <label for="color">Quantity</label>
         <input
             type="text"
             id="color"
             [(ngModel)]="quantity"
             name="color"
             required />
     </div>
     <div>
         <label for="weight">Price:</label>
         <input
             type="number"
             id="weight"
             [(ngModel)]="price"
             name="weight"
             required />
     </div>
     <div>
         <button
             class="btn btn-primary"
             (click)="addFruit()">
             Add Fruit
         </button>
     </div>
 </main>

 // fruit-list.component.ts
 import { Component } from '@angular/core';
 import FruitList from '@app/interface/fruit-list';
 import { FormsModule } from '@angular/forms';
 import { NgForOf } from '@angular/common';

 @Component({
     selector: 'app-fruit-list',
     standalone: true,
     imports: [FormsModule, NgForOf],
     templateUrl: './fruit-list.component.html',
     styles: ``,
 })
 export class FruitListComponent {
     fruits: FruitList[] = [];

     id: string = '';
     name: string = '';
     quantity: number = 0;
     price: number = 0;

     addFruit(): void {
         this.fruits.push({
             id: this.id,
             name: this.name,
             quantity: this.quantity,
             price: this.price,
         });

         this.id = '';
         this.name = '';
         this.quantity = 0;
         this.price = 0;
     }
 }
 // @app/interface/fruit-list
 export default interface FruitList {
     id: string;
     name: string;
     quantity: number;
     price: number;
 }

Course List:

 <!-- course-list.component.html -->
 <main>
     <div class="container">
         <div class="row">
             <div class="col-12">
                 <h1 class="text-center">Course List</h1>
                 <table class="table table-striped">
                     <thead>
                         <tr>
                             <th>Course ID</th>
                             <th>Course Name</th>
                             <th>Teacher</th>
                             <th>Credit</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let course of courses">
                             <td>{{ course.id }}</td>
                             <td>{{ course.name }}</td>
                             <td>{{ course.teacher }}</td>
                             <td>{{ course.credit }}</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>

         <div>
             <label for=""></label>
             <input type="text" class="form-control" placeholder="Course ID" [(ngModel)]="id">
         </div>
         <div>
             <label for=""></label>
             <input type="text" class="form-control" placeholder="Course Name" [(ngModel)]="name">
         </div>
         <div>
             <label for=""></label>
             <input type="text" class="form-control" placeholder="Teacher" [(ngModel)]="teacher">

         </div>
         <div>
             <label for=""></label>
             <input type="number" class="form-control" placeholder="Credit" [(ngModel)]="credit">
         </div>
         <div>
             <button class="btn btn-primary" (click)="addCourse()">Add Course</button>
         </div>
     </div>

 </main>

 // course-list.component.ts
 import { Component } from '@angular/core';
 import { NgForOf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { CourseList } from '@app/interface/course-list';

 @Component({
     selector: 'app-course-list',
     standalone: true,
     imports: [NgForOf, FormsModule],
     templateUrl: './course-list.component.html',
     styles: ``,
 })
 export class CourseListComponent {
     courses: CourseList[] = [];

     id: string = '';
     name: string = '';
     teacher: string = '';
     credit: number = 0;

     addCourse(): void {
         this.courses.push({
             id: this.id,
             name: this.name,
             teacher: this.teacher,
             credit: this.credit,
         });

         this.id = '';
         this.name = '';
         this.teacher = '';
         this.credit = 0;
     }
 }
 // @app/interface/course-list
 export interface CourseList {
     id: string;
     name: string;
     teacher: string;
     credit: number;
 }

Book List:

 <!-- book-list.component.html -->
 <main>
     <div class="container">
         <div class="row">
             <div class="col-12">
                 <h1 class="text-center">Book List</h1>
                 <table class="table table-striped">
                     <thead>
                         <tr>
                             <th>Book ID</th>
                             <th>Book Name</th>
                             <th>ISBN</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let book of books">
                             <td>{{ book.id }}</td>
                             <td>{{ book.name }}</td>
                             <td>{{ book.isbn }}</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="Book ID"
                 [(ngModel)]="id" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="Book Name"
                 [(ngModel)]="name" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="ISBN"
                 [(ngModel)]="isbn" />
         </div>
         <div>
             <button
                 class="btn btn-primary"
                 (click)="addBook()">
                 Add Book
             </button>
         </div>
     </div>
 </main>

 // book-list.component.ts
 import { Component } from '@angular/core';
 import BookList from '@app/interface/book-list';
 import { FormsModule } from '@angular/forms';
 import { NgForOf } from '@angular/common';

 @Component({
     selector: 'app-book-list',
     standalone: true,
     imports: [FormsModule, NgForOf],
     templateUrl: './book-list.component.html',
     styles: ``,
 })
 export class BookListComponent {
     books: BookList[] = [];

     id: string = '';
     name: string = '';
     isbn: string = '';

     addBook(): void {
         this.books.push({
             id: this.id,
             name: this.name,
             isbn: this.isbn,
         });

         this.id = '';
         this.name = '';
         this.isbn = '';
     }
 }
 // @app/interface/book-list
 export default interface BookList {
     id: string;
     name: string;
     isbn: string;
 }

City List:

 <!-- city-list.component.html -->
 <main>
     <div class="container">
         <div class="row">
             <div class="col-12">
                 <h1 class="text-center">City List</h1>
                 <table class="table table-striped">
                     <thead>
                         <tr>
                             <th>City ID</th>
                             <th>City Name</th>
                             <th>Country</th>
                             <th>Population</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let city of cities">
                             <td>{{ city.id }}</td>
                             <td>{{ city.name }}</td>
                             <td>{{ city.country }}</td>
                             <td>{{ city.population }}</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="City ID"
                 [(ngModel)]="id" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="City Name"
                 [(ngModel)]="name" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="Country"
                 [(ngModel)]="country" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="number"
                 class="form-control"
                 placeholder="Population"
                 [(ngModel)]="population" />
         </div>
         <div>
             <button
                 class="btn btn-primary"
                 (click)="addCity()">
                 Add City
             </button>
         </div>
     </div>
 </main>

 // city-list.component.ts
 import { Component } from '@angular/core';
 import { NgForOf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import CityList from '@app/interface/city-list';

 @Component({
     selector: 'app-city-list',
     standalone: true,
     imports: [NgForOf, FormsModule],
     templateUrl: './city-list.component.html',
     styles: ``,
 })
 export class CityListComponent {
     cities: CityList[] = [];

     id: string = '';
     name: string = '';
     country: string = '';
     population: number = 0;

     addCity(): void {
         this.cities.push({
             id: this.id,
             name: this.name,
             country: this.country,
             population: this.population,
         });

         this.id = '';
         this.name = '';
         this.country = '';
         this.population = 0;
     }
 }
 // @app/interface/city-list
 export default interface CityList {
     id: string;
     name: string;
     country: string;
     population: number;
 }

Movie List:

 <!-- movie-list.component.html -->
 <main>
     <div class="container">
         <div class="row">
             <div class="col">
                 <h1>Movie List</h1>
                 <table class="table">
                     <thead>
                         <tr>
                             <th>Movie ID</th>
                             <th>Movie Name</th>
                             <th>Director</th>
                             <th>Year</th>
                             <th>Rating</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr *ngFor="let movie of movies">
                             <td>{{ movie.id }}</td>
                             <td>{{ movie.name }}</td>
                             <td>{{ movie.director }}</td>
                             <td>{{ movie.year }}</td>
                             <td>{{ movie.rating }}</td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="Movie ID"
                 [(ngModel)]="id" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="Movie Name"
                 [(ngModel)]="name" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="text"
                 class="form-control"
                 placeholder="Director"
                 [(ngModel)]="director" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="number"
                 class="form-control"
                 placeholder="Year"
                 [(ngModel)]="year" />
         </div>
         <div>
             <label for=""></label>
             <input
                 type="number"
                 class="form-control"
                 placeholder="Rating"
                 [(ngModel)]="rating" />
         </div>
         <div>
             <button
                 class="btn btn-primary"
                 (click)="addMovie()">
                 Add Movie
             </button>
         </div>
     </div>
 </main>

 // movie-list.component.ts
 import { Component } from '@angular/core';
 import { NgForOf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import MovieList from '@app/interface/movie-list';

 @Component({
     selector: 'app-movie-list',
     standalone: true,
     imports: [NgForOf, FormsModule],
     templateUrl: './movie-list.component.html',
     styles: ``,
 })
 export class MovieListComponent {
     movies: MovieList[] = [];

     id: string = '';
     name: string = '';
     director: string = '';
     year: number = 0;
     rating: number = 0;

     addMovie(): void {
         this.movies.push({
             id: this.id,
             name: this.name,
             director: this.director,
             year: this.year,
             rating: this.rating,
         });

         this.id = '';
         this.name = '';
         this.director = '';
         this.year = 0;
         this.rating = 0;
     }
 }
 // @app/interface/movie-list
 export default interface MovieList {
     id: string;
     name: string;
     director: string;
     year: number;
     rating: number;
 }

Car Model List:

 <!-- car-model-list.component.html -->
 <main>
     <h2>Car Model List</h2>
     <table>
         <thead>
             <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Year</th>
                 <th>Make</th>
                 <th>Model</th>
                 <th>Price</th>
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let carModel of carModels">
                 <td>{{ carModel.id }}</td>
                 <td>{{ carModel.name }}</td>
                 <td>{{ carModel.year }}</td>
                 <td>{{ carModel.make }}</td>
                 <td>{{ carModel.model }}</td>
                 <td>{{ carModel.price }}</td>
             </tr>
         </tbody>
     </table>

     <div>
         <h2>Add Car Model</h2>
     </div>

     <div>
         <label for="id">Id:</label>
         <input
             type="text"
             id="id"
             [(ngModel)]="id"
             name="id"
             required />
     </div>

     <div>
         <label for="name">Name:</label>
         <input
             type="text"
             id="name"
             [(ngModel)]="name"
             name="name"
             required />
     </div>
     <div>
         <label for="year">Year</label>
         <input
             type="text"
             id="year"
             [(ngModel)]="year"
             name="year"
             required />
     </div>
     <div>
         <label for="make">Make:</label>
         <input
             type="text"
             id="make"
             [(ngModel)]="make"
             name="make"
             required />
     </div>
     <div>
         <label for="model">Model:</label>
         <input
             type="text"
             id="model"
             [(ngModel)]="model"
             name="model"
             required />
     </div>
     <div>
         <label for="price">Price:</label>
         <input
             type="number"
             id="price"
             [(ngModel)]="price"
             name="price"
             required />
     </div>
     <button (click)="addCarModel()">Add Car Model</button>
 </main>

 // car-model-list.component.ts
 import { Component } from '@angular/core';
 import { NgForOf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import CarModel from '@app/interface/car-model';

 @Component({
     selector: 'app-card-model-list',
     standalone: true,
     imports: [NgForOf, FormsModule],
     templateUrl: './car-model-list.component.html',
     styles: ``,
 })
 export class CarModelListComponent {
     carModels: CarModel[] = [];
     id: string = '';
     name: string = '';
     year: number = 0;
     make: string = '';
     model: string = '';
     price: number = 0;

     addCarModel(): void {
         this.carModels.push({
             id: Number(this.id),
             name: this.name,
             year: this.year,
             make: this.make,
             model: this.model,
             price: this.price,
         });

         this.id = '';
         this.name = '';
         this.year = 0;
         this.make = '';
         this.model = '';
         this.price = 0;
     }
 }
 // @app/interface/car-model
 export default interface CarModel {
     id: number;
     name: string;
     year: number;
     make: string;
     model: string;
     price: number;
 }

Product List:

 <!-- product-list.component.html -->
 <main>
     <h1>Product List</h1>
     <table>
         <thead>
             <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Price</th>
             </tr>
         </thead>
         <tbody>
             <tr *ngFor="let product of products">
                 <td>{{ product.id }}</td>
                 <td>{{ product.name }}</td>
                 <td>{{ product.price }}</td>
             </tr>
         </tbody>
     </table>

     <div>
         <label for="id">Id:</label>
         <input
             type="number"
             id="id"
             name="id"
             [(ngModel)]="id" />
     </div>

     <div>
         <label for="name">Name:</label>
         <input
             type="text"
             id="name"
             name="name"
             [(ngModel)]="name" />
     </div>

     <div>
         <label for="price">Price:</label>
         <input
             type="number"
             id="price"
             name="price"
             [(ngModel)]="price" />
     </div>
     <button (click)="addProduct()">Add Product</button>
 </main>

 // product-list.component.ts
 import { Component } from '@angular/core';
 import Product from '@app/interface/product-list';
 import { NgForOf } from '@angular/common';
 import { FormsModule } from '@angular/forms';

 @Component({
     selector: 'app-product-list',
     standalone: true,
     imports: [NgForOf, FormsModule],
     templateUrl: './product-list.component.html',
     styles: ``,
 })
 export class ProductListComponent {
     products: Product[] = [];
     id: string = '';
     name: string = '';
     price: number = 0;

     addProduct(): void {
         this.products.push({
             id: Number(this.id),
             name: this.name,
             price: this.price,
         });

         this.id = '';
         this.name = '';
         this.price = 0;
     }
 }
 // @app/interface/product-list
 export default interface Product {
     id: number;
     name: string;
     price: number;
 }

Subject List:

<!-- subject-list.component.html -->
<main>
    <h1>Subject List</h1>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Teacher</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let subject of subjects">
                <td>{{ subject.id }}</td>
                <td>{{ subject.name }}</td>
                <td>{{ subject.teacher }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="id">Id:</label>
        <input
            type="text"
            id="id"
            [(ngModel)]="id"
            name="id"
            required />
    </div>
    <div>
        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name"
            name="name"
            required />
    </div>
    <div>
        <label for="teacher">Teacher:</label>
        <input
            type="text"
            id="teacher"
            [(ngModel)]="teacher"
            name="teacher"
            required />
    </div>
    <button (click)="addSubject()">Add Subject</button>
</main>

// subject-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import Subject from '@app/interface/subject-list';

@Component({
    selector: 'app-subject-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './subject-list.component.html',
    styles: ``,
})
export class SubjectListComponent {
    subjects: Subject[] = [];

    id: string = '';
    name: string = '';
    teacher: string = '';

    addSubject(): void {
        this.subjects.push({
            id: Number(this.id),
            name: this.name,
            teacher: this.teacher,
        });

        this.id = '';
        this.name = '';
        this.teacher = '';
    }
}
// @app/interface/subject-list
export default interface Subject {
    id: number;
    name: string;
    teacher: string;
}

Country List:

<!-- country-list.component.html -->
<main>
    <h1>Country List</h1>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Capital</th>
                <th>Population</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let country of countries">
                <td>{{ country.id }}</td>
                <td>{{ country.name }}</td>
                <td>{{ country.capital }}</td>
                <td>{{ country.population }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="id">Id:</label>
        <input
            type="text"
            id="id"
            [(ngModel)]="id"
            name="id"
            required />
    </div>
    <div>
        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name"
            name="name"
            required />
    </div>
    <div>
        <label for="capital">Capital:</label>
        <input
            type="text"
            id="capital"
            [(ngModel)]="capital"
            name="capital"
            required />
    </div>
    <div>
        <label for="population">Population:</label>
        <input
            type="number"
            id="population"
            [(ngModel)]="population"
            name="population"
            required />
    </div>
    <button (click)="addCountry()">Add Country</button>
</main>

// country-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import Country from '@app/interface/country-list';

@Component({
    selector: 'app-country-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './country-list.component.html',
    styles: ``,
})
export class CountryListComponent {
    countries: Country[] = [];

    id: string = '';
    name: string = '';
    capital: string = '';
    population: string = '';

    addCountry(): void {
        this.countries.push({
            id: Number(this.id),
            name: this.name,
            capital: this.capital,
            population: Number(this.population),
        });

        this.id = '';
        this.name = '';
        this.capital = '';
        this.population = '';
    }
}
// @app/interface/country-list
export default interface Country {
    id: number;
    name: string;
    capital: string;
    population: number;
}

Sports List:

<!-- sports-list.component.html -->
<main>
    <h1>Sports List</h1>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Team</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let sport of sports">
                <td>{{ sport.id }}</td>
                <td>{{ sport.name }}</td>
                <td>{{ sport.team }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="id">Id:</label>
        <input
            type="text"
            id="id"
            [(ngModel)]="id"
            name="id"
            required />
    </div>
    <div>
        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name"
            name="name"
            required />
    </div>
    <div>
        <label for="team">Team:</label>
        <input
            type="text"
            id="team"
            [(ngModel)]="team"
            name="team"
            required />
    </div>
    <button (click)="addSport()">Add Sport</button>
</main>

// sports-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import Sports from '@app/interface/sports-list';

@Component({
    selector: 'app-sports-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './sports-list.component.html',
    styles: ``,
})
export class SportsListComponent {
    sports: Sports[] = [];

    id: string = '';
    name: string = '';
    team: string = '';

    addSport(): void {
        this.sports.push({
            id: Number(this.id),
            name: this.name,
            team: this.team,
        });

        this.id = '';
        this.name = '';
        this.team = '';
    }
}
// @app/interface/sports-list
export default interface Sports {
    id: number;
    name: string;
    team: string;
}

Vegetable List:

<!-- vegetables-list.component.html -->
<main>
    <h1>Vegetables List</h1>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let vegetable of vegetables">
                <td>{{ vegetable.id }}</td>
                <td>{{ vegetable.name }}</td>
                <td>{{ vegetable.price }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="id">Id:</label>
        <input
            type="text"
            id="id"
            [(ngModel)]="id"
            name="id"
            required />
    </div>
    <div>
        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name"
            name="name"
            required />
    </div>
    <div>
        <label for="price">Price:</label>
        <input
            type="number"
            id="price"
            [(ngModel)]="price"
            name="price"
            required />
    </div>
    <button (click)="addVegetable()">Add Vegetable</button>
</main>

// vegetables-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import Vegetables from '@app/interface/vegetables-list';

@Component({
    selector: 'app-vegetables-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './vegetables-list.component.html',
    styles: ``,
})
export class VegetablesListComponent {
    vegetables: Vegetables[] = [];

    id: string = '';
    name: string = '';
    price: string = '';

    addVegetable(): void {
        this.vegetables.push({
            id: Number(this.id),
            name: this.name,
            price: Number(this.price),
        });

        this.id = '';
        this.name = '';
        this.price = '';
    }
}
// @app/interface/vegetables-list
export default interface Vegetables {
    id: number;
    name: string;
    price: number;
}

Animal List:

<!-- animals-list.component.html -->
<main>
    <h1>Animals List</h1>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Origin</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let animal of animals">
                <td>{{ animal.id }}</td>
                <td>{{ animal.name }}</td>
                <td>{{ animal.origin }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="id">Id:</label>
        <input
            type="text"
            id="id"
            [(ngModel)]="id"
            name="id"
            required />
    </div>
    <div>
        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name"
            name="name"
            required />
    </div>
    <div>
        <label for="origin">Origin:</label>
        <input
            type="text"
            id="origin"
            [(ngModel)]="origin"
            name="origin"
            required />
    </div>
    <button (click)="addAnimal()">Add Animal</button>
</main>

// animals-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import Animals from '@app/interface/animals-list';

@Component({
    selector: 'app-animals-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './animals-list.component.html',
    styles: ``,
})
export class AnimalsListComponent {
    animals: Animals[] = [];

    id: string = '';
    name: string = '';
    origin: string = '';

    addAnimal(): void {
        this.animals.push({
            id: Number(this.id),
            name: this.name,
            origin: this.origin,
        });

        this.id = '';
        this.name = '';
        this.origin = '';
    }
}

export default interface Animals {
    id: number;
    name: string;
    origin: string;
}

Tool List:

<!-- tool-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Tool List</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Price</th>
                            <th>Quantity</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let tool of tools">
                            <td>{{ tool.id }}</td>
                            <td>{{ tool.name }}</td>
                            <td>{{ tool.description }}</td>
                            <td>{{ tool.price }}</td>
                            <td>{{ tool.quantity }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <label for="id"> ID </label>
            <input
                id="id"
                type="number"
                class="form-control"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name"> Name </label>
            <input
                id="name"
                type="text"
                class="form-control"
                [(ngModel)]="name" />
        </div>

        <div>
            <label for="description"> Description </label>
            <input
                id="description"
                type="text"
                class="form-control"
                [(ngModel)]="description" />
        </div>

        <div>
            <label for="price"> Price </label>
            <input
                id="price"
                type="number"
                class="form-control"
                [(ngModel)]="price" />
        </div>

        <div>
            <label for="quantity"> Quantity </label>
            <input
                id="quantity"
                type="number"
                class="form-control"
                [(ngModel)]="quantity" />
        </div>

        <div>
            <button
                class="btn btn-primary"
                (click)="addTool()">
                Add Tool
            </button>
        </div>
    </div>
</main>

// tool-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import Tool from '@app/interface/tool-list';

@Component({
    selector: 'app-tool-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './tool-list.component.html',
    styles: ``,
})
export class ToolListComponent {
    tools: Tool[] = [];

    id: string = '';
    name: string = '';
    description: string = '';
    price: string = '';
    quantity: string = '';

    addTool(): void {
        this.tools.push({
            id: Number(this.id),
            name: this.name,
            description: this.description,
            price: Number(this.price),
            quantity: Number(this.quantity),
        });

        this.id = '';
        this.name = '';
        this.description = '';
        this.price = '';
        this.quantity = '';
    }
}
// @app/interface/tool-list:
export default interface ToolList {
    id: number;
    name: string;
    description: string;
    price: number;
    quantity: number;
}

Language List:

<!-- language-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Language List</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Origin</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let language of languages">
                            <td>{{ language.id }}</td>
                            <td>{{ language.name }}</td>
                            <td>{{ language.description }}</td>
                            <td>{{ language.origin }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <label for="id"> ID </label>
            <input
                id="id"
                type="number"
                class="form-control"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name"> Name </label>
            <input
                id="name"
                type="text"
                class="form-control"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="description"> Description </label>
            <input
                id="description"
                type="text"
                class="form-control"
                [(ngModel)]="description" />
        </div>
        <div>
            <label for="origin"> Origin </label>
            <input
                id="origin"
                type="text"
                class="form-control"
                [(ngModel)]="origin" />
        </div>
        <div>
            <button
                class="btn btn-primary"
                (click)="addLanguage()">
                Add Language
            </button>
        </div>
    </div>
</main>

// language-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import Language from '@app/interface/language-list';

@Component({
    selector: 'app-language-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './language-list.component.html',
    styles: ``,
})
export class LanguageListComponent {
    languages: Language[] = [];

    id: string = '';
    name: string = '';
    description: string = '';
    origin: string = '';

    addLanguage(): void {
        this.languages.push({
            id: Number(this.id),
            name: this.name,
            description: this.description,
            origin: this.origin,
        });

        this.id = '';
        this.name = '';
        this.description = '';
        this.origin = '';
    }
}
// @app/interface/language-list
export default interface LanguageList {
    id: number;
    name: string;
    description: string;
    origin: string;
}

Game List:

<!-- game-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Game List</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Platform</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let game of games">
                            <td>{{ game.id }}</td>
                            <td>{{ game.name }}</td>
                            <td>{{ game.description }}</td>
                            <td>{{ game.platform }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <label for="id"> ID </label>
            <input
                id="id"
                type="number"
                class="form-control"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name"> Name </label>
            <input
                id="name"
                type="text"
                class="form-control"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="description"> Description </label>
            <input
                id="description"
                type="text"
                class="form-control"
                [(ngModel)]="description" />
        </div>
        <div>
            <label for="platform"> Platform </label>
            <input
                id="platform"
                type="text"
                class="form-control"
                [(ngModel)]="platform" />
        </div>
        <div>
            <button
                class="btn btn-primary"
                (click)="addGame()">
                Add Game
            </button>
        </div>
    </div>
</main>

// game-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import GameList from '@app/interface/game-list';

@Component({
    selector: 'app-game-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './game-list.component.html',
    styles: ``,
})
export class GameListComponent {
    games: GameList[] = [];

    id: string = '';
    name: string = '';
    description: string = '';
    platform: string = '';

    addGame(): void {
        this.games.push({
            id: Number(this.id),
            name: this.name,
            description: this.description,
            platform: this.platform,
        });

        this.id = '';
        this.name = '';
        this.description = '';
        this.platform = '';
    }
}
// @app/interface/game-list:
export default interface GameList {
    id: number;
    name: string;
    description: string;
    platform: string;
}

Software List

<!-- software-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Software List</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Platform</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let software of softwareList">
                            <td>{{ software.id }}</td>
                            <td>{{ software.name }}</td>
                            <td>{{ software.description }}</td>
                            <td>{{ software.platform }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id"> ID </label>
            <input
                id="id"
                type="number"
                class="form-control"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name"> Name </label>
            <input
                id="name"
                type="text"
                class="form-control"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="description"> Description </label>
            <input
                id="description"
                type="text"
                class="form-control"
                [(ngModel)]="description" />
        </div>
        <div>
            <label for="platform"> Platform </label>
            <input
                id="platform"
                type="text"
                class="form-control"
                [(ngModel)]="platform" />
        </div>
        <div>
            <button
                class="btn btn-primary"
                (click)="addSoftware()">
                Add Software
            </button>
        </div>
    </div>
</main>

// software-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import SoftwareList from '@app/interface/software-list';

@Component({
    selector: 'app-software-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './software-list.component.html',
    styles: ``,
})
export class SoftwareListComponent {
    softwareList: SoftwareList[] = [];
    id: string = '';
    name: string = '';
    description: string = '';
    platform: string = '';

    addSoftware(): void {
        this.softwareList.push({
            id: Number(this.id),
            name: this.name,
            description: this.description,
            platform: this.platform,
        });

        this.id = '';
        this.name = '';
        this.description = '';
        this.platform = '';
    }
}
// @app/interface/software-list:
export default interface SoftwareList {
    id: number;
    name: string;
    description: string;
    platform: string;
}

Phone Contact List:

<!-- phone-contact-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Phone Contact List</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let phoneContact of phoneContactList">
                            <td>{{ phoneContact.id }}</td>
                            <td>{{ phoneContact.name }}</td>
                            <td>{{ phoneContact.email }}</td>
                            <td>{{ phoneContact.phone }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <div>
                <label for="id"> ID </label>
                <input
                    id="id"
                    type="number"
                    class="form-control"
                    [(ngModel)]="id" />
            </div>
            <div>
                <label for="name"> Name </label>
                <input
                    id="name"
                    type="text"
                    class="form-control"
                    [(ngModel)]="name" />
            </div>
            <div>
                <label for="email"> Email </label>
                <input
                    id="email"
                    type="text"
                    class="form-control"
                    [(ngModel)]="email" />
            </div>
            <div>
                <label for="phone"> Phone </label>
                <input
                    id="phone"
                    type="text"
                    class="form-control"
                    [(ngModel)]="phone" />
            </div>
            <div>
                <button
                    class="btn btn-primary"
                    (click)="addPhoneContact()">
                    Add Phone Contact
                </button>
            </div>
        </div>
    </div>
</main>

// phone-contact-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import PhoneContactList from '@app/interface/phone-contact-list';

@Component({
    selector: 'app-phone-contact-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './phone-contact-list.component.html',
    styles: ``,
})
export class PhoneContactListComponent {
    phoneContactList: PhoneContactList[] = [];
    id: string = '';
    name: string = '';
    email: string = '';
    phone: string = '';

    addPhoneContact(): void {
        this.phoneContactList.push({
            id: Number(this.id),
            name: this.name,
            email: this.email,
            phone: this.phone,
        });

        this.id = '';
        this.name = '';
        this.email = '';
        this.phone = '';
    }
}
// @app/interface/phone-contact-list
export default interface PhoneContactList {
    id: number;
    name: string;
    email: string;
    phone: string;
}

Music Playlist:

<!-- music-play-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Music Play List</h1>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Artist</th>
                            <th>Album</th>
                            <th>Duration</th>
                            <th>Genre</th>
                            <th>Year</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let music of musicPlayList">
                            <td>{{ music.id }}</td>
                            <td>{{ music.name }}</td>
                            <td>{{ music.artist }}</td>
                            <td>{{ music.album }}</td>
                            <td>{{ music.duration }}</td>
                            <td>{{ music.genre }}</td>
                            <td>{{ music.year }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                name="id"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="artist">Artist</label>
            <input
                type="text"
                id="artist"
                name="artist"
                [(ngModel)]="artist" />
        </div>
        <div>
            <label for="album">Album</label>
            <input
                type="text"
                id="album"
                name="album"
                [(ngModel)]="album" />
        </div>
        <div>
            <label for="duration">Duration</label>
            <input
                type="text"
                id="duration"
                name="duration"
                [(ngModel)]="duration" />
        </div>
        <div>
            <label for="genre">Genre</label>
            <input
                type="text"
                id="genre"
                name="genre"
                [(ngModel)]="genre" />
        </div>
        <div>
            <label for="year">Year</label>
            <input
                type="text"
                id="year"
                name="year"
                [(ngModel)]="year" />
        </div>
        <div>
            <button (click)="addMusicPlayList()">Add Music</button>
        </div>
    </div>
</main>

// music-play-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import MusicPlayList from '@app/interface/music-play-list';

@Component({
    selector: 'app-music-play-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './music-play-list.component.html',
    styles: ``,
})
export class MusicPlayListComponent {
    musicPlayList: MusicPlayList[] = [];
    id: string = '';
    name: string = '';
    artist: string = '';
    album: string = '';
    duration: string = '';
    genre: string = '';
    year: string = '';

    addMusicPlayList(): void {
        this.musicPlayList.push({
            id: Number(this.id),
            name: this.name,
            artist: this.artist,
            album: this.album,
            duration: this.duration,
            genre: this.genre,
            year: this.year,
        });

        this.id = '';
        this.name = '';
        this.artist = '';
        this.album = '';
        this.duration = '';
        this.genre = '';
        this.year = '';
    }
}
// @app/interface/music-play-list:
export default interface MusicPlayList {
    id: number;
    name: string;
    artist: string;
    album: string;
    duration: string;
    genre: string;
    year: string;
}

Food Menu:

<!-- food-menu-list.component.html -->
<main>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Price</th>
                <th>Description</th>
                <th>Rating</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let foodMenu of foodMenuList">
                <td>{{ foodMenu.id }}</td>
                <td>{{ foodMenu.name }}</td>
                <td>{{ foodMenu.price }}</td>
                <td>{{ foodMenu.description }}</td>
                <td>{{ foodMenu.rating }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="id">ID</label>
        <input
            type="number"
            id="id"
            name="id"
            [(ngModel)]="id" />
    </div>

    <div>
        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            name="name"
            [(ngModel)]="name" />
    </div>

    <div>
        <label for="price">Price:</label>
        <input
            type="number"
            id="price"
            name="price"
            [(ngModel)]="price" />
    </div>

    <div>
        <label for="description">Description:</label>
        <input
            type="text"
            id="description"
            name="description"
            [(ngModel)]="description" />
    </div>

    <div>
        <label for="rating">Rating:</label>
        <input
            type="number"
            id="rating"
            name="rating"
            [(ngModel)]="rating" />
    </div>
    <button (click)="addFoodMenu()">Add Food</button>
</main>

// food-menu-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import FoodMenuList from '@app/interface/food-menu-list';

@Component({
    selector: 'app-food-menu-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './food-menu-list.component.html',
    styles: ``,
})
export class FoodMenuListComponent {
    foodMenuList: FoodMenuList[] = [];

    id: number = 0;
    name: string = '';
    price: number = 0;
    description: string = '';
    rating: number = 0;

    addFoodMenu() {
        this.foodMenuList.push({
            id: this.id,
            name: this.name,
            price: this.price,
            description: this.description,
            rating: this.rating,
        });
        this.id = 0;
        this.name = '';
        this.price = 0;
        this.description = '';
        this.rating = 0;
    }
}
// @app/interface/food-menu-list
export default interface FoodMenuList {
    id: number;
    name: string;
    price: number;
    description: string;
    rating: number;
}

Grocery List:

<!-- grocery-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Grocery List</h1>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let grocery of groceryList">
                            <td>{{ grocery.id }}</td>
                            <td>{{ grocery.name }}</td>
                            <td>{{ grocery.price }}</td>
                            <td>{{ grocery.description }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                name="id"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="price">Price</label>
            <input
                type="text"
                id="price"
                name="price"
                [(ngModel)]="price" />
        </div>
        <div>
            <label for="description">Description</label>
            <input
                type="text"
                id="description"
                name="description"
                [(ngModel)]="description" />
        </div>
        <div>
            <button (click)="addGrocery()">Add Grocery</button>
        </div>
    </div>
</main>

// grocery-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import GroceryList from '@app/interface/grocery-list';

@Component({
    selector: 'app-grocery-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './grocery-list.component.html',
    styles: ``,
})
export class GroceryListComponent {
    groceryList: GroceryList[] = [];

    id: number = 0;
    name: string = '';
    price: number = 0;
    description: string = '';

    addGrocery() {
        this.groceryList.push({
            id: this.id,
            name: this.name,
            price: this.price,
            description: this.description,
        });
        this.id = 0;
        this.name = '';
        this.price = 0;
        this.description = '';
    }
}
// @app/interface/grocery-list
export default interface GroceryList {
    id: number;
    name: string;
    price: number;
    description: string;
}

Classroom List:

<!-- classroom-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Classroom List</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Teacher</th>
                            <th>Student Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let classroom of classroomList">
                            <td>{{ classroom.id }}</td>
                            <td>{{ classroom.name }}</td>
                            <td>{{ classroom.teacher }}</td>
                            <td>{{ classroom.studentCount }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                [(ngModel)]="id" />
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                [(ngModel)]="name" />
        </div>

        <div>
            <label for="teacher">Teacher</label>
            <input
                type="text"
                id="teacher"
                [(ngModel)]="teacher" />
        </div>

        <div>
            <label for="studentCount">Student Count</label>
            <input
                type="text"
                id="studentCount"
                [(ngModel)]="studentCount" />
        </div>

        <div class="row">
            <div class="col-12">
                <button
                    class="btn btn-primary"
                    (click)="addNewClassroom()">
                    Add New Classroom
                </button>
            </div>
        </div>
    </div>
</main>

// classroom-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import ClassroomList from '@app/interface/classroom-list';

@Component({
    selector: 'app-classroom-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './classroom-list.component.html',
    styles: ``,
})
export class ClassroomListComponent {
    classroomList: ClassroomList[] = [];

    id: number = 0;
    name: string = '';
    teacher: string = '';
    studentCount: number = 0;

    addNewClassroom() {
        this.classroomList.push({
            id: this.id,
            name: this.name,
            teacher: this.teacher,
            studentCount: this.studentCount,
        });
        this.id = 0;
        this.name = '';
        this.teacher = '';
        this.studentCount = 0;
    }
}
// @app/interface/classroom-list
export default interface ClassroomList {
    id: number;
    name: string;
    teacher: string;
    studentCount: number;
}

Inventory List:

<!-- inventory-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Inventory List</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Quantity</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let inventory of inventoryList">
                            <td>{{ inventory.id }}</td>
                            <td>{{ inventory.name }}</td>
                            <td>{{ inventory.quantity }}</td>
                            <td>{{ inventory.price }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                [(ngModel)]="id" />
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                [(ngModel)]="name" />
        </div>

        <div>
            <label for="quantity">Quantity</label>
            <input
                type="text"
                id="quantity"
                [(ngModel)]="quantity" />
        </div>

        <div>
            <label for="price">Price</label>
            <input
                type="text"
                id="price"
                [(ngModel)]="price" />
        </div>

        <div class="row">
            <div class="col-12">
                <button
                    class="btn btn-primary"
                    (click)="addNewInventory()">
                    Add Inventory
                </button>
            </div>
        </div>
    </div>
</main>

// inventory-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import InventoryList from '@app/interface/inventory-list';

@Component({
    selector: 'app-inventory-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './inventory-list.component.html',
    styles: ``,
})
export class InventoryListComponent {
    inventoryList: InventoryList[] = [];

    id: number = 0;
    name: string = '';
    quantity: number = 0;
    price: number = 0;

    addNewInventory() {
        this.inventoryList.push({
            id: this.id,
            name: this.name,
            quantity: this.quantity,
            price: this.price,
        });
        this.id = 0;
        this.name = '';
        this.quantity = 0;
        this.price = 0;
    }
}
// @app/interface/inventory-list:
export default interface InventoryList {
    id: number;
    name: string;
    quantity: number;
    price: number;
}

Lecture List:

<!-- lecture-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Lecture List</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Duration</th>
                            <th>Instructor</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let lecture of lectureList">
                            <td>{{ lecture.id }}</td>
                            <td>{{ lecture.name }}</td>
                            <td>{{ lecture.duration }}</td>
                            <td>{{ lecture.instructor }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                [(ngModel)]="id" />
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                [(ngModel)]="name" />
        </div>

        <div>
            <label for="duration">Duration</label>
            <input
                type="text"
                id="duration"
                [(ngModel)]="duration" />
        </div>

        <div>
            <label for="instructor">Instructor</label>
            <input
                type="text"
                id="instructor"
                [(ngModel)]="instructor" />
        </div>

        <div class="row">
            <div class="col-12">
                <button
                    class="btn btn-primary"
                    (click)="addLecture()">
                    Add Lecture
                </button>
            </div>
        </div>
    </div>
</main>

// lecture-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import LectureList from '@app/interface/lecture-list';

@Component({
    selector: 'app-lecture-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './lecture-list.component.html',
    styles: ``,
})
export class LectureListComponent {
    lectureList: LectureList[] = [];

    id: number = 0;
    name: string = '';
    duration: number = 0;
    instructor: string = '';

    addLecture() {
        this.lectureList.push({
            id: this.id,
            name: this.name,
            duration: this.duration,
            instructor: this.instructor,
        });
        this.id = 0;
        this.name = '';
        this.duration = 0;
        this.instructor = '';
    }
}
// @app/interface/lecture-list:
export default interface LectureList {
    id: number;
    name: string;
    duration: number;
    instructor: string;
}

Stationery List:

<!-- stationery-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Stationery List</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Quantity</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let stationery of stationeryList">
                            <td>{{ stationery.id }}</td>
                            <td>{{ stationery.name }}</td>
                            <td>{{ stationery.quantity }}</td>
                            <td>{{ stationery.price }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                [(ngModel)]="id" />
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                [(ngModel)]="name" />
        </div>

        <div>
            <label for="quantity">Quantity</label>
            <input
                type="text"
                id="quantity"
                [(ngModel)]="quantity" />
        </div>

        <div>
            <label for="price">Price</label>
            <input
                type="text"
                id="price"
                [(ngModel)]="price" />
        </div>

        <div class="row">
            <div class="col-12">
                <button
                    class="btn btn-primary"
                    (click)="addNewStationery()">
                    Add Stationery
                </button>
            </div>
        </div>
    </div>
</main>

// stationery-list.component.html
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import StationeryList from '@app/interface/stationery-list';

@Component({
    selector: 'app-stationery-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './stationery-list.component.html',
    styles: ``,
})
export class StationeryListComponent {
    stationeryList: StationeryList[] = [];

    id: number = 0;
    name: string = '';
    quantity: number = 0;
    price: number = 0;

    addNewStationery() {
        this.stationeryList.push({
            id: this.id,
            name: this.name,
            quantity: this.quantity,
            price: this.price,
        });
        this.id = 0;
        this.name = '';
        this.quantity = 0;
        this.price = 0;
    }
}
// @app/interface/stationery-list
export default interface StationeryList {
    id: number;
    name: string;
    quantity: number;
    price: number;
}

Flower List:

<!-- flower-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Flower List</h1>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Price</th>
                            <th>Is Available</th>
                            <th>Quantity</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let flower of flowerList">
                            <td>{{ flower.id }}</td>
                            <td>{{ flower.name }}</td>
                            <td>{{ flower.description }}</td>
                            <td>{{ flower.price }}</td>
                            <td>{{ flower.isAvailable }}</td>
                            <td>{{ flower.quantity }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                name="id"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="description">Description</label>
            <input
                type="text"
                id="description"
                name="description"
                [(ngModel)]="description" />
        </div>
        <div>
            <label for="price">Price</label>
            <input
                type="text"
                id="price"
                name="price"
                [(ngModel)]="price" />
        </div>
        <div>
            <label for="isAvailable">Is Available</label>
            <input
                type="text"
                id="isAvailable"
                name="isAvailable"
                [(ngModel)]="isAvailable" />
        </div>
        <div>
            <label for="quantity">Quantity</label>
            <input
                type="text"
                id="quantity"
                name="quantity"
                [(ngModel)]="quantity" />
        </div>
        <div>
            <button (click)="addFlower()">Add Flower</button>
        </div>
    </div>
</main>

// flower-list.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgForOf } from '@angular/common';
import FlowerList from '@app/interface/flower-list';

@Component({
    selector: 'app-flower-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './flower-list.component.html',
    styles: ``,
})
export class FlowerListComponent {
    flowerList: FlowerList[] = [];

    id: number = 0;
    name: string = '';
    description: string = '';
    price: number = 0;
    isAvailable: boolean = false;
    quantity: number = 0;

    addFlower() {
        this.flowerList.push({
            id: this.id,
            name: this.name,
            description: this.description,
            price: this.price,
            isAvailable: Boolean(this.isAvailable),
            quantity: this.quantity,
        });

        this.id = 0;
        this.name = '';
        this.description = '';
        this.price = 0;
        this.isAvailable = false;
        this.quantity = 0;
    }
}
// @app/interface/flower-list
export default interface FlowerList {
    id: number;
    name: string;
    description: string;
    price: number;
    isAvailable: boolean;
    quantity: number;
}

Destination List:

<!-- destination-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Destination List</h1>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Location</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let destination of destinations">
                            <td>{{ destination.id }}</td>
                            <td>{{ destination.name }}</td>
                            <td>{{ destination.description }}</td>
                            <td>{{ destination.location }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                name="id"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="description">Description</label>
            <input
                type="text"
                id="description"
                name="description"
                [(ngModel)]="description" />
        </div>
        <div>
            <label for="location">Location</label>
            <input
                type="text"
                id="location"
                name="location"
                [(ngModel)]="location" />
        </div>
        <div>
            <button (click)="addDestination()">Add Destination</button>
        </div>
    </div>
</main>

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgForOf } from '@angular/common';
import DestinationList from '@app/interface/destination-list';

@Component({
    selector: 'app-destination-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './destination-list.component.html',
    styles: ``,
})
export class DestinationListComponent {
    destinations: DestinationList[] = [];

    id: number = 0;
    name: string = '';
    description: string = '';
    location: string = '';

    addDestination() {
        this.destinations.push({
            id: this.id,
            name: this.name,
            description: this.description,
            location: this.location,
        });

        this.id = 0;
        this.name = '';
        this.description = '';
        this.location = '';
    }
}
// @app/interface/destination-list:
export default interface DestinationList {
    id: number;
    name: string;
    description: string;
    location: string;
}

Laptop List:

<!-- laptop-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Laptop List</h1>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Model</th>
                            <th>Brand</th>
                            <th>Price</th>
                            <th>Processor</th>
                            <th>RAM</th>
                            <th>Storage</th>
                            <th>Display</th>
                            <th>Graphics</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let laptop of laptops">
                            <td>{{ laptop.model }}</td>
                            <td>{{ laptop.brand }}</td>
                            <td>{{ laptop.price }}</td>
                            <td>{{ laptop.processor }}</td>
                            <td>{{ laptop.ram }}</td>
                            <td>{{ laptop.storage }}</td>
                            <td>{{ laptop.display }}</td>
                            <td>{{ laptop.graphics }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="id">ID</label>
            <input
                type="text"
                id="id"
                [(ngModel)]="id" />
        </div>
        <div>
            <label for="model">Model</label>
            <input
                type="text"
                id="model"
                [(ngModel)]="model" />
        </div>
        <div>
            <label for="brand">Brand</label>
            <input
                type="text"
                id="brand"
                [(ngModel)]="brand" />
        </div>
        <div>
            <label for="price">Price</label>
            <input
                type="text"
                id="price"
                [(ngModel)]="price" />
        </div>
        <div>
            <label for="processor">Processor</label>
            <input
                type="text"
                id="processor"
                [(ngModel)]="processor" />
        </div>
        <div>
            <label for="ram">RAM</label>
            <input
                type="text"
                id="ram"
                [(ngModel)]="ram" />
        </div>
        <div>
            <label for="storage">Storage</label>
            <input
                type="text"
                id="storage"
                [(ngModel)]="storage" />
        </div>
        <div>
            <label for="display">Display</label>
            <input
                type="text"
                id="display"
                [(ngModel)]="display" />
        </div>
        <div>
            <label for="graphics">Graphics</label>
            <input
                type="text"
                id="graphics"
                [(ngModel)]="graphics" />
        </div>
        <div>
            <button (click)="addLaptop()">Add Laptop</button>
        </div>
    </div>
</main>

// laptop-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import LaptopList from '@app/interface/laptop-list';

@Component({
    selector: 'app-laptop-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './laptop-list.component.html',
    styles: ``,
})
export class LaptopListComponent {
    laptops: LaptopList[] = [];

    id: number = 0;
    model: string = '';
    brand: string = '';
    price: number = 0;
    processor: string = '';
    ram: string = '';
    storage: string = '';
    display: string = '';
    graphics: string = '';

    addLaptop() {
        this.laptops.push({
            id: this.id,
            model: this.model,
            brand: this.brand,
            price: this.price,
            processor: this.processor,
            ram: this.ram,
            storage: this.storage,
            display: this.display,
            graphics: this.graphics,
        });
        this.id = 0;
        this.model = '';
        this.brand = '';
        this.price = 0;
        this.processor = '';
        this.ram = '';
        this.storage = '';
        this.display = '';
        this.graphics = '';
    }
}
// @app/interface/laptop-list
export default interface LaptopList {
    id: number;
    model: string;
    brand: string;
    price: number;
    processor: string;
    ram: string;
    storage: string;
    display: string;
    graphics: string;
}

Laptop Specifications List:

<!-- laptop-specification-list.component.html -->
<main>
    <h1>Laptop Specification List</h1>
    <table>
        <thead>
            <tr>
                <th>Model</th>
                <th>Processor</th>
                <th>RAM</th>
                <th>Storage</th>
                <th>Display</th>
                <th>Graphics</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let laptop of laptops">
                <td>{{ laptop.model }}</td>
                <td>{{ laptop.specs.processor }}</td>
                <td>{{ laptop.specs.ram }}</td>
                <td>{{ laptop.specs.storage }}</td>
                <td>{{ laptop.specs.display }}</td>
                <td>{{ laptop.specs.graphics }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="model">Model:</label>
        <input
            type="text"
            id="model"
            [(ngModel)]="model" />
    </div>
    <div>
        <label for="processor">Processor:</label>
        <input
            type="text"
            id="processor"
            [(ngModel)]="processor" />
    </div>
    <div>
        <label for="ram">RAM:</label>
        <input
            type="text"
            id="ram"
            [(ngModel)]="ram" />
    </div>
    <div>
        <label for="storage">Storage:</label>
        <input
            type="text"
            id="storage"
            [(ngModel)]="storage" />
    </div>
    <div>
        <label for="display">Display:</label>
        <input
            type="text"
            id="display"
            [(ngModel)]="display" />
    </div>
    <div>
        <label for="graphics">Graphics:</label>
        <input
            type="text"
            id="graphics"
            [(ngModel)]="graphics" />
    </div>
    <button (click)="addLaptop()">Add Laptop</button>
</main>

// laptop-specification-list.component.ts
import { Component } from '@angular/core';
import { NgFor } from '@angular/common';
import { FormsModule } from '@angular/forms';
import LaptopSpecs from '@app/interface/laptop-specs-list';

@Component({
    selector: 'app-laptop-specification-list',
    standalone: true,
    imports: [NgFor, FormsModule],
    templateUrl: './laptop-specification-list.component.html',
    styles: ``,
})
export class LaptopSpecificationListComponent {
    laptops: LaptopSpecs[] = [];

    model: string = '';
    processor: string = '';
    ram: string = '';
    storage: string = '';
    display: string = '';
    graphics: string = '';

    addLaptop() {
        this.laptops.push({
            model: this.model,
            specs: {
                processor: this.processor,
                ram: this.ram,
                storage: this.storage,
                display: this.display,
                graphics: this.graphics,
            },
        });
        this.model = '';
        this.processor = '';
        this.ram = '';
        this.storage = '';
        this.display = '';
        this.graphics = '';
    }
}
// @app/interface/laptop-specs-list
export default interface LaptopSpecs {
    model: string;
    specs: {
        processor: string;
        ram: string;
        storage: string;
        display: string;
        graphics: string;
    };
}

Computer Hardware List:

<!-- computer-hardware-list.component.html -->
<main>
    <h1>Computer Hardware List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Type</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let hardware of computerHardware">
                <td>{{ hardware.name }}</td>
                <td>{{ hardware.location }}</td>
                <td>{{ hardware.type }}</td>
                <td>{{ hardware.price }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name" />
    </div>

    <div>
        <label for="location">Location</label>
        <input
            type="text"
            id="location"
            [(ngModel)]="location" />
    </div>

    <div>
        <label for="type">Type</label>
        <input
            type="text"
            id="type"
            [(ngModel)]="type" />
    </div>

    <div>
        <label for="price">Price</label>
        <input
            type="number"
            id="price"
            [(ngModel)]="price" />
    </div>

    <div>
        <button (click)="addComputerHardware()">Add Computer Hardware</button>
    </div>
</main>

// computer-hardware-list.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import ComputerHardware from '@app/interface/computer-hardware-list';
import { NgForOf } from '@angular/common';

@Component({
    selector: 'app-computer-hardware-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './computer-hardware-list.component.html',
    styles: ``,
})
export class ComputerHardwareListComponent {
    computerHardware: ComputerHardware[] = [];

    name: string = '';
    location: string = '';
    type: string = '';
    price: number = 0;

    addComputerHardware() {
        this.computerHardware.push({
            name: this.name,
            location: this.location,
            type: this.type,
            price: this.price,
        });

        this.name = '';
        this.location = '';
        this.type = '';
        this.price = 0;
    }
}
// @app/interface/computer-hardware-list
export default interface ComputerHardware {
    name: string;
    location: string;
    type: string;
    price: number;
}

Mobile App List:

<!-- mobile-app-list.component.html -->
<main>
    <h1>Mobile App List</h1>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Rating</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let mobileApp of mobileApps">
                <td>
                    {{ mobileApp.name }}
                </td>
                <td>
                    {{ mobileApp.description }}
                </td>
                <td>
                    {{ mobileApp.price }}
                </td>
                <td>
                    {{ mobileApp.rating }}
                </td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="name">Name:</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name" />
    </div>

    <div>
        <label for="description">Description:</label>
        <input
            type="text"
            id="description"
            [(ngModel)]="description" />
    </div>

    <div>
        <label for="price">Price:</label>
        <input
            type="number"
            id="price"
            [(ngModel)]="price" />
    </div>

    <div>
        <label for="rating">Rating:</label>
        <input
            type="number"
            id="rating"
            [(ngModel)]="rating" />
    </div>

    <div>
        <button (click)="addMobileApp()">Add Mobile App</button>
    </div>
</main>

// mobile-app-list.component.ts
import { Component } from '@angular/core';
import MobileAppList from '@app/interface/mobile-app-list';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-mobile-app-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './mobile-app-list.component.html',
    styles: ``,
})
export class MobileAppListComponent {
    mobileApps: MobileAppList[] = [];

    name: string = '';
    description: string = '';
    price: number = 0;
    rating: number = 0;

    addMobileApp() {
        this.mobileApps.push({
            name: this.name,
            description: this.description,
            price: this.price,
            rating: this.rating,
        });

        this.name = '';
        this.description = '';
        this.price = 0;
        this.rating = 0;
    }
}
// @app/interface/mobile-app-list
export default interface MobileAppList {
    name: string;
    description: string;
    price: number;
    rating: number;
}

Video List:

<!-- video-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Video List</h1>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>URL</th>
                            <th>Rating</th>
                            <th>Category</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let video of videoList">
                            <td>{{ video.name }}</td>
                            <td>{{ video.description }}</td>
                            <td>{{ video.url }}</td>
                            <td>{{ video.rating }}</td>
                            <td>{{ video.category }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="description">Description</label>
            <input
                type="text"
                id="description"
                name="description"
                [(ngModel)]="description" />
        </div>
        <div>
            <label for="url">URL</label>
            <input
                type="text"
                id="url"
                name="url"
                [(ngModel)]="url" />
        </div>
        <div>
            <label for="rating">Rating</label>
            <input
                type="number"
                id="rating"
                name="rating"
                [(ngModel)]="rating" />
        </div>
        <div>
            <label for="category">Category</label>
            <input
                type="text"
                id="category"
                name="category"
                [(ngModel)]="category" />
        </div>
        <button (click)="addVideo()">Add Video</button>
    </div>
</main>

// video-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import VideoList from '@app/interface/video-list';

@Component({
    selector: 'app-video-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './video-list.component.html',
    styles: ``,
})
export class VideoListComponent {
    videoList: VideoList[] = [];
    name: string = '';
    description: string = '';
    url: string = '';
    rating: number = 0;
    category: string = '';

    addVideo() {
        this.videoList.push({
            name: this.name,
            description: this.description,
            url: this.url,
            rating: this.rating,
            category: this.category,
        });
        this.name = '';
        this.description = '';
        this.url = '';
        this.rating = 0;
        this.category = '';
    }
}
// @app/interface/video-lis
export default interface VideoList {
    name: string;
    description: string;
    url: string;
    rating: number;
    category: string;
}

TV Show List:

<!-- tv-show-list.component.html -->
<main>
    <div class="container">
        <h1>TV Show List</h1>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>URL</th>
                    <th>Rating</th>
                    <th>Category</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let tvShow of tvShowList">
                    <td>{{ tvShow.name }}</td>
                    <td>{{ tvShow.description }}</td>
                    <td>{{ tvShow.url }}</td>
                    <td>{{ tvShow.rating }}</td>
                    <td>{{ tvShow.category }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            name="name"
            [(ngModel)]="name" />
    </div>
    <div>
        <label for="description">Description</label>
        <input
            type="text"
            id="description"
            name="description"
            [(ngModel)]="description" />
    </div>
    <div>
        <label for="url">URL</label>
        <input
            type="text"
            id="url"
            name="url"
            [(ngModel)]="url" />
    </div>
    <div>
        <label for="rating">Rating</label>
        <input
            type="number"
            id="rating"
            name="rating"
            [(ngModel)]="rating" />
    </div>
    <div>
        <label for="category">Category</label>
        <input
            type="text"
            id="category"
            name="category"
            [(ngModel)]="category" />
    </div>
    <button (click)="addTvShow()">Add TV Show</button>
</main>

// tv-show-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import TvShowList from '@app/interface/tv-show-list';

@Component({
    selector: 'app-tv-show-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './tv-show-list.component.html',
    styles: ``,
})
export class TvShowListComponent {
    tvShowList: TvShowList[] = [];
    name: string = '';
    description: string = '';
    url: string = '';
    rating: number = 0;
    category: string = '';

    addTvShow() {
        this.tvShowList.push({
            name: this.name,
            description: this.description,
            url: this.url,
            rating: this.rating,
            category: this.category,
        });
        this.name = '';
        this.description = '';
        this.url = '';
        this.rating = 0;
        this.category = '';
    }
}
// @app/interface/tv-show-list:
export default interface TvShowList {
    name: string;
    description: string;
    url: string;
    rating: number;
    category: string;
}

Furniture List:

<!-- furniture-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Furniture List</h1>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Type</th>
                            <th>Price</th>
                            <th>Category</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let furniture of furnitureList">
                            <td>{{ furniture.name }}</td>
                            <td>{{ furniture.description }}</td>
                            <td>{{ furniture.type }}</td>
                            <td>{{ furniture.price }}</td>
                            <td>{{ furniture.category }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="description">Description</label>
            <input
                type="text"
                id="description"
                name="description"
                [(ngModel)]="description" />
        </div>
        <div>
            <label for="type">Type</label>
            <input
                type="text"
                id="type"
                name="type"
                [(ngModel)]="type" />
        </div>
        <div>
            <label for="price">Price</label>
            <input
                type="number"
                id="price"
                name="price"
                [(ngModel)]="price" />
        </div>
        <div>
            <label for="category">Category</label>
            <input
                type="text"
                id="category"
                name="category"
                [(ngModel)]="category" />
        </div>
        <div>
            <button (click)="addFurniture()">Add Furniture</button>
        </div>
    </div>
</main>

// furniture-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import FurnitureList from '@app/interface/furniture-list';

@Component({
    selector: 'app-furniture-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './furniture-list.component.html',
    styles: ``,
})
export class FurnitureListComponent {
    furnitureList: FurnitureList[] = [];

    name: string = '';
    description: string = '';
    type: string = '';
    price: number = 0;
    category: string = '';

    addFurniture() {
        this.furnitureList.push({
            name: this.name,
            description: this.description,
            type: this.type,
            price: this.price,
            category: this.category,
        });
        this.name = '';
        this.description = '';
        this.type = '';
        this.price = 0;
        this.category = '';
    }
} 
// @app/interface/furniture-list
export default interface FurnitureList {
    name: string;
    description: string;
    type: string;
    price: number;
    category: string;
}

Accessory List:

<!-- accessory-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Accessory List</h1>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Type</th>
                            <th>Price</th>
                            <th>Category</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let accessory of accessoryList">
                            <td>{{ accessory.name }}</td>
                            <td>{{ accessory.description }}</td>
                            <td>{{ accessory.type }}</td>
                            <td>{{ accessory.price }}</td>
                            <td>{{ accessory.category }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>

        <div>
            <label for="description">Description</label>
            <input
                type="text"
                id="description"
                name="description"
                [(ngModel)]="description" />
        </div>

        <div>
            <label for="type">Type</label>
            <input
                type="text"
                id="type"
                name="type"
                [(ngModel)]="type" />
        </div>

        <div>
            <label for="price">Price</label>
            <input
                type="number"
                id="price"
                name="price"
                [(ngModel)]="price" />
        </div>

        <div>
            <label for="category">Category</label>
            <input
                type="text"
                id="category"
                name="category"
                [(ngModel)]="category" />
        </div>

        <button (click)="addAccessory()">Add Accessory</button>
    </div>
</main>

// accessory-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import AccessoryList from '@app/interface/accessory-list';

@Component({
    selector: 'app-accessory-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './accessory-list.component.html',
    styles: ``,
})
export class AccessoryListComponent {
    accessoryList: AccessoryList[] = [];

    name: string = '';
    description: string = '';
    type: string = '';
    price: number = 0;
    category: string = '';

    addAccessory() {
        this.accessoryList.push({
            name: this.name,
            description: this.description,
            type: this.type,
            price: this.price,
            category: this.category,
        });

        this.name = '';
        this.description = '';
        this.type = '';
        this.price = 0;
        this.category = '';
    }
}
// @app/interface/accessory-list:
export default interface AccessoryList {
    name: string;
    description: string;
    type: string;
    price: number;
    category: string;
}

Building List:

<!-- building-list.component.html -->
<!-- export default interface BuildingList {
    name: string;
    address: string;
    floors: number;
    rooms: number;
    occupants: number;
} -->
<main>
    <div>
        <h1>Building List</h1>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Floors</th>
                        <th>Rooms</th>
                        <th>Occupants</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let building of buildingList">
                        <td>{{ building.name }}</td>
                        <td>{{ building.address }}</td>
                        <td>{{ building.floors }}</td>
                        <td>{{ building.rooms }}</td>
                        <td>{{ building.occupants }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                name="name"
                [(ngModel)]="name" />
        </div>
        <div>
            <label for="address">Address</label>
            <input
                type="text"
                id="address"
                name="address"
                [(ngModel)]="address" />
        </div>
        <div>
            <label for="floors">Floors</label>
            <input
                type="number"
                id="floors"
                name="floors"
                [(ngModel)]="floors" />
        </div>
        <div>
            <label for="rooms">Rooms</label>
            <input
                type="number"
                id="rooms"
                name="rooms"
                [(ngModel)]="rooms" />
        </div>
        <div>
            <label for="occupants">Occupants</label>
            <input
                type="number"
                id="occupants"
                name="occupants"
                [(ngModel)]="occupants" />
        </div>
        <button (click)="addBuilding()">Add Building</button>
    </div>
</main>

// building-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import BuildingList from '@app/interface/building-list';

@Component({
    selector: 'app-building-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './building-list.component.html',
    styles: ``,
})
export class BuildingListComponent {
    buildingList: BuildingList[] = [];

    name: string = '';
    address: string = '';
    floors: number = 0;
    rooms: number = 0;
    occupants: number = 0;

    addBuilding() {
        this.buildingList.push({
            name: this.name,
            address: this.address,
            floors: this.floors,
            rooms: this.rooms,
            occupants: this.occupants,
        });

        this.name = '';
        this.address = '';
        this.floors = 0;
        this.rooms = 0;
        this.occupants = 0;
    }
}
// @app/interface/building-list
export default interface BuildingList {
    name: string;
    address: string;
    floors: number;
    rooms: number;
    occupants: number;
}

Painting List:

<!-- painting-list.component.html -->
<main>
    <h1>Painting List</h1>
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Artist</th>
                <th>Year</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let painting of paintingList">
                <td>{{ painting.title }}</td>
                <td>{{ painting.artist }}</td>
                <td>{{ painting.year }}</td>
                <td>{{ painting.price }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <div>
            <label for="title">Title:</label>
            <input
                type="text"
                id="title"
                [(ngModel)]="title" />
        </div>
        <div>
            <label for="artist">Artist:</label>
            <input
                type="text"
                id="artist"
                [(ngModel)]="artist" />
        </div>
        <div>
            <label for="year">Year:</label>
            <input
                type="number"
                id="year"
                [(ngModel)]="year" />
        </div>
        <div>
            <label for="price">Price:</label>
            <input
                type="number"
                id="price"
                [(ngModel)]="price" />
        </div>
        <button (click)="addPainting()">Add Painting</button>
    </div>
</main>

// painting-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import PaintingList from '@app/interface/painting-list';

@Component({
    selector: 'app-painting-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './painting-list.component.html',
    styles: ``,
})
export class PaintingListComponent {
    paintingList: PaintingList[] = [];

    title: string = '';
    artist: string = '';
    year: number = 0;
    price: number = 0;

    addPainting() {
        this.paintingList.push({
            title: this.title,
            artist: this.artist,
            year: this.year,
            price: this.price,
        });
        this.title = '';
        this.artist = '';
        this.year = 0;
        this.price = 0;
    }
}
// @app/interface/painting-list:
export default interface PaintingList {
    title: string;
    artist: string;
    year: number;
    price: number;
}

Artist List:

<!-- artist-list.component.html -->
<main>
    <h1>Artist List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Field</th>
                <th>Genre</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let artist of artistList">
                <td>{{ artist.name }}</td>
                <td>{{ artist.field }}</td>
                <td>{{ artist.genre }}</td>
                <td>{{ artist.country }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name" />
    </div>

    <div>
        <label for="field">Field</label>
        <input
            type="text"
            id="field"
            [(ngModel)]="field" />
    </div>

    <div>
        <label for="genre">Genre</label>
        <input
            type="text"
            id="genre"
            [(ngModel)]="genre" />
    </div>

    <div>
        <label for="country">Country</label>
        <input
            type="text"
            id="country"
            [(ngModel)]="country" />
    </div>

    <div>
        <button (click)="addArtist()">Add Artist</button>
    </div>
</main>

// artist-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import ArtistList from '@app/interface/artist-list';

@Component({
    selector: 'app-artist-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './artist-list.component.html',
    styles: ``,
})
export class ArtistListComponent {
    artistList: ArtistList[] = [];

    name: string = '';
    field: string = '';
    genre: string = '';
    country: string = '';

    addArtist() {
        this.artistList.push({
            name: this.name,
            field: this.field,
            genre: this.genre,
            country: this.country,
        });
        this.name = '';
        this.field = '';
        this.genre = '';
        this.country = '';
    }
}
// @app/interface/artist-list
export default interface ArtistList {
    name: string;
    field: string;
    genre: string;
    country: string;
}

Composer List:

<!-- composer-list.component.html -->
<main>
    <h1>Composer List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Popular Music</th>
                <th>Genre</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let composer of composers">
                <td>{{ composer.name }}</td>
                <td>{{ composer.popularMusic }}</td>
                <td>{{ composer.genre }}</td>
                <td>{{ composer.country }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name" />
    </div>

    <div>
        <label for="popularMusic">Popular Music</label>
        <input
            type="text"
            id="popularMusic"
            [(ngModel)]="popularMusic" />
    </div>

    <div>
        <label for="genre">Genre</label>
        <input
            type="text"
            id="genre"
            [(ngModel)]="genre" />
    </div>

    <div>
        <label for="country">Country</label>
        <input
            type="text"
            id="country"
            [(ngModel)]="country" />
    </div>

    <div>
        <button (click)="addComposer()">Add Composer</button>
    </div>
</main>

// composer-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import ComposerList from '@app/interface/composer-list';
@Component({
    selector: 'app-composer-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './composer-list.component.html',
    styles: ``,
})
export class ComposerListComponent {
    composers: ComposerList[] = [];

    name: string = '';
    popularMusic: string = '';
    genre: string = '';
    country: string = '';

    addComposer() {
        this.composers.push({
            name: this.name,
            popularMusic: this.popularMusic,
            genre: this.genre,
            country: this.country,
        });

        this.name = '';
        this.popularMusic = '';
        this.genre = '';
        this.country = '';
    }
}
// @app/interface/composer-list
export default interface ComposerList {
    name: string;
    popularMusic: string;
    genre: string;
    country: string;
}

Podcast List:

<!-- podcast-list.component.html -->
<main>
    <h1>Podcast List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Host</th>
                <th>Genre</th>
                <th>Episode Number</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let podcast of podcasts">
                <td>{{ podcast.name }}</td>
                <td>{{ podcast.host }}</td>
                <td>{{ podcast.genre }}</td>
                <td>{{ podcast.episodeNumber }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name" />
    </div>
    <div>
        <label for="host">Host</label>
        <input
            type="text"
            id="host"
            [(ngModel)]="host" />
    </div>

    <div>
        <label for="genre">Genre</label>
        <input
            type="text"
            id="genre"
            [(ngModel)]="genre" />
    </div>

    <div>
        <label for="episodeNumber">Episode Number</label>
        <input
            type="number"
            id="episodeNumber"
            [(ngModel)]="episodeNumber" />
    </div>
    <div>
        <button (click)="addPodcast()">Add Podcast</button>
    </div>
</main>

// podcast-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import PodcastList from '@app/interface/podcast-list';

@Component({
    selector: 'app-podcast-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './podcast-list.component.html',
    styles: ``,
})
export class PodcastListComponent {
    podcasts: PodcastList[] = [];

    name: string = '';
    host: string = '';
    genre: string = '';
    episodeNumber: number = 0;

    addPodcast() {
        this.podcasts.push({
            name: this.name,
            host: this.host,
            genre: this.genre,
            episodeNumber: this.episodeNumber,
        });

        this.name = '';
        this.host = '';
        this.genre = '';
        this.episodeNumber = 0;
    }
}
// @app/interface/podcast-list
export default interface PodcastList {
    name: string;
    host: string;
    genre: string;
    episodeNumber: number;
}

Exercise List:

<!-- exercise-list.component.html -->
<main>
    <h1>Exercise List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Sets</th>
                <th>Reps</th>
                <th>Weight</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let exercise of exercises">
                <td>{{ exercise.name }}</td>
                <td>{{ exercise.sets }}</td>
                <td>{{ exercise.reps }}</td>
                <td>{{ exercise.weight }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name" />
    </div>
    <div>
        <label for="sets">Sets</label>
        <input
            type="number"
            id="sets"
            [(ngModel)]="sets" />
    </div>
    <div>
        <label for="reps">Reps</label>
        <input
            type="number"
            id="reps"
            [(ngModel)]="reps" />
    </div>
    <div>
        <label for="weight">Weight</label>
        <input
            type="number"
            id="weight"
            [(ngModel)]="weight" />
    </div>
    <div>
        <button (click)="addExercise()">Add Exercise</button>
    </div>
</main>

// exercise-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import ExerciseList from '@app/interface/exercise-list';

@Component({
    selector: 'app-exercise-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './exercise-list.component.html',
    styles: ``,
})
export class ExerciseListComponent {
    exercises: ExerciseList[] = [];
    name: string = '';
    sets: number = 0;
    reps: number = 0;
    weight: number = 0;

    addExercise() {
        this.exercises.push({
            name: this.name,
            sets: this.sets,
            reps: this.reps,
            weight: this.weight,
        });

        this.name = '';
        this.sets = 0;
        this.reps = 0;
        this.weight = 0;
    }
}
// @app/interface/exercise-list
export default interface ExerciseList {
    name: string;
    sets: number;
    reps: number;
    weight: number;
}

Meal Plan List:

<!-- meal-plan-list.component.html -->
<main>
    <h1>Meal Plan List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Breakfast</th>
                <th>Lunch</th>
                <th>Dinner</th>
                <th>Snack</th>
                <th>Drink</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let meal of meals">
                <td>{{ meal.name }}</td>
                <td>{{ meal.breakfast }}</td>
                <td>{{ meal.lunch }}</td>
                <td>{{ meal.dinner }}</td>
                <td>{{ meal.snack }}</td>
                <td>{{ meal.drink }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            [(ngModel)]="name" />
    </div>
    <div>
        <label for="breakfast">Breakfast</label>
        <input
            type="text"
            id="breakfast"
            [(ngModel)]="breakfast" />
    </div>
    <div>
        <label for="lunch">Lunch</label>
        <input
            type="text"
            id="lunch"
            [(ngModel)]="lunch" />
    </div>
    <div>
        <label for="dinner">Dinner</label>
        <input
            type="text"
            id="dinner"
            [(ngModel)]="dinner" />
    </div>
    <div>
        <label for="snack">Snack</label>
        <input
            type="text"
            id="snack"
            [(ngModel)]="snack" />
    </div>
    <div>
        <label for="drink">Drink</label>
        <input
            type="text"
            id="drink"
            [(ngModel)]="drink" />
    </div>
    <div>
        <button (click)="addMealPlan()">Add Meal Plan</button>
    </div>
</main>

// meal-plan-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import MealPlanList from '@app/interface/meal-plan-list';

@Component({
    selector: 'app-meal-plan-list',
    standalone: true,
    imports: [NgForOf, FormsModule],
    templateUrl: './meal-plan-list.component.html',
    styles: ``,
})
export class MealPlanListComponent {
    meals: MealPlanList[] = [];

    name: string = '';
    breakfast: string = '';
    lunch: string = '';
    dinner: string = '';
    snack: string = '';
    drink: string = '';

    addMealPlan() {
        this.meals.push({
            name: this.name,
            breakfast: this.breakfast,
            lunch: this.lunch,
            dinner: this.dinner,
            snack: this.snack,
            drink: this.drink,
        });

        this.name = '';
        this.breakfast = '';
        this.lunch = '';
        this.dinner = '';
        this.snack = '';
        this.drink = '';
    }
}
// @app/interface/meal-plan-list
export default interface MealPlanList {
    name: string;
    breakfast: string;
    lunch: string;
    dinner: string;
    snack: string;
    drink: string;
}

Budget List:

<!-- budget-list.component.html -->
<main>
    <h1>Budget List</h1>
    <table>
        <thead>
            <tr>
                <th>Project</th>
                <th>Budget</th>
                <th>Status</th>
                <th>Start Date</th>
                <th>End Date</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let budget of budgets">
                <td>{{ budget.project }}</td>
                <td>{{ budget.budget }}</td>
                <td>{{ budget.status }}</td>
                <td>{{ budget.startDate }}</td>
                <td>{{ budget.endDate }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="project">Project:</label>
        <input
            type="text"
            id="project"
            name="project"
            [(ngModel)]="project" />
    </div>
    <div>
        <label for="budget">Budget:</label>
        <input
            type="number"
            id="budget"
            name="budget"
            [(ngModel)]="budget" />
    </div>
    <div>
        <label for="status">Status:</label>
        <input
            type="text"
            id="status"
            name="status"
            [(ngModel)]="status" />
    </div>
    <div>
        <label for="startDate">Start Date:</label>
        <input
            type="date"
            id="startDate"
            name="startDate"
            [(ngModel)]="startDate" />
    </div>
    <div>
        <label for="endDate">End Date:</label>
        <input
            type="date"
            id="endDate"
            name="endDate"
            [(ngModel)]="endDate" />
    </div>
    <button (click)="addBudget()">Add Budget</button>
</main>

//
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import BudgetList from '@app/interface/budget-list';

@Component({
    selector: 'app-budget-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './budget-list.component.html',
    styles: ``,
})
export class BudgetListComponent {
    budgets: BudgetList[] = [];

    project: string = '';
    budget: number = 0;
    status: string = '';
    startDate: string = '';
    endDate: string = '';

    addBudget() {
        this.budgets.push({
            project: this.project,
            budget: this.budget,
            status: this.status,
            startDate: this.startDate,
            endDate: this.endDate,
        });

        this.project = '';
        this.budget = 0;
        this.status = '';
        this.startDate = '';
        this.endDate = '';
    }
}
// @app/interface/budget-list:
export default interface BudgetList {
    project: string;
    budget: number;
    status: string;
    startDate: string;
    endDate: string;
}

Presentation List:

<!-- presentation-list.component.html -->
<main>
    <h1>Presentation List</h1>
    <table>
        <thead>
            <tr>
                <th>Topic</th>
                <th>Presenter</th>
                <th>Date</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let presentation of presentations">
                <td>{{ presentation.topic }}</td>
                <td>{{ presentation.presenter }}</td>
                <td>{{ presentation.date }}</td>
                <td>{{ presentation.time }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <label for="topic">Topic:</label>
        <input
            type="text"
            id="topic"
            name="topic"
            [(ngModel)]="topic" />
    </div>
    <div>
        <label for="presenter">Presenter:</label>
        <input
            type="text"
            id="presenter"
            name="presenter"
            [(ngModel)]="presenter" />
    </div>
    <div>
        <label for="date">Date:</label>
        <input
            type="date"
            id="date"
            name="date"
            [(ngModel)]="date" />
    </div>
    <div>
        <label for="time">Time:</label>
        <input
            type="time"
            id="time"
            name="time"
            [(ngModel)]="time" />
    </div>
    <div>
        <button (click)="addPresentation()">Add Presentation</button>
    </div>
</main>

// presentation-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import PresentationList from '@app/interface/presentation-list';

@Component({
    selector: 'app-presentation-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './presentation-list.component.html',
    styles: ``,
})
export class PresentationListComponent {
    presentations: PresentationList[] = [];

    topic: string = '';
    presenter: string = '';
    date: string = '';
    time: string = '';

    addPresentation() {
        this.presentations.push({
            topic: this.topic,
            presenter: this.presenter,
            date: this.date,
            time: this.time,
        });

        this.topic = '';
        this.presenter = '';
        this.date = '';
        this.time = '';
    }
}
// @app/interface/presentation-list
export default interface PresentationList {
topic: string;
presenter: string;
date: string;
time: string;
}

Tour List:

<!-- tour-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center">Tour List</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Date</th>
                            <th scope="col">Name</th>
                            <th scope="col">Location</th>
                            <th scope="col">Price</th>
                            <th scope="col">Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let tour of tours">
                            <td>{{ tour.tourDate }}</td>
                            <td>{{ tour.tourName }}</td>
                            <td>{{ tour.tourLocation }}</td>
                            <td>{{ tour.tourPrice }}</td>
                            <td>{{ tour.tourDuration }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="date">Date</label>
            <input
                type="date"
                id="date"
                [(ngModel)]="tourDate" />
        </div>
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                [(ngModel)]="tourName" />
        </div>
        <div>
            <label for="location">Location</label>
            <input
                type="text"
                id="location"
                [(ngModel)]="tourLocation" />
        </div>
        <div>
            <label for="price">Price</label>
            <input
                type="text"
                id="price"
                [(ngModel)]="tourPrice" />
        </div>
        <div>
            <label for="duration">Duration</label>
            <input
                type="text"
                id="duration"
                [(ngModel)]="tourDuration" />
        </div>
        <div>
            <button
                class="btn btn-primary"
                (click)="addTour()">
                Add Tour
            </button>
        </div>
    </div>
</main>

// tour-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import TourList from '@app/interface/tour-list';

@Component({
    selector: 'app-tour-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './tour-list.component.html',
    styles: ``,
})
export class TourListComponent {
    tours: TourList[] = [];

    tourDate: string = '';
    tourName: string = '';
    tourLocation: string = '';
    tourPrice: number = 0;
    tourDuration: string = '';

    addTour() {
        this.tours.push({
            tourDate: this.tourDate,
            tourName: this.tourName,
            tourLocation: this.tourLocation,
            tourPrice: this.tourPrice,
            tourDuration: this.tourDuration,
        });

        this.tourDate = '';
        this.tourName = '';
        this.tourLocation = '';
        this.tourPrice = 0;
        this.tourDuration = '';
    }
}
// @app/interface/tour-list:
export default interface TourList {
    tourDate: string;
    tourName: string;
    tourLocation: string;
    tourPrice: number;
    tourDuration: string;
}

Event List:

<!-- event-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Event List</h1>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Event Date</th>
                            <th>Event Name</th>
                            <th>Event Location</th>
                            <th>Event Price</th>
                            <th>Event Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let event of events">
                            <td>{{ event.eventDate }}</td>
                            <td>{{ event.eventName }}</td>
                            <td>{{ event.eventLocation }}</td>
                            <td>{{ event.eventPrice }}</td>
                            <td>{{ event.eventDuration }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="date">Date</label>
            <input
                type="date"
                id="date"
                class="form-control"
                [(ngModel)]="eventDate" />
        </div>
        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                class="form-control"
                [(ngModel)]="eventName" />
        </div>
        <div>
            <label for="location">Location</label>
            <input
                type="text"
                id="location"
                class="form-control"
                [(ngModel)]="eventLocation" />
        </div>
        <div>
            <label for="price">Price</label>
            <input
                type="number"
                id="price"
                class="form-control"
                [(ngModel)]="eventPrice" />
        </div>
        <div>
            <label for="duration">Duration</label>
            <input
                type="text"
                id="duration"
                class="form-control"
                [(ngModel)]="eventDuration" />
        </div>
        <div>
            <button
                class="btn btn-primary"
                (click)="addEvent()">
                Add Event
            </button>
        </div>
    </div>
</main>

// event-list.component.ts
import { Component } from '@angular/core';
import { NgForOf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import EventList from '@app/interface/event-list';

@Component({
    selector: 'app-event-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './event-list.component.html',
    styles: ``,
})
export class EventListComponent {
    events: EventList[] = [];

    eventDate: string = '';
    eventName: string = '';
    eventLocation: string = '';
    eventPrice: number = 0;
    eventDuration: string = '';

    addEvent() {
        this.events.push({
            eventDate: this.eventDate,
            eventName: this.eventName,
            eventLocation: this.eventLocation,
            eventPrice: this.eventPrice,
            eventDuration: this.eventDuration,
        });

        this.eventDate = '';
        this.eventName = '';
        this.eventLocation = '';
        this.eventPrice = 0;
        this.eventDuration = '';
    }
}
// @app/interface/event-list:
export default interface EventList {
    eventDate: string;
    eventName: string;
    eventLocation: string;
    eventPrice: number;
    eventDuration: string;
}

Developer Tools List:

<!-- developer-tools-list.component.html -->
<main>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Developer Tools</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Tool Name</th>
                            <th>Tool Description</th>
                            <th>Tool Price</th>
                            <th>Tool Duration</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let tool of developerTools">
                            <td>{{ tool.toolName }}</td>
                            <td>{{ tool.toolDescription }}</td>
                            <td>{{ tool.toolPrice }}</td>
                            <td>{{ tool.toolDuration }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <label for="name">Name</label>
            <input
                type="text"
                id="name"
                class="form-control"
                [(ngModel)]="toolName" />
        </div>
        <div>
            <label for="description">Description</label>
            <input
                type="text"
                id="description"
                class="form-control"
                [(ngModel)]="toolDescription" />
        </div>
        <div>
            <label for="price">Price</label>
            <input
                type="number"
                id="price"
                class="form-control"
                [(ngModel)]="toolPrice" />
        </div>
        <div>
            <label for="duration">Duration</label>
            <input
                type="text"
                id="duration"
                class="form-control"
                [(ngModel)]="toolDuration" />
        </div>
        <div>
            <button
                class="btn btn-primary"
                (click)="addDeveloperTool()">
                Add Tool
            </button>
        </div>
    </div>
</main>

// developer-tools-list.component.ts
import { NgForOf } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import DeveloperToolsList from '@app/interface/developer-tools-list';

@Component({
    selector: 'app-developer-tools-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './developer-tools-list.component.html',
    styles: ``,
})
export class DeveloperToolsListComponent {
    developerTools: DeveloperToolsList[] = [];

    toolName: string = '';
    toolDescription: string = '';
    toolPrice: number = 0;
    toolDuration: string = '';

    addDeveloperTool() {
        this.developerTools.push({
            toolName: this.toolName,
            toolDescription: this.toolDescription,
            toolPrice: this.toolPrice,
            toolDuration: this.toolDuration,
        });

        this.toolName = '';
        this.toolDescription = '';
        this.toolPrice = 0;
        this.toolDuration = '';
    }
}
// @app/interface/developer-tools-list
export default interface DeveloperToolsList {
    toolName: string;
    toolDescription: string;
    toolPrice: number;
    toolDuration: string;
}

Framework List:

<!-- framework-list.component.html -->
<main>
    <h1>Framework List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Developed By</th>
                <th>First Release</th>
                <th>Latest Release</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let framework of frameworks">
                <td>{{ framework.name }}</td>
                <td>{{ framework.description }}</td>
                <td>{{ framework.developedBy }}</td>
                <td>{{ framework.firstRelease }}</td>
                <td>{{ framework.latestRelease }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="name">Name</label>
        <input
            type="text"
            id="name"
            name="name"
            [(ngModel)]="name" />
    </div>
    <div>
        <label for="description">Description</label>
        <input
            type="text"
            id="description"
            name="description"
            [(ngModel)]="description" />
    </div>
    <div>
        <label for="developedBy">Developed By</label>
        <input
            type="text"
            id="developedBy"
            name="developedBy"
            [(ngModel)]="developedBy" />
    </div>
    <div>
        <label for="firstRelease">First Release</label>
        <input
            type="text"
            id="firstRelease"
            name="firstRelease"
            [(ngModel)]="firstRelease" />
    </div>
    <div>
        <label for="latestRelease">Latest Release</label>
        <input
            type="text"
            id="latestRelease"
            name="latestRelease"
            [(ngModel)]="latestRelease" />
    </div>
    <button (click)="addFramework()">Add Framework</button>
</main>

// framework-list.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgForOf } from '@angular/common';
import FrameworkList from '@app/interface/framework-list';

@Component({
    selector: 'app-framework-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './framework-list.component.html',
    styles: ``,
})
export class FrameworkListComponent {
    frameworks: FrameworkList[] = [];

    name: string = '';
    description: string = '';
    developedBy: string = '';
    firstRelease: string = '';
    latestRelease: string = '';

    addFramework() {
        this.frameworks.push({
            name: this.name,
            description: this.description,
            developedBy: this.developedBy,
            firstRelease: this.firstRelease,
            latestRelease: this.latestRelease,
        });

        this.name = '';
        this.description = '';
        this.developedBy = '';
        this.firstRelease = '';
        this.latestRelease = '';
    }
}
// @app/interface/framework-list:
export default interface FrameworkList {
    name: string;
    description: string;
    developedBy: string;
    firstRelease: string;
    latestRelease: string;
}

Library List:

<!-- library-list.component.html -->
<main>
    <h1>Library List</h1>
    <table>
        <thead>
            <tr>
                <th>Library Name</th>
                <th>Programming Language</th>
                <th>Description</th>
                <th>Developed By</th>
                <th>First Release</th>
                <th>Latest Release</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let library of libraries">
                <td>{{ library.libraryName }}</td>
                <td>{{ library.programmingLanguage }}</td>
                <td>{{ library.description }}</td>
                <td>{{ library.developedBy }}</td>
                <td>{{ library.firstRelease }}</td>
                <td>{{ library.latestRelease }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <label for="libraryName">Library Name</label>
        <input
            type="text"
            id="libraryName"
            name="libraryName"
            [(ngModel)]="libraryName" />
    </div>
    <div>
        <label for="programmingLanguage">Programming Language</label>
        <input
            type="text"
            id="programmingLanguage"
            name="programmingLanguage"
            [(ngModel)]="programmingLanguage" />
    </div>
    <div>
        <label for="description">Description</label>
        <input
            type="text"
            id="description"
            name="description"
            [(ngModel)]="description" />
    </div>
    <div>
        <label for="developedBy">Developed By</label>
        <input
            type="text"
            id="developedBy"
            name="developedBy"
            [(ngModel)]="developedBy" />
    </div>
    <div>
        <label for="firstRelease">First Release</label>
        <input
            type="text"
            id="firstRelease"
            name="firstRelease"
            [(ngModel)]="firstRelease" />
    </div>
    <div>
        <label for="latestRelease">Latest Release</label>
        <input
            type="text"
            id="latestRelease"
            name="latestRelease"
            [(ngModel)]="latestRelease" />
    </div>
    <button (click)="addLibrary()">Add Library</button>
</main>

// library-list.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgForOf } from '@angular/common';
import LibraryList from '@app/interface/library-list';

@Component({
    selector: 'app-library-list',
    standalone: true,
    imports: [FormsModule, NgForOf],
    templateUrl: './library-list.component.html',
    styles: ``,
})
export class LibraryListComponent {
    libraries: LibraryList[] = [];

    libraryName: string = '';
    programmingLanguage: string = '';
    description: string = '';
    developedBy: string = '';
    firstRelease: string = '';
    latestRelease: string = '';

    addLibrary() {
        this.libraries.push({
            libraryName: this.libraryName,
            programmingLanguage: this.programmingLanguage,
            description: this.description,
            developedBy: this.developedBy,
            firstRelease: this.firstRelease,
            latestRelease: this.latestRelease,
        });

        this.libraryName = '';
        this.programmingLanguage = '';
        this.description = '';
        this.developedBy = '';
        this.firstRelease = '';
        this.latestRelease = '';
    }
}
// @app/interface/library-list:
export default interface LibraryList {
    libraryName: string;
    programmingLanguage: string;
    description: string;
    developedBy: string;
    firstRelease: string;
    latestRelease: string;
}

Repository Link: https://github.com/froilanimnida/activity-15-angular-with-typescript-and-data-structures
Deployment Link: https://act-15-bf0b8.web.app