What are Angular Services?

Angular Services are a fundamental part of the architecture in Angular applications. They are used to share data and logic across multiple components in an efficient and reusable way. Services are typically used to encapsulate business logic, data access, or external API interactions, separating these concerns from the UI components.

Key Concepts:

Singleton Services: Angular services are typically provided as singletons, meaning that they maintain a single instance throughout the application. This makes services ideal for managing shared data.
Dependency Injection (DI): Angular services are used in conjunction with Angular's Dependency Injection system, which allows the service to be easily injected into components or other services where needed.
Modularity: Services make Angular applications more modular, allowing for separation of concerns and reusability.
Scope of Services: Services can be provided at various scopes:
- Root level: When provided in the root injector (by using the providedIn: 'root' syntax), a service is available throughout the app.
- Module level: Services can be limited to a specific Angular module.
- Component level: Services can also be scoped to a specific component and its children.

Use Cases for Angular Services:

Data Sharing: To share data between multiple components.
API Calls: To make HTTP requests to backend services (e.g., using HttpClient).
Reusable Logic: To hold reusable business logic, like utility functions, validation, or calculations.
Managing State: To manage application-level state, such as user authentication status or shopping cart contents.

Example of an Angular Service:

Here’s an example of a simple Angular service to fetch data from an API using the HttpClient module:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

In this example:

The @Injectable decorator marks the class as a service.
providedIn: 'root' ensures that the service is a singleton and is available throughout the application.
The getData() method makes an HTTP GET request to fetch data from a remote server.

Using the Service in a Component:

To use the service in a component, you inject it in the component’s constructor:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
  public data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(response => {
      this.data = response;
    });
  }
}

Benefits of Angular Services:

Code Reusability: Write once, use multiple times across components.
Separation of Concerns: Keeps components focused on presentation logic while services handle business logic and data.
Testability: Services can be easily unit tested.
Scalability: As your application grows, services can help you keep your codebase modular and maintainable.

Angular services play a crucial role in creating scalable, maintainable applications by enabling components to share data and logic efficiently. They leverage Angular's powerful Dependency Injection system, ensuring that services are easy to inject and reuse throughout an app.

From Activity 15:

1. Student List Service:

// Updated student-list.component.ts:
import { Component } from '@angular/core';
import { StudentListService } from '../../services/student-list.service';


@Component({
  selector: 'app-student-list',
  templateUrl: './student-list.component.html',
  styleUrls: ['./student-list.component.css']
})
export class StudentListComponent {
  newStudent: string = ''; // Input field for new student
  students: string[] = []; // List of students

  constructor(private studentListService: StudentListService) {
    this.students = this.studentListService.getStudentList(); // Fetch the initial list of students
  }

  // Method to add a new student
  addStudent() {
    this.studentListService.addStudent(this.newStudent); // Add new student via service
    this.newStudent = ''; // Clear the input field
  }
}

// student-list.service.ts:
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StudentListService {
  private students: string[] = ['Alice', 'Bob', 'Charlie']; // Initial list of students

  // Method to fetch the list of students
  getStudentList(): string[] {
    return this.students;
  }

  // Method to add a new student
  addStudent(newStudent: string): void {
    if (newStudent.trim()) {
      this.students.push(newStudent); // Add new student to the list
    }
  }
}

// student-list.component.html:

<div>
    <h2>Student List</h2>

    <!-- Input field for adding a new student -->
    <input type="text" [(ngModel)]="newStudent" placeholder="Enter student name" />
    <button (click)="addStudent()">Add Student</button>

    <!-- Display the list of students -->
    <ul>
      <li *ngFor="let student of students">{{ student }}</li>

    </ul>
</div>

OUTPUT:

2. Employee-List

// updated employee-list.component.ts
import { Component } from '@angular/core';
import { EmployeeListService } from '../../services/employee-list.service'; // Import the service

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrl: './employee-list.component.css'
})
export class EmployeeListComponent {
  employees: string[] = [];
  newEmployee: string = '';

  constructor(private employeeListService: EmployeeListService) {
    this.employees = this.employeeListService.getEmployeeList(); // Fetch the initial list of employees
  }

  addEmployee() {
    if (this.newEmployee) {
      this.employees.push(this.newEmployee);
      this.newEmployee = ''; // Clear the input field after adding
    }
  }

  getEmployeeList() {
    return this.employees;
  }

}

// employee-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EmployeeListService {
  private employees: string[] = [];

  // Method to fetch the list of employees
  getEmployeeList(): string[] {
    return this.employees;
  }

  constructor() { }

// Method to add a new employee
addEmployee(newEmployee: string): void {
  if (newEmployee.trim()) {
    this.employees.push(newEmployee);
  }

}
}

OUTPUT:

3. Fruit-List

// update fruit-list.component.ts
import { Component } from '@angular/core';
import { FruitListService } from '../../services/fruit-list.service'; // Import the service

@Component({
  selector: 'app-fruit-list',
  templateUrl: './fruit-list.component.html',
  styleUrl: './fruit-list.component.css'
})
export class FruitListComponent {
  fruits: string[] = []; // Array to hold the list of fruits
  newFruit: string = ''; // Variable to bind to the input field

  constructor(private fruitListService: FruitListService) {
    this.fruits = this.fruitListService.getFruitList(); // Fetch the initial list of fruits
  }

  // Method to add a new fruit to the list
  addFruit() {
    if (this.newFruit.trim()) { // Check if the input is not empty
      this.fruits.push(this.newFruit.trim());
      this.newFruit = ''; // Clear the input field after adding
    }
  }

  // Method to get the list of fruits (could be omitted if not needed)
  getFruitList() {
    return this.fruits;
  }

}

// fruit-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FruitListService {
  private fruits: string[] = [];

  constructor() { }

 // Method to get the list of fruits
 getFruitList(): string[] {
  return this.fruits;
}

// Method to add a new fruit
addFruit(newFruit: string): void {
  if (newFruit.trim()) {
    this.fruits.push(newFruit.trim());
  }
}

}

OUTPUT:

4. Course List

// updated course-list.component.ts
import { Component } from '@angular/core';
import { CourseListService } from '../../services/course-list.service'; // Import the service

@Component({
  selector: 'app-course-list',
  templateUrl: './course-list.component.html',
  styleUrl: './course-list.component.css'
})
export class CourseListComponent {
  courses: string[] = []; // Array to hold the list of courses
  newCourse: string = ''; // Variable to bind to the input field

  constructor(private courseListService: CourseListService) {
    this.courses = this.courseListService.getCourseList(); // Fetch the initial list of courses
  }

  // Method to add a new course to the list
  addCourse() {
    if (this.newCourse.trim()) { // Check if the input is not empty
      this.courses.push(this.newCourse.trim());
      this.newCourse = ''; // Clear the input field after adding
    }
  }

  // Method to remove a course from the list
  removeCourse(index: number) {
    this.courses.splice(index, 1); // Remove the course at the specified index
  }

}

// course-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CourseListService {

  private courses: string[] = [];

  constructor() { }
 // Method to get the list of courses
 getCourseList(): string[] {
  return this.courses;
}

// Method to add a new course
addCourse(newCourse: string): void {
  if (newCourse.trim()) {
    this.courses.push(newCourse.trim());
  }
}

}

OUTPUT:

5. Book List

// updated bool-list.component.ts
import { Component } from '@angular/core';
import { BookListService } from '../../services/book-list.service'; // Import the service

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrl: './book-list.component.css'
})
export class BookListComponent {
  books: string[] = []; // Array to hold the list of books
  newBook: string = ''; // Variable to bind to the input field

  constructor(private bookListService: BookListService) {
    this.books = this.bookListService.getBookList(); // Fetch the initial list of books
  }

  // Method to add a new book to the list
  addBook() {
    if (this.newBook.trim()) { // Check if the input is not empty
      this.books.push(this.newBook.trim());
      this.newBook = ''; // Clear the input field after adding
    }
  }

  // Method to remove a book from the list
  removeBook(index: number) {
    this.books.splice(index, 1); // Remove the book at the specified index
  }

}

// book-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BookListService {
  private books: string[] = [];

  constructor() { }

// Method to get the list of books
getBookList(): string[] {
  return this.books;
}

// Method to add a new book
addBook(newBook: string): void {
  if (newBook.trim()) {
    this.books.push(newBook.trim());
  }
}


}

OUTPUT:

6. City List

// updated city-list.component.ts
import { Component } from '@angular/core';
import { CityListService } from '../../services/city-list.service'; // Import the service

@Component({
  selector: 'app-city-list',
  templateUrl: './city-list.component.html',
  styleUrl: './city-list.component.css'
})
export class CityListComponent {
  cities: string[] = []; // Array to hold the list of cities
  newCity: string = ''; // Variable to bind to the input field

  constructor(private cityListService: CityListService) {
    this.cities = this.cityListService.getCityList(); // Fetch the initial list of cities
  }

  // Method to add a new city to the list
  addCity() {
    if (this.newCity.trim()) { // Check if input is not empty
      this.cities.push(this.newCity.trim());
      this.newCity = ''; // Clear the input field after adding
    }
  }

  // Method to remove a city from the list
  removeCity(index: number) {
    this.cities.splice(index, 1); // Remove the city at the specified index
  }

}

// city-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CityListService {
  private cities: string[] = [];

  constructor() { }

// Method to get the list of cities
getCityList(): string[] {
  return this.cities;
}

// Method to add a new city
addCity(newCity: string): void {
  if (newCity.trim()) {
    this.cities.push(newCity.trim());
  }
}
}

OUTPUT:

7. Movie List

// updated movie-list.component.ts
import { Component } from '@angular/core';
import { MovieListService } from '../../services/movie-list.service'; // Import the service

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrl: './movie-list.component.css'
})
export class MovieListComponent {
  movies: string[] = []; // Array to hold the list of movies
  newMovie: string = ''; // Variable to bind to the input field

  constructor(private movieListService: MovieListService) {
    this.movies = this.movieListService.getMovieList(); // Fetch the initial list of movies
  }

  // Method to add a new movie to the list
  addMovie() {
    if (this.newMovie.trim()) { // Check if the input is not empty
      this.movies.push(this.newMovie.trim());
      this.newMovie = ''; // Clear the input field after adding
    }
  }

  // Method to remove a movie from the list
  removeMovie(index: number) {
    this.movies.splice(index, 1); // Remove the movie at the specified index
  }

}

// movie-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MovieListService {
  private movies: string[] = [];

  constructor() { }

// Method to get the list of movies
getMovieList(): string[] {
  return this.movies;
}

// Method to add a new movie
addMovie(newMovie: string): void {
  if (newMovie.trim()) {
    this.movies.push(newMovie.trim());
  }
}

}

OUTPUT:

8. Car Model List

// updated car-model-list.component.ts
import { Component } from '@angular/core';
import { CarModelListService } from '../../services/car-model-list.service'; // Import the service

@Component({
  selector: 'app-car-model-list',
  templateUrl: './car-model-list.component.html',
  styleUrl: './car-model-list.component.css'
})
export class CarModelListComponent {
  carModels: string[] = ['Tesla Model 3', 'BMW X5', 'Audi A6']; // Initial list of car models
  newCarModel: string = ''; // Variable to bind to the input field for adding a new car model
  editIndex: number | null = null; // Index of the car being edited, null means no editing mode
  searchQuery: string = ''; // Filter query for searching car models

  constructor(private carModelListService: CarModelListService) {
    this.carModels = this.carModelListService.getCarModelList(); // Fetch the initial list of car models
  }

  // Add a new car model
  addCarModel() {
    if (this.newCarModel.trim()) {
      if (this.editIndex === null) {
        // Add new car model if not in edit mode
        this.carModels.push(this.newCarModel.trim());
      } else {
        // Update the car model if in edit mode
        this.carModels[this.editIndex] = this.newCarModel.trim();
        this.editIndex = null; // Exit edit mode
      }
      this.newCarModel = ''; // Clear the input field
    }
  }

  // Edit an existing car model
  editCarModel(index: number) {
    this.newCarModel = this.carModels[index]; // Set the input field to the selected car model
    this.editIndex = index; // Set the index for edit mode
  }

  // Remove a car model from the list
  removeCarModel(index: number) {
    this.carModels.splice(index, 1);
  }

  // Get the filtered list of car models based on the search query
  getFilteredCarModels() {
    return this.carModels.filter(car =>
      car.toLowerCase().includes(this.searchQuery.toLowerCase()));
  }

}

// car-model-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CarModelListService {
  private carModels: string[] = [];

  constructor() { }

 // Method to get the list of car models
 getCarModelList(): string[] {
  return this.carModels;
}

// Method to add a new car model
addCarModel(newCarModel: string): void {
  if (newCarModel.trim()) {
    this.carModels.push(newCarModel.trim());
  }
}

}

OUTPUT:

9. Product List

// update product-list.component.ts
import { Component } from '@angular/core';
import { ProductListService } from '../../services/product-list.service'; // Import the service

// Define the Product interface directly in the component
interface Product {
  name: string;
  price: number;
  imageUrl: string;
}

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products: Product[] = []; // Array to store products

  newProduct: Product = { name: '', price: 0, imageUrl: '' }; // New product object
  editIndex: number | null = null; // Index for editing mode

  constructor(private productListService: ProductListService) {
    // Fetch the initial list of products from the service
    this.products = this.productListService.getProductList();
  }

  // Add or edit product
  addProduct() {
    if (this.editIndex === null) {
      // Add a new product
      this.products.push({ ...this.newProduct }); // Spread operator to clone the product object
    } else {
      // Update the existing product
      this.products[this.editIndex] = { ...this.newProduct };
      this.editIndex = null; // Exit editing mode
    }
    this.resetForm(); // Reset the form after adding or editing
  }

  // Edit an existing product
  editProduct(index: number) {
    this.newProduct = { ...this.products[index] }; // Populate the form with the selected product
    this.editIndex = index; // Set the index for editing mode
  }

  // Remove a product
  removeProduct(index: number) {
    this.products.splice(index, 1);
  }

  // Reset the form after adding or editing
  resetForm() {
    this.newProduct = { name: '', price: 0, imageUrl: '' };
  }

  // Handle image selection and conversion to base64
  onImageSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      const reader = new FileReader();

      reader.onload = () => {
        this.newProduct.imageUrl = reader.result as string; // Store the image as a base64 string
      };

      reader.readAsDataURL(file); // Convert the image to base64
    }
  }
}

// product-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductListService {
  private products = [
    { name: 'Laptop', price: 30000, imageUrl: 'https://i.pinimg.com/564x/78/bf/a8/78bfa893270a0b531705b1c56f25674d.jpg' },
    { name: 'Smartphone', price: 25000, imageUrl: 'https://i.pinimg.com/564x/d5/1b/0d/d51b0d8826063f245dc38e9ff6c5c263.jpg' }
  ];

  constructor() { }

  // Method to get the product list
  getProductList() {
    return this.products;
  }
}

OUTPUT:

10. Subject List

// updated subject-list.component.ts
import { Component } from '@angular/core';
import { SubjectListService } from '../../services/subject-list.service'; // Import the service

interface Subject {
  name: string;
  code: string;
}

@Component({
  selector: 'app-subject-list',
  templateUrl: './subject-list.component.html',
  styleUrl: './subject-list.component.css'
})
export class SubjectListComponent {
  subjects: Subject[] = [
    { name: 'Mathematics', code: 'MATH101' },
    { name: 'Physics', code: 'PHYS101' }
  ];

  newSubject: Subject = { name: '', code: '' };
  editIndex: number | null = null;

  constructor(private subjectListService: SubjectListService) {
    // Fetch the initial list of subjects from the service
    this.subjects = this.subjectListService.getSubjectList();
  }

  // Add or edit a subject
  addSubject() {
    if (this.editIndex === null) {
      this.subjects.push({ ...this.newSubject });
    } else {
      this.subjects[this.editIndex] = { ...this.newSubject };
      this.editIndex = null;
    }
    this.resetForm();
  }

  // Edit a subject
  editSubject(index: number) {
    this.newSubject = { ...this.subjects[index] };
    this.editIndex = index;
  }

  // Remove a subject
  removeSubject(index: number) {
    this.subjects.splice(index, 1);
  }

  // Reset the form after adding or editing
  resetForm() {
    this.newSubject = { name: '', code: '' };
  }

}

// subject-list.service.ts
import { Injectable } from '@angular/core';

// Subject interface defined here for consistency in service
interface Subject {
  name: string;
  code: string;
}

@Injectable({
  providedIn: 'root'
})
export class SubjectListService {
  private subjects: Subject[] = [
    { name: 'Mathematics', code: 'MATH101' },
    { name: 'Physics', code: 'PHY101' },
    { name: 'Chemistry', code: 'CHEM101' },
  ];

  constructor() { }

 // Method to get the subject list
 getSubjectList() {
  return this.subjects;
}
}

OUTPUT:

11. Country List

// update country-list.component.ts
import { Component } from '@angular/core';
import { CountryListService } from '../../services/country-list.service'; // Import the service

@Component({
  selector: 'app-country-list',
  templateUrl: './country-list.component.html',
  styleUrls: ['./country-list.component.css']
})
export class CountryListComponent {
  countries: { name: string; continent: string }[] = []; // Define countries as an array of objects
  filteredCountries: { name: string; continent: string }[] = []; // Array to hold filtered countries
  selectedContinent: string = ''; // Variable to hold selected continent for filtering
  newCountry = { name: '', continent: '' }; // Object to hold new country data
  editIndex: number | null = null; // Index for editing mode

  constructor(private countryListService: CountryListService) {
    this.countries = this.countryListService.getCountryList(); // Fetch the list of countries
    this.filteredCountries = this.countries; // Initialize filteredCountries with all countries
  }

  // Method to filter countries by continent
  filterByContinent() {
    if (!this.selectedContinent) {
      this.filteredCountries = this.countries; // If no continent is selected, show all countries
    } else {
      this.filteredCountries = this.countries.filter(country => country.continent === this.selectedContinent);
    }
    return this.filteredCountries; // Return the filtered countries
  }

  // Method to add or edit a country
  saveCountry() {
    if (this.editIndex === null) {
      // Add a new country
      this.countries.push({ ...this.newCountry }); // Add the new country to the list
    } else {
      // Update the existing country
      this.countries[this.editIndex] = { ...this.newCountry }; // Update the country at the specified index
      this.editIndex = null; // Reset editIndex after editing
    }
    this.resetForm(); // Reset the form after adding or editing
    this.filterByContinent(); // Refresh the filtered list
  }

  // Method to edit an existing country
  editCountry(index: number) {
    this.newCountry = { ...this.countries[index] }; // Populate the form with the selected country
    this.editIndex = index; // Set the index for editing mode
  }

  // Method to remove a country
  removeCountry(index: number) {
    this.countries.splice(index, 1); // Remove the country at the specified index
    this.filterByContinent(); // Refresh the filtered list after removal
  }

  // Method to reset the form after adding or editing
  resetForm() {
    this.newCountry = { name: '', continent: '' }; // Clear the input fields
    this.editIndex = null; // Reset the edit index
  }
}

// country-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CountryListService {
  private countries: { name: string; continent: string }[] = [
    { name: 'USA', continent: 'North America' },
    { name: 'Canada', continent: 'North America' },
    { name: 'Brazil', continent: 'South America' },
    // Add more countries as needed
  ];

  constructor() { }

// Method to get the country list
getCountryList() {
  return this.countries;

}

}

OUTPUT:

12. Sports List

// updated sports-list.component.ts
import { Component } from '@angular/core';
import { SportsListService } from '../../services/sports-list.service'; // Import the service

interface Sport {
  name: string;
  category: string;
}

@Component({
  selector: 'app-sports-list',
  templateUrl: './sports-list.component.html',
  styleUrl: './sports-list.component.css'
})
export class SportsListComponent {
   // List of categories
   categories: string[] = ['Indoor', 'Outdoor', 'Water', 'Extreme', 'Racing'];

   constructor(private sportsListService: SportsListService) {}

   // Array to store sports
   sports: Sport[] = [
     { name: 'Football', category: 'Outdoor' },
     { name: 'Basketball', category: 'Indoor' },
     { name: 'Swimming', category: 'Water' }
   ];

   // Model for new sport entry
   newSport: Sport = { name: '', category: '' };
   filterCategory: string = '';
   editIndex: number | null = null;

   // Add or edit a sport
   addSport() {
     if (this.editIndex === null) {
       this.sports.push({ ...this.newSport });
     } else {
       this.sports[this.editIndex] = { ...this.newSport };
       this.editIndex = null;
     }
     this.resetForm();
   }

   // Edit an existing sport
   editSport(index: number) {
     this.newSport = { ...this.sports[index] };
     this.editIndex = index;
   }

   // Remove a sport from the list
   removeSport(index: number) {
     this.sports.splice(index, 1);
   }

   // Filter sports by category
   filterByCategory() {
     if (this.filterCategory === '') {
       return this.sports;
     }
     return this.sports.filter(sport => sport.category === this.filterCategory);
   }

   // Reset the form after adding or editing
   resetForm() {
     this.newSport = { name: '', category: '' };
   }

}

// sports-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SportsListService {
  private sports: { name: string; type: string }[] = []; // Array to hold the list of sports

  constructor() { }

 // Get the list of sports
 getSportsList() {
  return this.sports;
}

// Add a new sport
addSport(sport: { name: string; type: string }) {
  this.sports.push(sport);
}

// Edit an existing sport
editSport(index: number, sport: { name: string; type: string }) {
  this.sports[index] = sport;
}

// Remove a sport
removeSport(index: number) {
  this.sports.splice(index, 1);
}

}

OUTPUT:

13. Vegetable List

// updated vegetable-list.component.ts
import { Component } from '@angular/core';
import { VegetableListService } from '../../services/vegetable-list.service'; // Import the service

interface Vegetable {
  name: string;
  price: number;
}

@Component({
  selector: 'app-vegetable-list',
  templateUrl: './vegetable-list.component.html',
  styleUrl: './vegetable-list.component.css'
})
export class VegetableListComponent {
  vegetables: string[] = []; // Array to hold the list of vegetables
  newVegetable: string = ''; // Variable to bind to the input field

  constructor(private vegetableListService: VegetableListService) {
    this.vegetables = this.vegetableListService.getVegetableList(); // Fetch the initial list of vegetables
  }

  // Method to add a new vegetable to the list
  addVegetable() {
    if (this.newVegetable.trim()) { // Check if the input is not empty
      this.vegetables.push(this.newVegetable.trim());
      this.newVegetable = ''; // Clear the input field after adding
    }
  }

  // Method to remove a vegetable from the list
  removeVegetable(index: number) {
    this.vegetables.splice(index, 1); // Remove the vegetable at the specified index
  }

}

// vegetable-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class VegetableListService {
  private vegetables: string[] = ['Carrot', 'Potato', 'Tomato']; // Initial list of vegetables

  constructor() { }

  // Method to get the list of vegetables
  getVegetableList(): string[] {
    return this.vegetables; // Return the list of vegetables
  }

}

OUTPUT:

14. Animal List

// updated animal-list.component.ts
import { Component } from '@angular/core';
import { AnimalListService } from '../../services/animal-list.service'; // Import the service

// Define the Animal interface
interface Animal {
  name: string;
  habitat: string;
}

@Component({
  selector: 'app-animal-list',
  templateUrl: './animal-list.component.html',
  styleUrls: ['./animal-list.component.css'] // Corrected 'styleUrl' to 'styleUrls'
})
export class AnimalListComponent {
  // Array to store the animals
  animals: Animal[] = []; // Initialize as an empty array

  constructor(private animalListService: AnimalListService) {
    this.animals = this.animalListService.getAnimalList(); // Fetch the initial list of animals
  }

  // Model for new animal entry
  newAnimal: Animal = { name: '', habitat: '' };
  editIndex: number | null = null;

  // Add or edit an animal
  addAnimal() {
    if (this.editIndex === null) {
      this.animals.push({ ...this.newAnimal });
    } else {
      this.animals[this.editIndex] = { ...this.newAnimal };
      this.editIndex = null;
    }
    this.resetForm();
  }

  // Edit an existing animal
  editAnimal(index: number) {
    this.newAnimal = { ...this.animals[index] };
    this.editIndex = index;
  }

  // Remove an animal from the list
  removeAnimal(index: number) {
    this.animals.splice(index, 1);
  }

  // Reset the form after adding or editing
  resetForm() {
    this.newAnimal = { name: '', habitat: '' };
  }
}

// animal-list.service.ts
import { Injectable } from '@angular/core';


// Define the Animal interface
interface Animal {
  name: string;
  habitat: string;
}

@Injectable({
  providedIn: 'root'
})
export class AnimalListService {
  private animals: Animal[] = [
    { name: 'Lion', habitat: 'Savanna' },
    { name: 'Penguin', habitat: 'Antarctica' },
    { name: 'Elephant', habitat: 'Forest' },
  ];

  constructor() { }

  // Method to get the list of animals
  getAnimalList(): Animal[] {
    return this.animals;
  }
}

OUTPUT:

15. Tool List

// updated tool-list.component.ts
import { Component } from '@angular/core';
import { ToolListService } from '../../services/tool-list.service'; // Import the service


interface Tool {
  name: string;
  type: string;
  quantity: number;
}


@Component({
  selector: 'app-tool-list',
  templateUrl: './tool-list.component.html',
  styleUrl: './tool-list.component.css'
})
export class ToolListComponent {
// Array to store the tools
tools: Tool[] = [
  { name: 'Hammer', type: 'Hand Tool', quantity: 10 },
  { name: 'Drill', type: 'Power Tool', quantity: 5 },
  { name: 'Wrench', type: 'Hand Tool', quantity: 8 }
];

// Model for new tool entry
newTool: Tool = { name: '', type: '', quantity: 0 };
editIndex: number | null = null;

 // Inject the ToolListService
 constructor(private toolListService: ToolListService) {
  this.tools = this.toolListService.getToolList(); // Fetch the initial list of tools
}

// Add or edit a tool
addTool() {
  if (this.editIndex === null) {
    this.tools.push({ ...this.newTool });
  } else {
    this.tools[this.editIndex] = { ...this.newTool };
    this.editIndex = null;
  }
  this.resetForm();
}

// Edit an existing tool
editTool(index: number) {
  this.newTool = { ...this.tools[index] };
  this.editIndex = index;
}

// Remove a tool from the list
removeTool(index: number) {
  this.tools.splice(index, 1);
}

// Reset the form after adding or editing
resetForm() {
  this.newTool = { name: '', type: '', quantity: 0 };
}
 // Method to update the local tools array from the service
 private updateToolList() {
  this.tools = this.toolListService.getToolList(); // Refresh the tools list from the service
}
}

// tool-list.service.ts
import { Injectable } from '@angular/core';

interface Tool {
  name: string;
  type: string;
  quantity: number;
}

@Injectable({
  providedIn: 'root'
})
export class ToolListService {
  private tools: Tool[] = [
    { name: 'Hammer', type: 'Hand Tool', quantity: 10 },
    { name: 'Drill', type: 'Power Tool', quantity: 5 },
    { name: 'Wrench', type: 'Hand Tool', quantity: 8 }
  ];


  constructor() { }
  getToolList(): Tool[] {
    return this.tools;
  }

  addTool(tool: Tool): void {
    this.tools.push(tool);
  }

  removeTool(toolName: string): void {
    this.tools = this.tools.filter(tool => tool.name !== toolName);
  }

}

OUTPUT:

// updated language-list.component.ts
import { Component } from '@angular/core';
import { LanguageListService } from '../../services/language-list.service'; // Import the service

@Component({
  selector: 'app-language-list',
  templateUrl: './language-list.component.html',
  styleUrl: './language-list.component.css'
})
export class LanguageListComponent {
  languages: string[] = ['JavaScript', 'Python', 'Java', 'C#', 'Go'];
  newLanguage: string = '';
  editIndex: number | null = null; // Track the index of the language being edited

// Inject the LanguageListService
constructor(private languageListService: LanguageListService) {
  this.languages = this.languageListService.getLanguageList(); // Fetch the initial list of languages
}

  // Function to add a new programming language to the list
  addLanguage() {
    if (this.newLanguage.trim()) {
      if (this.editIndex === null) {
        this.languageListService.addLanguage(this.newLanguage); // Add via service
      } else {
        this.languageListService.updateLanguage(this.editIndex, this.newLanguage); // Update via service
        this.editIndex = null; // Reset edit index after updating
      }
      this.newLanguage = ''; // Clear input after adding or editing
      this.updateLanguageList(); // Refresh the local list
    }
  }
  // Function to remove a programming language from the list
  removeLanguage(language: string) {
    this.languageListService.removeLanguage(language); // Remove via service
    this.updateLanguageList(); // Refresh the local list
  }
// Function to set the language for editing
  editLanguage(index: number) {
    this.newLanguage = this.languages[index]; // Populate input with the language to edit
    this.editIndex = index; // Set the index for editing
}
  // Function to refresh the local languages array from the service
  private updateLanguageList() {
    this.languages = this.languageListService.getLanguageList(); // Update local list from service
  }
}

// language-list.service.ts
import { Injectable } from '@angular/core';



@Injectable({
  providedIn: 'root'
})
export class LanguageListService {
  private languages: string[] = ['JavaScript', 'Python', 'Java', 'C#', 'Go']; // Initialize with some languages


  constructor() { }

   // Method to get the list of languages
   getLanguageList(): string[] {
    return this.languages;
  }

  // Method to add a new language
  addLanguage(language: string): void {
    this.languages.push(language);
  }

  // Method to remove a language
  removeLanguage(language: string): void {
    const index = this.languages.indexOf(language);
    if (index !== -1) {
      this.languages.splice(index, 1);
    }
  }

  // Method to update a language at a specific index
  updateLanguage(index: number, language: string): void {
    if (index >= 0 && index < this.languages.length) {
      this.languages[index] = language; // Update the language at the specified index
    }
  }
}

OUTPUT:

17. Game List

// updated game-list.component.ts
import { Component } from '@angular/core';
import { GameListService } from '../../services/game-list.service'; // Import the service

@Component({
  selector: 'app-game-list',
  templateUrl: './game-list.component.html',
  styleUrl: './game-list.component.css'
})
export class GameListComponent {
   // Property to hold the new game input value
   newGame: string = '';

   // List of video games
   games: string[] = ['The Legend of Zelda', 'Super Mario Odyssey', 'Minecraft', 'Fortnite', 'Cyberpunk 2077'];

   // Property for search input
   searchQuery: string = '';

   // Property to hold the index of the game being edited
   editIndex: number | null = null;

   // Temporary property to store the edited game value
   editedGame: string = '';

   constructor(private gameListService: GameListService) {}


   // Method to add a new game to the list
   addGame() {
     if (this.newGame.trim()) {
       this.games.push(this.newGame);
       this.newGame = ''; // Reset input field
     }
   }

   // Method to get the filtered list of games based on search query
   getFilteredGames(): string[] {
     if (this.searchQuery.trim()) {
       return this.games.filter(game =>
         game.toLowerCase().includes(this.searchQuery.toLowerCase())
       );
     }
     return this.games;
   }

   // Method to edit a game
   editGame(index: number) {
     this.editIndex = index;
     this.editedGame = this.games[index];
   }

   // Method to save the edited game
   saveEdit() {
     if (this.editIndex !== null && this.editedGame.trim()) {
       this.games[this.editIndex] = this.editedGame;
       this.editIndex = null; // Exit edit mode
       this.editedGame = ''; // Reset edit input
     }
   }

   // Method to remove a game from the list
   removeGame(index: number) {
     this.games.splice(index, 1);
   }

}

// game-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GameListService {
  private games: { name: string; genre: string; releaseYear: number }[] = [
    { name: 'The Legend of Zelda', genre: 'Action-Adventure', releaseYear: 1986 },
    { name: 'Super Mario Bros.', genre: 'Platformer', releaseYear: 1985 },
    { name: 'Minecraft', genre: 'Sandbox', releaseYear: 2011 }
  ];

  constructor() { }
 // Method to get the list of games
 getGameList() {
  return this.games;
}

// Method to add a new game
addGame(game: { name: string; genre: string; releaseYear: number }) {
  this.games.push(game);
}

// Method to remove a game
removeGame(index: number) {
  if (index >= 0 && index < this.games.length) {
    this.games.splice(index, 1);
  }
}

// Method to update a game
updateGame(index: number, game: { name: string; genre: string; releaseYear: number }) {
  if (index >= 0 && index < this.games.length) {
    this.games[index] = game;
  }
}
}

OUTPUT:

18. Software List

// update software-list.component.ts
import { Component } from '@angular/core';
import { SoftwareListService } from '../../services/software-list.service'; // Import the service

@Component({
  selector: 'app-software-list',
  templateUrl: './software-list.component.html',
  styleUrl: './software-list.component.css'
})
export class SoftwareListComponent {
// Property to hold the new software input value
newSoftware: string = '';

// List of installed software
software: string[] = [
  'Visual Studio Code',
  'Google Chrome',
  'Adobe Photoshop',
  'Microsoft Office',
  'Slack',
  'Zoom',
  'Node.js',
  'Git',
];

// Property for search input
searchQuery: string = '';

// Property to hold the index of the software being edited
editIndex: number | null = null;

// Temporary property to store the edited software value
editedSoftware: string = '';

constructor(private softwareListService: SoftwareListService) {}

// Method to add new software to the list
addSoftware() {
  if (this.newSoftware.trim()) {
    this.software.push(this.newSoftware);
    this.newSoftware = ''; // Reset input field
  }
}

// Method to get the filtered list of software based on search query
getFilteredSoftware(): string[] {
  if (this.searchQuery.trim()) {
    return this.software.filter(app =>
      app.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
  return this.software;
}

// Method to edit a software entry
editSoftware(index: number) {
  this.editIndex = index;
  this.editedSoftware = this.software[index];
}

// Method to save the edited software entry
saveEdit() {
  if (this.editIndex !== null && this.editedSoftware.trim()) {
    this.software[this.editIndex] = this.editedSoftware;
    this.editIndex = null; // Exit edit mode
    this.editedSoftware = ''; // Reset edit input
  }
}

// Method to remove software from the list
removeSoftware(index: number) {
  this.software.splice(index, 1);
}

}

// software-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SoftwareListService {
  private softwareList: { name: string; version: string; license: string }[] = [
    { name: 'Visual Studio Code', version: '1.62.3', license: 'Free' },
    { name: 'Postman', version: '9.1.1', license: 'Free' },
    { name: 'Slack', version: '4.19.0', license: 'Free' }
  ];

  constructor() { }

 // Method to get the list of software
 getSoftwareList() {
  return this.softwareList;
}

// Method to add a new software item
addSoftware(software: { name: string; version: string; license: string }) {
  this.softwareList.push(software);
}

// Method to remove a software item
removeSoftware(index: number) {
  if (index >= 0 && index < this.softwareList.length) {
    this.softwareList.splice(index, 1);
  }
}

// Method to update a software item
updateSoftware(index: number, software: { name: string; version: string; license: string }) {
  if (index >= 0 && index < this.softwareList.length) {
    this.softwareList[index] = software;
  }
}


}

OUTPUT:

19. Phone Contact List

// updated phone-contact-list.component.ts
import { Component } from '@angular/core';
import { PhoneContactListService } from '../../services/phone-contact-list.service'; // Import the service
@Component({
  selector: 'app-phone-contact-list',
  templateUrl: './phone-contact-list.component.html',
  styleUrl: './phone-contact-list.component.css'
})
export class PhoneContactListComponent {
  // Property to hold the new contact input values
  newContactName: string = '';
  newContactNumber: string = '';

  // List of phone contacts
  contacts: { name: string; number: string }[] = [
    { name: 'John Doe', number: '123-456-7890' },
    { name: 'Jane Smith', number: '987-654-3210' },
    { name: 'Alice Johnson', number: '555-555-5555' },
  ];

  // Property for search input
  searchQuery: string = '';

  // Property to hold the index of the contact being edited
  editIndex: number | null = null;

  // Temporary properties to store the edited contact values
  editedContactName: string = '';
  editedContactNumber: string = '';

  constructor(private phoneContactListService: PhoneContactListService) {}

  // Method to add new contact to the list
  addContact() {
    if (this.newContactName.trim() && this.newContactNumber.trim()) {
      this.contacts.push({ name: this.newContactName, number: this.newContactNumber });
      this.newContactName = ''; // Reset input field
      this.newContactNumber = ''; // Reset input field
    }
  }

  // Method to get the filtered list of contacts based on search query
  getFilteredContacts(): { name: string; number: string }[] {
    if (this.searchQuery.trim()) {
      return this.contacts.filter(contact =>
        contact.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
    return this.contacts;
  }

  // Method to edit a contact entry
  editContact(index: number) {
    this.editIndex = index;
    this.editedContactName = this.contacts[index].name;
    this.editedContactNumber = this.contacts[index].number;
  }

  // Method to save the edited contact entry
  saveEdit() {
    if (this.editIndex !== null) {
      this.contacts[this.editIndex] = {
        name: this.editedContactName,
        number: this.editedContactNumber
      };
      this.editIndex = null; // Exit edit mode
      this.editedContactName = ''; // Reset edit input
      this.editedContactNumber = ''; // Reset edit input
    }
  }

  // Method to remove contact from the list
  removeContact(index: number) {
    this.contacts.splice(index, 1);
  }

}

// phone-contact-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PhoneContactListService {
  private contacts: { name: string; phone: string }[] = [
    { name: 'John Doe', phone: '123-456-7890' },
    { name: 'Jane Smith', phone: '987-654-3210' },
    { name: 'Alice Johnson', phone: '555-555-5555' }
  ];

  constructor() { }

 // Method to get the list of contacts
 getContactList() {
  return this.contacts;
}

// Method to add a new contact
addContact(contact: { name: string; phone: string }) {
  this.contacts.push(contact);
}

// Method to remove a contact
removeContact(index: number) {
  if (index >= 0 && index < this.contacts.length) {
    this.contacts.splice(index, 1);
  }
}

// Method to update a contact
updateContact(index: number, contact: { name: string; phone: string }) {
  if (index >= 0 && index < this.contacts.length) {
    this.contacts[index] = contact;
  }
}
}

OUTPUT:

20. Music Playlist

// updated music-playlist.component.ts
import { Component } from '@angular/core';
import { MusicPlaylistService } from '../../services/music-playlist.service'; // Import the service

@Component({
  selector: 'app-music-playlist',
  templateUrl: './music-playlist.component.html',
  styleUrl: './music-playlist.component.css'
})
export class MusicPlaylistComponent {
// Properties to hold the new song input values
newSongTitle: string = '';
newSongArtist: string = '';

// List of songs in the playlist
playlist: { title: string; artist: string }[] = [
  { title: 'Song One', artist: 'Artist A' },
  { title: 'Song Two', artist: 'Artist B' },
  { title: 'Song Three', artist: 'Artist C' },
];

// Property for search input
searchQuery: string = '';

// Property to hold the index of the song being edited
editIndex: number | null = null;

// Temporary properties to store the edited song values
editedSongTitle: string = '';
editedSongArtist: string = '';

constructor(private musicPlaylistService: MusicPlaylistService) {}

// Method to add a new song to the playlist
addSong() {
  if (this.newSongTitle.trim() && this.newSongArtist.trim()) {
    this.playlist.push({ title: this.newSongTitle, artist: this.newSongArtist });
    this.newSongTitle = ''; // Reset input field
    this.newSongArtist = ''; // Reset input field
  }
}

// Method to get the filtered list of songs based on the search query
getFilteredPlaylist(): { title: string; artist: string }[] {
  if (this.searchQuery.trim()) {
    return this.playlist.filter(song =>
      song.title.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
  return this.playlist;
}

// Method to edit a song entry
editSong(index: number) {
  this.editIndex = index;
  this.editedSongTitle = this.playlist[index].title;
  this.editedSongArtist = this.playlist[index].artist;
}

// Method to save the edited song entry
saveEdit() {
  if (this.editIndex !== null) {
    this.playlist[this.editIndex] = {
      title: this.editedSongTitle,
      artist: this.editedSongArtist
    };
    this.editIndex = null; // Exit edit mode
    this.editedSongTitle = ''; // Reset edit input
    this.editedSongArtist = ''; // Reset edit input
  }
}

// Method to remove a song from the playlist
removeSong(index: number) {
  this.playlist.splice(index, 1);
}

}

// music-playlist.services.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MusicPlaylistService {
  private playlist: { title: string; artist: string; duration: string }[] = [
    { title: 'Song A', artist: 'Artist A', duration: '3:30' },
    { title: 'Song B', artist: 'Artist B', duration: '4:00' },
    { title: 'Song C', artist: 'Artist C', duration: '2:45' }
  ];

  constructor() { }

 // Method to get the playlist
 getPlaylist() {
  return this.playlist;
}

// Method to add a new song
addSong(song: { title: string; artist: string; duration: string }) {
  this.playlist.push(song);
}

// Method to remove a song
removeSong(index: number) {
  if (index >= 0 && index < this.playlist.length) {
    this.playlist.splice(index, 1);
  }
}

// Method to update a song
updateSong(index: number, song: { title: string; artist: string; duration: string }) {
  if (index >= 0 && index < this.playlist.length) {
    this.playlist[index] = song;
  }
}
}

OUTPUT:

// updated food-menu.component.ts
import { Component, OnInit } from '@angular/core';
import { FoodMenuService } from '../../services/food-menu.service';

@Component({
  selector: 'app-food-menu',
  templateUrl: './food-menu.component.html',
  styleUrls: ['./food-menu.component.css']
})
export class FoodMenuComponent implements OnInit {
  // Array to store the food items
  menu: { name: string; price: number; description: string }[] = [];

  // Model for a new food item entry
  newFoodItem = { name: '', price: 0, description: '' };
  editIndex: number | null = null;

  constructor(private foodMenuService: FoodMenuService) {}

  // Lifecycle hook to initialize the menu
  ngOnInit(): void {
    this.menu = this.foodMenuService.getMenu(); // Initialize menu in ngOnInit
  }

  // Add or edit a food item
  addFoodItem() {
    if (this.editIndex === null) {
      this.foodMenuService.addFoodItem({ ...this.newFoodItem });
    } else {
      this.foodMenuService.updateFoodItem(this.editIndex, { ...this.newFoodItem });
      this.editIndex = null; // Exit editing mode
    }
    this.resetForm();
    this.refreshMenu(); // Refresh the menu after adding or editing
  }

  // Edit an existing food item
  editFoodItem(index: number) {
    this.newFoodItem = { ...this.menu[index] };
    this.editIndex = index;
  }

  // Remove a food item from the list
  removeFoodItem(index: number) {
    this.foodMenuService.removeFoodItem(index);
    this.refreshMenu(); // Refresh the menu after removing
  }

  // Reset the form after adding or editing
  resetForm() {
    this.newFoodItem = { name: '', price: 0, description: '' };
  }

  // Method to refresh the menu
  refreshMenu() {
    this.menu = this.foodMenuService.getMenu(); // Update the menu list
  }
}

// food-menu.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class FoodMenuService {
  private menu: { name: string; price: number; description: string }[] = [];

  constructor() {
    // Initial food items
    this.menu = [
      { name: 'Pizza', price: 250, description: 'Delicious cheese pizza' },
      { name: 'Burger', price: 120, description: 'Juicy beef burger' },
      { name: 'Sushi', price: 100, description: 'Fresh sushi rolls' },
    ];
  }

  getMenu() {
    return this.menu;
  }

  addFoodItem(item: { name: string; price: number; description: string }) {
    this.menu.push(item);
  }

  updateFoodItem(index: number, item: { name: string; price: number; description: string }) {
    this.menu[index] = item;
  }

  removeFoodItem(index: number) {
    this.menu.splice(index, 1);
  }
}

OUTPUT:

22. Grocery List

// updated grocery-list.component.ts
import { Component } from '@angular/core';
import { GroceryListService } from '../../services/grocery-list.service';

@Component({
  selector: 'app-grocery-list',
  templateUrl: './grocery-list.component.html',
  styleUrl: './grocery-list.component.css'
})
export class GroceryListComponent {
// Properties to hold the new grocery item input values
newItemName: string = '';
newItemQuantity: number | null = null;

// List of grocery items
groceryList: { name: string; quantity: number }[] = [
  { name: 'Milk', quantity: 2 },
  { name: 'Eggs', quantity: 12 },
  { name: 'Bread', quantity: 1 },
];

// Property for search input
searchQuery: string = '';

// Property to hold the index of the grocery item being edited
editIndex: number | null = null;

// Temporary properties to store the edited grocery item values
editedItemName: string = '';
editedItemQuantity: number | null = null;

constructor(private groceryListService: GroceryListService) {}

ngOnInit(): void {
  this.groceryList = this.groceryListService.getGroceryList();
}

// Method to add a new grocery item to the list
addItem() {
  if (this.newItemName.trim() && this.newItemQuantity !== null) {
    this.groceryList.push({ name: this.newItemName, quantity: this.newItemQuantity });
    this.newItemName = ''; // Reset input field
    this.newItemQuantity = null; // Reset input field
  }
}

// Method to get the filtered list of grocery items based on the search query
getFilteredList(): { name: string; quantity: number }[] {
  if (this.searchQuery.trim()) {
    return this.groceryList.filter(item =>
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
  return this.groceryList;
}

// Method to edit a grocery item
editItem(index: number) {
  this.editIndex = index;
  this.editedItemName = this.groceryList[index].name;
  this.editedItemQuantity = this.groceryList[index].quantity;
}

// Method to save the edited grocery item
saveEdit() {
  if (this.editIndex !== null) {
    this.groceryList[this.editIndex] = {
      name: this.editedItemName,
      quantity: this.editedItemQuantity!
    };
    this.editIndex = null; // Exit edit mode
    this.editedItemName = ''; // Reset edit input
    this.editedItemQuantity = null; // Reset edit input
  }
}

// Method to remove a grocery item from the list
removeItem(index: number) {
  this.groceryList.splice(index, 1);
}

}

// grocery-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GroceryListService {
  private groceryList: { name: string; quantity: number }[] = [
    { name: 'Milk', quantity: 2 },
    { name: 'Eggs', quantity: 12 },
    { name: 'Bread', quantity: 1 },
  ];


  constructor() { }
  getGroceryList() {
    return this.groceryList;
  }

  addGroceryItem(item: { name: string; quantity: number }) {
    this.groceryList.push(item);
  }

  updateGroceryItem(index: number, item: { name: string; quantity: number }) {
    this.groceryList[index] = item;
  }

  removeGroceryItem(index: number) {
    this.groceryList.splice(index, 1);
  }


}

OUTPUT:

23. Classroom List

// updated classroom-list.component.ts
import { Component } from '@angular/core';
import { ClassroomListService } from '../../services/classroom-list.service';

@Component({
  selector: 'app-classroom-list',
  templateUrl: './classroom-list.component.html',
  styleUrl: './classroom-list.component.css'
})
export class ClassroomListComponent {
// Properties to hold the new student input values
newStudentName: string = '';
newStudentAge: number | null = null;

// List of students in the classroom
classroomList: { name: string; age: number }[] = [
  { name: 'John Doe', age: 15 },
  { name: 'Jane Smith', age: 14 },
  { name: 'Emily Johnson', age: 16 },
];

// Property for search input
searchQuery: string = '';

// Property to hold the index of the student being edited
editIndex: number | null = null;

// Temporary properties to store the edited student values
editedStudentName: string = '';
editedStudentAge: number | null = null;

constructor(private classroomListService: ClassroomListService) {}


// Method to add a new student to the list
addStudent() {
  if (this.newStudentName.trim() && this.newStudentAge !== null) {
    this.classroomList.push({ name: this.newStudentName, age: this.newStudentAge });
    this.newStudentName = ''; // Reset input field
    this.newStudentAge = null; // Reset input field
  }
}

// Method to get the filtered list of students based on the search query
getFilteredList(): { name: string; age: number }[] {
  if (this.searchQuery.trim()) {
    return this.classroomList.filter(student =>
      student.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
  return this.classroomList;
}

// Method to edit a student
editStudent(index: number) {
  this.editIndex = index;
  this.editedStudentName = this.classroomList[index].name;
  this.editedStudentAge = this.classroomList[index].age;
}

// Method to save the edited student
saveEdit() {
  if (this.editIndex !== null) {
    this.classroomList[this.editIndex] = {
      name: this.editedStudentName,
      age: this.editedStudentAge!
    };
    this.editIndex = null; // Exit edit mode
    this.editedStudentName = ''; // Reset edit input
    this.editedStudentAge = null; // Reset edit input
  }
}

// Method to remove a student from the list
removeStudent(index: number) {
  this.classroomList.splice(index, 1);
}
}

// classroom-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ClassroomListService {
  private classroomList: { name: string; age: number }[] = [
    { name: 'John Doe', age: 15 },
    { name: 'Jane Smith', age: 14 },
    { name: 'Emily Johnson', age: 16 },
  ];

  constructor() { }

 // Method to get the list of students
 getClassroomList() {
  return this.classroomList;
}

// Method to add a new student
addStudent(student: { name: string; age: number }) {
  this.classroomList.push(student);
}

// Method to edit an existing student
editStudent(index: number, student: { name: string; age: number }) {
  this.classroomList[index] = student;
}

// Method to remove a student
removeStudent(index: number) {
  this.classroomList.splice(index, 1);
}
}

OUTPUT:

24. Inventory List

// updated inventory-list.component.ts
import { Component } from '@angular/core';
import { InventoryListService } from '../../services/inventory-list.service';


// Define the InventoryItem interface
interface InventoryItem {
  name: string;
  quantity: number;
  price: number;
}

@Component({
  selector: 'app-inventory-list',
  templateUrl: './inventory-list.component.html',
  styleUrl: './inventory-list.component.css'
})
export class InventoryListComponent {
 // Properties to hold new item input values
 newItemName: string = '';
 newItemQuantity: number | null = null;
 newItemPrice: number | null = null;

 // List of items in the inventory
 inventoryList: InventoryItem[] = [
   { name: 'Apples', quantity: 100, price: 50 },
   { name: 'Bananas', quantity: 50, price: 100 },
   { name: 'Oranges', quantity: 80, price: 60 },
 ];

 // Property for search input
 searchQuery: string = '';

 // Property to hold the index of the item being edited
 editIndex: number | null = null;

 // Temporary properties to store the edited item values
 editedItemName: string = '';
 editedItemQuantity: number | null = null;
 editedItemPrice: number | null = null;

 constructor(private inventoryListService: InventoryListService) {}

 // Method to add a new item to the inventory
 addItem() {
   if (this.newItemName.trim() && this.newItemQuantity !== null && this.newItemPrice !== null) {
     this.inventoryList.push({
       name: this.newItemName,
       quantity: this.newItemQuantity,
       price: this.newItemPrice
     });
     this.newItemName = ''; // Reset input fields
     this.newItemQuantity = null;
     this.newItemPrice = null;
   }
 }

 // Method to get the filtered list of items based on the search query
 getFilteredList(): InventoryItem[] {
   if (this.searchQuery.trim()) {
     return this.inventoryList.filter(item =>
       item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
     );
   }
   return this.inventoryList;
 }

 // Method to edit an item
 editItem(index: number) {
   this.editIndex = index;
   this.editedItemName = this.inventoryList[index].name;
   this.editedItemQuantity = this.inventoryList[index].quantity;
   this.editedItemPrice = this.inventoryList[index].price;
 }

 // Method to save the edited item
 saveEdit() {
   if (this.editIndex !== null) {
     this.inventoryList[this.editIndex] = {
       name: this.editedItemName,
       quantity: this.editedItemQuantity!,
       price: this.editedItemPrice!
     };
     this.editIndex = null; // Exit edit mode
     this.editedItemName = ''; // Reset edit input
     this.editedItemQuantity = null; // Reset edit input
     this.editedItemPrice = null; // Reset edit input
   }
 }

 // Method to remove an item from the inventory
 removeItem(index: number) {
   this.inventoryList.splice(index, 1);
 }

}

// inventory-list.service.ts
import { Injectable } from '@angular/core';

// Define the InventoryItem interface
export interface InventoryItem {
  name: string;
  quantity: number;
  price: number;
}

@Injectable({
  providedIn: 'root'
})
export class InventoryListService {
// List of items in the inventory
private inventoryList: InventoryItem[] = [
  { name: 'Apples', quantity: 100, price: 50 },
  { name: 'Bananas', quantity: 50, price: 100 },
  { name: 'Oranges', quantity: 80, price: 60 },
];
  constructor() { }

 // Method to get the inventory list
 getInventory(): InventoryItem[] {
  return this.inventoryList;
}

// Method to add a new item to the inventory
addItem(item: InventoryItem) {
  this.inventoryList.push(item);
}

// Method to edit an item
editItem(index: number, item: InventoryItem) {
  this.inventoryList[index] = item;
}

// Method to remove an item from the inventory
removeItem(index: number) {
  this.inventoryList.splice(index, 1);
}

// Method to filter the inventory list based on the search query
filterInventory(query: string): InventoryItem[] {
  return this.inventoryList.filter(item =>
    item.name.toLowerCase().includes(query.toLowerCase())
  );
}


}

OUTPUT:

25. Lecture List

// updated lecture-list.component.ts
import { Component } from '@angular/core';
import { LectureListService } from '../../services/lecture-list.service';

// Define the Lecture interface
interface Lecture {
  title: string;
  date: string;
  time: string;
}

@Component({
  selector: 'app-lecture-list',
  templateUrl: './lecture-list.component.html',
  styleUrl: './lecture-list.component.css'
})
export class LectureListComponent {
 // Properties to hold new lecture input values
 newLectureTitle: string = '';
 newLectureDate: string = '';
 newLectureTime: string = '';

 // List of lectures scheduled for a course
 lectureList: Lecture[] = [
   { title: 'Introduction to Angular', date: '2024-10-01', time: '10:00 AM' },
   { title: 'Advanced TypeScript', date: '2024-10-08', time: '11:00 AM' },
   { title: 'Building Responsive Websites', date: '2024-10-15', time: '09:00 AM' },
 ];

 // Property for search input
 searchQuery: string = '';

 // Property to hold the index of the lecture being edited
 editIndex: number | null = null;

 // Temporary properties to store the edited lecture values
 editedLectureTitle: string = '';
 editedLectureDate: string = '';
 editedLectureTime: string = '';

 constructor(private lecturelistService: LectureListService) {}

 // Method to add a new lecture to the list
 addLecture() {
   if (this.newLectureTitle.trim() && this.newLectureDate.trim() && this.newLectureTime.trim()) {
     this.lectureList.push({
       title: this.newLectureTitle,
       date: this.newLectureDate,
       time: this.newLectureTime
     });
     this.newLectureTitle = ''; // Reset input fields
     this.newLectureDate = '';
     this.newLectureTime = '';
   }
 }

 // Method to get the filtered list of lectures based on the search query
 getFilteredList(): Lecture[] {
   if (this.searchQuery.trim()) {
     return this.lectureList.filter(lecture =>
       lecture.title.toLowerCase().includes(this.searchQuery.toLowerCase())
     );
   }
   return this.lectureList;
 }

 // Method to edit a lecture
 editLecture(index: number) {
   this.editIndex = index;
   this.editedLectureTitle = this.lectureList[index].title;
   this.editedLectureDate = this.lectureList[index].date;
   this.editedLectureTime = this.lectureList[index].time;
 }

 // Method to save the edited lecture
 saveEdit() {
   if (this.editIndex !== null) {
     this.lectureList[this.editIndex] = {
       title: this.editedLectureTitle,
       date: this.editedLectureDate,
       time: this.editedLectureTime
     };
     this.editIndex = null; // Exit edit mode
     this.editedLectureTitle = ''; // Reset edit input
     this.editedLectureDate = ''; // Reset edit input
     this.editedLectureTime = ''; // Reset edit input
   }
 }

 // Method to remove a lecture from the list
 removeLecture(index: number) {
   this.lectureList.splice(index, 1);
 }


}

// lecture-list.service.ts
import { Injectable } from '@angular/core';

// Define the Lecture interface
export interface Lecture {
  title: string;
  date: string;
  time: string;
}

@Injectable({
  providedIn: 'root'
})
export class LectureListService {
// List of lectures scheduled for a course
private lectureList: Lecture[] = [
  { title: 'Introduction to Angular', date: '2024-10-01', time: '10:00 AM' },
  { title: 'Advanced TypeScript', date: '2024-10-08', time: '11:00 AM' },
  { title: 'Building Responsive Websites', date: '2024-10-15', time: '09:00 AM' },
];

  constructor() { }
 // Method to get the list of lectures
 getLectures(): Lecture[] {
  return this.lectureList;
}

// Method to add a new lecture
addLecture(lecture: Lecture) {
  this.lectureList.push(lecture);
}

// Method to edit a lecture
editLecture(index: number, lecture: Lecture) {
  this.lectureList[index] = lecture;
}

// Method to remove a lecture
removeLecture(index: number) {
  this.lectureList.splice(index, 1);
}

// Method to filter lectures based on a search query
filterLectures(query: string): Lecture[] {
  if (query.trim()) {
    return this.lectureList.filter(lecture =>
      lecture.title.toLowerCase().includes(query.toLowerCase())
    );
  }
  return this.lectureList;
}
}

OUTPUT:

26. Stationery List

// updated stationery-list.component.ts
import { Component } from '@angular/core';
import { StationeryListService } from '../../services/stationery-list.service';; // Import the service

// Define the Stationery interface
interface Stationery {
  name: string;
  quantity: number;
}

@Component({
  selector: 'app-stationery-list',
  templateUrl: './stationery-list.component.html',
  styleUrl: './stationery-list.component.css'
})
export class StationeryListComponent {
// Properties to hold new stationery input values
newStationeryName: string = '';
newStationeryQuantity: number = 1;

// List of stationery items
stationeryList: Stationery[] = [
  { name: 'Pen', quantity: 10 },
  { name: 'Pencil', quantity: 20 },
  { name: 'Notebook', quantity: 5 },
];

// Property for search input
searchQuery: string = '';

// Property to hold the index of the stationery being edited
editIndex: number | null = null;

// Temporary properties to store the edited stationery values
editedStationeryName: string = '';
editedStationeryQuantity: number = 0;

constructor(private stationeryListService: StationeryListService) {
  this.stationeryList = this.stationeryListService.getStationeryItems(); // Load items from service
}

// Method to add a new stationery item to the list
addStationery() {
  if (this.newStationeryName.trim() && this.newStationeryQuantity > 0) {
    this.stationeryList.push({
      name: this.newStationeryName,
      quantity: this.newStationeryQuantity
    });
    this.newStationeryName = ''; // Reset input fields
    this.newStationeryQuantity = 1;
  }
}

// Method to get the filtered list of stationery items based on the search query
getFilteredList(): Stationery[] {
  if (this.searchQuery.trim()) {
    return this.stationeryList.filter(stationery =>
      stationery.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
  return this.stationeryList;
}

// Method to edit a stationery item
editStationery(index: number) {
  this.editIndex = index;
  this.editedStationeryName = this.stationeryList[index].name;
  this.editedStationeryQuantity = this.stationeryList[index].quantity;
}

// Method to save the edited stationery
saveEdit() {
  if (this.editIndex !== null) {
    this.stationeryList[this.editIndex] = {
      name: this.editedStationeryName,
      quantity: this.editedStationeryQuantity
    };
    this.editIndex = null; // Exit edit mode
    this.editedStationeryName = ''; // Reset edit input
    this.editedStationeryQuantity = 0; // Reset edit input
  }
}

// Method to remove a stationery item from the list
removeStationery(index: number) {
  this.stationeryList.splice(index, 1);
}

}

// stationery-list.service.ts
import { Injectable } from '@angular/core';

interface Stationery {
  name: string;
  quantity: number;
}

@Injectable({
  providedIn: 'root'
})
export class StationeryListService {
  private stationeryList: Stationery[] = [
    { name: 'Pen', quantity: 10 },
    { name: 'Pencil', quantity: 20 },
    { name: 'Notebook', quantity: 5 }
  ];

  constructor() { }

  getStationeryItems(): Stationery[] {
    return this.stationeryList;
  }

  addStationeryItem(item: Stationery) {
    this.stationeryList.push(item);
  }

  updateStationeryItem(index: number, updatedItem: Stationery) {
    this.stationeryList[index] = updatedItem;
  }

  removeStationeryItem(index: number) {
    this.stationeryList.splice(index, 1);
  }
}

OUTPUT:

27. Flower List

// updated flower-list.component.ts
import { Component } from '@angular/core';
import { FlowerListService } from '../../services/flower-list.service';


// Define the Flower interface
interface Flower {
  name: string;
  color: string;
  quantity: number;
}

@Component({
  selector: 'app-flower-list',
  templateUrl: './flower-list.component.html',
  styleUrl: './flower-list.component.css'
})
export class FlowerListComponent {
   // Properties for new flower input values
   newFlowerName: string = '';
   newFlowerColor: string = '';
   newFlowerQuantity: number = 0;

   // List of flowers
   flowerList: Flower[] = [
     { name: 'Rose', color: 'Red', quantity: 10 },
     { name: 'Lily', color: 'White', quantity: 5 },
     { name: 'Tulip', color: 'Yellow', quantity: 8 },
   ];

   // Property for search input
   searchQuery: string = '';

   // Property to hold the index of the flower being edited
   editIndex: number | null = null;

   // Temporary properties to store the edited flower values
   editedFlowerName: string = '';
   editedFlowerColor: string = '';
   editedFlowerQuantity: number = 0;

   constructor(private flowerService: FlowerListService) {
    this.flowerList = this.flowerService.getFlowerItems(); // Load flowers from service
  }

   // Method to add a new flower to the list
   addFlower() {
     if (this.newFlowerName.trim() && this.newFlowerColor.trim() && this.newFlowerQuantity > 0) {
       this.flowerList.push({
         name: this.newFlowerName,
         color: this.newFlowerColor,
         quantity: this.newFlowerQuantity
       });
       this.newFlowerName = ''; // Reset input fields
       this.newFlowerColor = '';
       this.newFlowerQuantity = 0;
     }
   }

   // Method to get the filtered list of flowers based on the search query
   getFilteredList(): Flower[] {
     if (this.searchQuery.trim()) {
       return this.flowerList.filter(flower =>
         flower.name.toLowerCase().includes(this.searchQuery.toLowerCase())
       );
     }
     return this.flowerList;
   }

   // Method to edit a flower item
   editFlower(index: number) {
     this.editIndex = index;
     this.editedFlowerName = this.flowerList[index].name;
     this.editedFlowerColor = this.flowerList[index].color;
     this.editedFlowerQuantity = this.flowerList[index].quantity;
   }

   // Method to save the edited flower
   saveEdit() {
     if (this.editIndex !== null) {
       this.flowerList[this.editIndex] = {
         name: this.editedFlowerName,
         color: this.editedFlowerColor,
         quantity: this.editedFlowerQuantity
       };
       this.editIndex = null; // Exit edit mode
       this.editedFlowerName = ''; // Reset edit input
       this.editedFlowerColor = ''; // Reset edit input
       this.editedFlowerQuantity = 0; // Reset edit input
     }
   }

   // Method to remove a flower from the list
   removeFlower(index: number) {
     this.flowerList.splice(index, 1);
   }

}

// flower-list.service.ts
import { Injectable } from '@angular/core';

// Define the Flower interface
interface Flower {
  name: string;
  color: string;
  quantity: number;
}

@Injectable({
  providedIn: 'root'
})
export class FlowerListService {
// Initial list of flowers
private flowerList: Flower[] = [
  { name: 'Rose', color: 'Red', quantity: 10 },
  { name: 'Lily', color: 'White', quantity: 5 },
  { name: 'Tulip', color: 'Yellow', quantity: 8 },
];

  constructor() { }

  // Method to get all flower items
  getFlowerItems(): Flower[] {
    return this.flowerList;
  }

  // Method to add a new flower to the list
  addFlowerItem(flower: Flower) {
    this.flowerList.push(flower);
  }

  // Method to update a flower item
  updateFlowerItem(index: number, updatedFlower: Flower) {
    this.flowerList[index] = updatedFlower;
  }

  // Method to remove a flower item
  removeFlowerItem(index: number) {
    this.flowerList.splice(index, 1);
  }

}

OUTPUT:

28. Destination List

// updated destination-list.component.ts
import { Component } from '@angular/core';
import { DestinationListService } from '../../services/destination-list.service' // Import the service

// Define the Destination interface
interface Destination {
  name: string;
  country: string;
  duration: number; // Duration in days
}

@Component({
  selector: 'app-destination-list',
  templateUrl: './destination-list.component.html',
  styleUrl: './destination-list.component.css'
})
export class DestinationListComponent {
// Properties for new destination input values
newDestinationName: string = '';
newDestinationCountry: string = '';
newDestinationDuration: number = 0;

// List of destinations
destinationList: Destination[] = [
  { name: 'Paris', country: 'France', duration: 5 },
  { name: 'Tokyo', country: 'Japan', duration: 7 },
  { name: 'New York', country: 'USA', duration: 4 },
];

// Property for search input
searchQuery: string = '';

// Property to hold the index of the destination being edited
editIndex: number | null = null;

// Temporary properties to store the edited destination values
editedDestinationName: string = '';
editedDestinationCountry: string = '';
editedDestinationDuration: number = 0;

constructor(private destinationService: DestinationListService) {
  // Fetch the destination list from the service
  this.destinationList = this.destinationService.getDestinations();
}

// Method to add a new destination to the list
addDestination() {
  if (this.newDestinationName.trim() && this.newDestinationCountry.trim() && this.newDestinationDuration > 0) {
    this.destinationList.push({
      name: this.newDestinationName,
      country: this.newDestinationCountry,
      duration: this.newDestinationDuration
    });
    this.newDestinationName = ''; // Reset input fields
    this.newDestinationCountry = '';
    this.newDestinationDuration = 1;
  }
}

// Method to get the filtered list of destinations based on the search query
getFilteredList(): Destination[] {
  if (this.searchQuery.trim()) {
    return this.destinationList.filter(destination =>
      destination.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
  return this.destinationList;
}

// Method to edit a destination item
editDestination(index: number) {
  this.editIndex = index;
  this.editedDestinationName = this.destinationList[index].name;
  this.editedDestinationCountry = this.destinationList[index].country;
  this.editedDestinationDuration = this.destinationList[index].duration;
}

// Method to save the edited destination
saveEdit() {
  if (this.editIndex !== null) {
    this.destinationList[this.editIndex] = {
      name: this.editedDestinationName,
      country: this.editedDestinationCountry,
      duration: this.editedDestinationDuration
    };
    this.editIndex = null; // Exit edit mode
    this.editedDestinationName = ''; // Reset edit input
    this.editedDestinationCountry = ''; // Reset edit input
    this.editedDestinationDuration = 0; // Reset edit input
  }
}

// Method to remove a destination from the list
removeDestination(index: number) {
  this.destinationList.splice(index, 1);
}

}

// destination-list.service.ts
import { Injectable } from '@angular/core';

// Define the Destination interface

interface Destination {
  name: string;
  country: string;
  duration: number; // Duration in days
}

@Injectable({
  providedIn: 'root'
})
export class DestinationListService {
 // List of destinations
 private destinationList: Destination[] = [
  { name: 'Paris', country: 'France', duration: 5 },
  { name: 'Tokyo', country: 'Japan', duration: 7 },
  { name: 'New York', country: 'USA', duration: 4 },
];

  constructor() { }

 // Method to get the list of destinations
 getDestinations(): Destination[] {
  return this.destinationList;
}

// Method to add a new destination to the list
addDestination(destination: Destination): void {
  this.destinationList.push(destination);
}

// Method to edit a destination
editDestination(index: number, updatedDestination: Destination): void {
  this.destinationList[index] = updatedDestination;
}

// Method to remove a destination from the list
removeDestination(index: number): void {
  this.destinationList.splice(index, 1);
}

}

OUTPUT:

29. Laptop List

// updated laptop-list.component.ts
import { Component } from '@angular/core';
import { LaptopListService } from '../../services/laptop-list.service'; // Import the service.

// Define the Laptop interface
interface Laptop {
  model: string;
  brand: string;
  specifications: string; // Specifications as a string
}

@Component({
  selector: 'app-laptop-list',
  templateUrl: './laptop-list.component.html',
  styleUrl: './laptop-list.component.css'
})
export class LaptopListComponent {
   // Properties for new laptop input values
   newLaptopModel: string = '';
   newLaptopBrand: string = '';
   newLaptopSpecifications: string = '';

   // List of laptops
   laptopList: Laptop[] = [
     { model: 'XPS 13', brand: 'Dell', specifications: 'Intel i7, 16GB RAM, 512GB SSD' },
     { model: 'MacBook Air', brand: 'Apple', specifications: 'Apple M1, 8GB RAM, 256GB SSD' },
     { model: 'ThinkPad X1', brand: 'Lenovo', specifications: 'Intel i7, 16GB RAM, 1TB SSD' },
   ];

   // Property for search input
   searchQuery: string = '';

   // Property to hold the index of the laptop being edited
   editIndex: number | null = null;

   // Temporary properties to store the edited laptop values
   editedLaptopModel: string = '';
   editedLaptopBrand: string = '';
   editedLaptopSpecifications: string = '';

   constructor(private laptopService: LaptopListService) {
    // Fetch the laptop list from the service
    this.laptopList = this.laptopService.getLaptops();
  }

   // Method to add a new laptop to the list
   addLaptop() {
     if (this.newLaptopModel.trim() && this.newLaptopBrand.trim() && this.newLaptopSpecifications.trim()) {
       this.laptopList.push({
         model: this.newLaptopModel,
         brand: this.newLaptopBrand,
         specifications: this.newLaptopSpecifications
       });
       this.newLaptopModel = ''; // Reset input fields
       this.newLaptopBrand = '';
       this.newLaptopSpecifications = '';
     }
   }

   // Method to get the filtered list of laptops based on the search query
   getFilteredList(): Laptop[] {
     if (this.searchQuery.trim()) {
       return this.laptopList.filter(laptop =>
         laptop.model.toLowerCase().includes(this.searchQuery.toLowerCase())
       );
     }
     return this.laptopList;
   }

   // Method to edit a laptop item
   editLaptop(index: number) {
     this.editIndex = index;
     this.editedLaptopModel = this.laptopList[index].model;
     this.editedLaptopBrand = this.laptopList[index].brand;
     this.editedLaptopSpecifications = this.laptopList[index].specifications;
   }

   // Method to save the edited laptop
   saveEdit() {
     if (this.editIndex !== null) {
       this.laptopList[this.editIndex] = {
         model: this.editedLaptopModel,
         brand: this.editedLaptopBrand,
         specifications: this.editedLaptopSpecifications
       };
       this.editIndex = null; // Exit edit mode
       this.editedLaptopModel = ''; // Reset edit input
       this.editedLaptopBrand = ''; // Reset edit input
       this.editedLaptopSpecifications = ''; // Reset edit input
     }
   }

   // Method to remove a laptop from the list
   removeLaptop(index: number) {
     this.laptopList.splice(index, 1);
   }

}

// laptop-list.service.ts
import { Injectable } from '@angular/core';

// Define the Laptop interface
interface Laptop {
  model: string;
  brand: string;
  specifications: string; // Specifications as a string
}

@Injectable({
  providedIn: 'root'
})
export class LaptopListService {
  private laptopList: Laptop[] = [
    { model: 'XPS 13', brand: 'Dell', specifications: 'Intel i7, 16GB RAM, 512GB SSD' },
    { model: 'MacBook Air', brand: 'Apple', specifications: 'Apple M1, 8GB RAM, 256GB SSD' },
    { model: 'ThinkPad X1', brand: 'Lenovo', specifications: 'Intel i7, 16GB RAM, 1TB SSD' },
  ];
   // Method to get the list of laptops
   getLaptops(): Laptop[] {
    return this.laptopList;
  }

  // Method to add a new laptop to the list
  addLaptop(laptop: Laptop) {
    this.laptopList.push(laptop);
  }

  // Method to edit an existing laptop in the list
  editLaptop(index: number, updatedLaptop: Laptop) {
    this.laptopList[index] = updatedLaptop;
  }

  // Method to remove a laptop from the list
  removeLaptop(index: number) {
    this.laptopList.splice(index, 1);
  }

  constructor() { }
}

OUTPUT:

30. Laptop Specifications List

// updated laptop-specifications-list.component.ts
import { Component } from '@angular/core';

// Define the LaptopSpecification interface
interface LaptopSpecification {
  model: string;
  processor: string;
  ram: string; // RAM size
  storage: string; // Storage type and size
  graphics: string; // Graphics card
}

@Component({
  selector: 'app-laptop-specifications-list',
  templateUrl: './laptop-specifications-list.component.html',
  styleUrl: './laptop-specifications-list.component.css'
})
export class LaptopSpecificationsListComponent {
   // Properties for new specification input values
   newSpecModel: string = '';
   newSpecProcessor: string = '';
   newSpecRam: string = '';
   newSpecStorage: string = '';
   newSpecGraphics: string = '';

   // List of laptop specifications
   specificationsList: LaptopSpecification[] = [
     { model: 'XPS 13', processor: 'Intel i7', ram: '16GB', storage: '512GB SSD', graphics: 'Integrated' },
     { model: 'MacBook Air', processor: 'Apple M1', ram: '8GB', storage: '256GB SSD', graphics: 'Integrated' },
     { model: 'ThinkPad X1', processor: 'Intel i7', ram: '16GB', storage: '1TB SSD', graphics: 'NVIDIA GeForce' },
   ];

   // Property for search input
   searchQuery: string = '';

   // Property to hold the index of the specification being edited
   editIndex: number | null = null;

   // Temporary properties to store the edited specification values
   editedSpecModel: string = '';
   editedSpecProcessor: string = '';
   editedSpecRam: string = '';
   editedSpecStorage: string = '';
   editedSpecGraphics: string = '';

   // Method to add a new specification to the list
   addSpecification() {
     if (this.newSpecModel.trim() && this.newSpecProcessor.trim() &&
         this.newSpecRam.trim() && this.newSpecStorage.trim() && this.newSpecGraphics.trim()) {
       this.specificationsList.push({
         model: this.newSpecModel,
         processor: this.newSpecProcessor,
         ram: this.newSpecRam,
         storage: this.newSpecStorage,
         graphics: this.newSpecGraphics
       });
       // Reset input fields
       this.newSpecModel = '';
       this.newSpecProcessor = '';
       this.newSpecRam = '';
       this.newSpecStorage = '';
       this.newSpecGraphics = '';
     }
   }

   // Method to get the filtered list of specifications based on the search query
   getFilteredSpecifications(): LaptopSpecification[] {
     if (this.searchQuery.trim()) {
       return this.specificationsList.filter(spec =>
         spec.model.toLowerCase().includes(this.searchQuery.toLowerCase())
       );
     }
     return this.specificationsList;
   }

   // Method to edit a specification item
   editSpecification(index: number) {
     this.editIndex = index;
     this.editedSpecModel = this.specificationsList[index].model;
     this.editedSpecProcessor = this.specificationsList[index].processor;
     this.editedSpecRam = this.specificationsList[index].ram;
     this.editedSpecStorage = this.specificationsList[index].storage;
     this.editedSpecGraphics = this.specificationsList[index].graphics;
   }

   // Method to save the edited specification
   saveEdit() {
     if (this.editIndex !== null) {
       this.specificationsList[this.editIndex] = {
         model: this.editedSpecModel,
         processor: this.editedSpecProcessor,
         ram: this.editedSpecRam,
         storage: this.editedSpecStorage,
         graphics: this.editedSpecGraphics
       };
       this.editIndex = null; // Exit edit mode
       // Reset edit input
       this.editedSpecModel = '';
       this.editedSpecProcessor = '';
       this.editedSpecRam = '';
       this.editedSpecStorage = '';
       this.editedSpecGraphics = '';
     }
   }

   // Method to remove a specification from the list
   removeSpecification(index: number) {
     this.specificationsList.splice(index, 1);
   }

}

// laptop-specifications-list.service.ts
import { Injectable } from '@angular/core';

// Define the LaptopSpecification interface
interface LaptopSpecification {
  model: string;
  processor: string;
  ram: string; // RAM size
  storage: string; // Storage type and size
  graphics: string; // Graphics card
}

@Injectable({
  providedIn: 'root'
})
export class LaptopSpecificationsListService {
 // List of laptop specifications
 private specificationsList: LaptopSpecification[] = [
  { model: 'XPS 13', processor: 'Intel i7', ram: '16GB', storage: '512GB SSD', graphics: 'Integrated' },
  { model: 'MacBook Air', processor: 'Apple M1', ram: '8GB', storage: '256GB SSD', graphics: 'Integrated' },
  { model: 'ThinkPad X1', processor: 'Intel i7', ram: '16GB', storage: '1TB SSD', graphics: 'NVIDIA GeForce' },
];

  constructor() { }

 // Method to get the list of specifications
 getSpecifications(): LaptopSpecification[] {
  return this.specificationsList;
}

// Method to add a new specification
addSpecification(specification: LaptopSpecification) {
  this.specificationsList.push(specification);
}

// Method to edit an existing specification
editSpecification(index: number, updatedSpecification: LaptopSpecification) {
  this.specificationsList[index] = updatedSpecification;
}

// Method to remove a specification
removeSpecification(index: number) {
  this.specificationsList.splice(index, 1);
}
}

OUTPUT:

31. Computer Hardware List

// updated computer-hardware-list.component.ts
import { Component } from '@angular/core';
import { ComputerHardwareListService} from '../../services/computer-hardware-list.service'; // Import the service


// Define the Hardware interface
interface Hardware {
  name: string;
  type: string; // Type of hardware (e.g., CPU, GPU, RAM, etc.)
  brand: string; // Brand name
  specifications: string; // Key specifications
}

@Component({
  selector: 'app-computer-hardware-list',
  templateUrl: './computer-hardware-list.component.html',
  styleUrl: './computer-hardware-list.component.css'
})
export class ComputerHardwareListComponent {
  // Properties for new hardware input values
  newHardwareName: string = '';
  newHardwareType: string = '';
  newHardwareBrand: string = '';
  newHardwareSpecifications: string = '';

  // List of computer hardware components
  hardwareList: Hardware[] = [
    { name: 'Intel Core i9', type: 'CPU', brand: 'Intel', specifications: '10 cores, 20 threads' },
    { name: 'NVIDIA GeForce RTX 3080', type: 'GPU', brand: 'NVIDIA', specifications: '10GB GDDR6X' },
    { name: 'Corsair Vengeance LPX', type: 'RAM', brand: 'Corsair', specifications: '16GB DDR4' },
  ];

  // Property for search input
  searchQuery: string = '';

  // Property to hold the index of the hardware item being edited
  editIndex: number | null = null;

  // Temporary properties to store the edited hardware values
  editedHardwareName: string = '';
  editedHardwareType: string = '';
  editedHardwareBrand: string = '';
  editedHardwareSpecifications: string = '';

  constructor(private computerHardwareListService: ComputerHardwareListService) {
    // Fetch the hardware list from the service
    this.hardwareList = this.computerHardwareListService.getHardwareList();
  }

  // Method to add a new hardware item to the list
  addHardware() {
    if (this.newHardwareName.trim() && this.newHardwareType.trim() &&
        this.newHardwareBrand.trim() && this.newHardwareSpecifications.trim()) {
      this.hardwareList.push({
        name: this.newHardwareName,
        type: this.newHardwareType,
        brand: this.newHardwareBrand,
        specifications: this.newHardwareSpecifications
      });
      // Reset input fields
      this.newHardwareName = '';
      this.newHardwareType = '';
      this.newHardwareBrand = '';
      this.newHardwareSpecifications = '';
    }
  }

  // Method to get the filtered list of hardware based on the search query
  getFilteredHardware(): Hardware[] {
    if (this.searchQuery.trim()) {
      return this.hardwareList.filter(hw =>
        hw.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
    return this.hardwareList;
  }

  // Method to edit a hardware item
  editHardware(index: number) {
    this.editIndex = index;
    this.editedHardwareName = this.hardwareList[index].name;
    this.editedHardwareType = this.hardwareList[index].type;
    this.editedHardwareBrand = this.hardwareList[index].brand;
    this.editedHardwareSpecifications = this.hardwareList[index].specifications;
  }

  // Method to save the edited hardware
  saveEdit() {
    if (this.editIndex !== null) {
      this.hardwareList[this.editIndex] = {
        name: this.editedHardwareName,
        type: this.editedHardwareType,
        brand: this.editedHardwareBrand,
        specifications: this.editedHardwareSpecifications
      };
      this.editIndex = null; // Exit edit mode
      // Reset edit input
      this.editedHardwareName = '';
      this.editedHardwareType = '';
      this.editedHardwareBrand = '';
      this.editedHardwareSpecifications = '';
    }
  }

  // Method to remove a hardware item from the list
  removeHardware(index: number) {
    this.hardwareList.splice(index, 1);
  }

}

// computer-hardware-list.service.ts
import { Injectable } from '@angular/core';

// Define the Hardware interface
interface Hardware {
  name: string;
  type: string; // Type of hardware (e.g., CPU, GPU, RAM, etc.)
  brand: string; // Brand name
  specifications: string; // Key specifications
}


@Injectable({
  providedIn: 'root'
})
export class ComputerHardwareListService {
// List of computer hardware components
hardwareList: Hardware[] = [
  { name: 'Intel Core i9', type: 'CPU', brand: 'Intel', specifications: '10 cores, 20 threads' },
  { name: 'NVIDIA GeForce RTX 3080', type: 'GPU', brand: 'NVIDIA', specifications: '10GB GDDR6X' },
  { name: 'Corsair Vengeance LPX', type: 'RAM', brand: 'Corsair', specifications: '16GB DDR4' },
];

  constructor() { }
 // Method to get the list of hardware items
 getHardwareList(): Hardware[] {
  return this.hardwareList;
}

// Method to add a new hardware item
addHardware(hardware: Hardware) {
  this.hardwareList.push(hardware);
}

// Method to edit an existing hardware item
editHardware(index: number, updatedHardware: Hardware) {
  this.hardwareList[index] = updatedHardware;
}

// Method to remove a hardware item
removeHardware(index: number) {
  this.hardwareList.splice(index, 1);
}

}

OUTPUT:

32. Mobile App List

// updated mobile-app-list.component.ts
import { Component } from '@angular/core';
import { MobileAppListService } from '../../services/mobile-app-list.service';

// Define the App interface
interface App {
  name: string;
  category: string; // Category of the app (e.g., Social Media, Game, Productivity, etc.)
  rating: number; // App rating
  description: string; // Brief description of the app
}

@Component({
  selector: 'app-mobile-app-list',
  templateUrl: './mobile-app-list.component.html',
  styleUrl: './mobile-app-list.component.css'
})
export class MobileAppListComponent {
   // Properties for new app input values
   newAppName: string = '';
   newAppCategory: string = '';
   newAppRating: number = 0;
   newAppDescription: string = '';

   // List of mobile apps
   appList: App[] = [
     { name: 'WhatsApp', category: 'Social Media', rating: 4.8, description: 'Messaging app' },
     { name: 'Angry Birds', category: 'Game', rating: 4.5, description: 'Fun game with birds' },
     { name: 'Evernote', category: 'Productivity', rating: 4.7, description: 'Note-taking app' },
   ];

   // Property for search input
   searchQuery: string = '';

   // Property to hold the index of the app item being edited
   editIndex: number | null = null;

   // Temporary properties to store the edited app values
   editedAppName: string = '';
   editedAppCategory: string = '';
   editedAppRating: number = 0;
   editedAppDescription: string = '';

   constructor(private mobileAppListService: MobileAppListService) {
    // Fetch the mobile app list from the service
    this.appList = this.mobileAppListService.getMobileAppList(); // Ensure this line is correct
  }

   // Method to add a new app to the list
   addApp() {
     if (this.newAppName.trim() && this.newAppCategory.trim() &&
         this.newAppRating > 0 && this.newAppDescription.trim()) {
       this.appList.push({
         name: this.newAppName,
         category: this.newAppCategory,
         rating: this.newAppRating,
         description: this.newAppDescription
       });
       // Reset input fields
       this.newAppName = '';
       this.newAppCategory = '';
       this.newAppRating = 0;
       this.newAppDescription = '';
     }
   }

   // Method to get the filtered list of apps based on the search query
   getFilteredApps(): App[] {
     if (this.searchQuery.trim()) {
       return this.appList.filter(app =>
         app.name.toLowerCase().includes(this.searchQuery.toLowerCase())
       );
     }
     return this.appList;
   }

   // Method to edit an app item
   editApp(index: number) {
     this.editIndex = index;
     this.editedAppName = this.appList[index].name;
     this.editedAppCategory = this.appList[index].category;
     this.editedAppRating = this.appList[index].rating;
     this.editedAppDescription = this.appList[index].description;
   }

   // Method to save the edited app
   saveEdit() {
     if (this.editIndex !== null) {
       this.appList[this.editIndex] = {
         name: this.editedAppName,
         category: this.editedAppCategory,
         rating: this.editedAppRating,
         description: this.editedAppDescription
       };
       this.editIndex = null; // Exit edit mode
       // Reset edit input
       this.editedAppName = '';
       this.editedAppCategory = '';
       this.editedAppRating = 0;
       this.editedAppDescription = '';
     }
   }

   // Method to remove an app from the list
   removeApp(index: number) {
     this.appList.splice(index, 1);
   }

}

// mobile-app-list.service.ts
import { Injectable } from '@angular/core';

// Define the App interface
interface App {
  name: string;
  category: string; // Category of the app (e.g., Social Media, Game, Productivity, etc.)
  rating: number; // App rating
  description: string; // Brief description of the app
}

@Injectable({
  providedIn: 'root'
})
export class MobileAppListService {
  private mobileAppList: App[] = [
    { name: 'WhatsApp', category: 'Social Media', rating: 4.8, description: 'Messaging app' },
    { name: 'Angry Birds', category: 'Game', rating: 4.5, description: 'Fun game with birds' },
    { name: 'Evernote', category: 'Productivity', rating: 4.7, description: 'Note-taking app' },
  ];


  constructor() { }
 // Method to get the list of mobile apps
 getMobileAppList(): App[] {
  return this.mobileAppList;
}

// Method to add a new mobile app
addMobileApp(app: App) {
  this.mobileAppList.push(app);
}

// Method to edit an existing mobile app
editMobileApp(index: number, updatedApp: App) {
  this.mobileAppList[index] = updatedApp;
}

// Method to remove a mobile app
removeMobileApp(index: number) {
  this.mobileAppList.splice(index, 1);
}

}

OUTPUT:

// updated video-list.component.ts
import { Component } from '@angular/core';
import { VideoListService } from '../../services/video-list.service';

// Define the Video interface
interface Video {
  title: string;       // Title of the video
  genre: string;       // Genre of the video (e.g., Action, Comedy, etc.)
  rating: number;      // Video rating
  description: string; // Brief description of the video
}

@Component({
  selector: 'app-video-list',
  templateUrl: './video-list.component.html',
  styleUrl: './video-list.component.css'
})
export class VideoListComponent {
   // Properties for new video input values
   newVideoTitle: string = '';
   newVideoGenre: string = '';
   newVideoRating: number = 0;
   newVideoDescription: string = '';

   // List of videos
   videoList: Video[] = [
     { title: 'Inception', genre: 'Sci-Fi', rating: 4.8, description: 'A mind-bending thriller' },
     { title: 'The Godfather', genre: 'Crime', rating: 4.9, description: 'A story about a crime family' },
     { title: 'Toy Story', genre: 'Animation', rating: 4.7, description: 'A tale of toys coming to life' },
   ];

   // Property for search input
   searchQuery: string = '';

   // Property to hold the index of the video item being edited
   editIndex: number | null = null;

   // Temporary properties to store the edited video values
   editedVideoTitle: string = '';
   editedVideoGenre: string = '';
   editedVideoRating: number = 0;
   editedVideoDescription: string = '';

   constructor(private videoListService: VideoListService) {
    this.videoList = this.videoListService.getVideoList();
  }

   // Method to add a new video to the list
   addVideo() {
     if (this.newVideoTitle.trim() && this.newVideoGenre.trim() &&
         this.newVideoRating > 0 && this.newVideoDescription.trim()) {
       this.videoList.push({
         title: this.newVideoTitle,
         genre: this.newVideoGenre,
         rating: this.newVideoRating,
         description: this.newVideoDescription
       });
       // Reset input fields
       this.newVideoTitle = '';
       this.newVideoGenre = '';
       this.newVideoRating = 0;
       this.newVideoDescription = '';
     }
   }

   // Method to get the filtered list of videos based on the search query
   getFilteredVideos(): Video[] {
     if (this.searchQuery.trim()) {
       return this.videoList.filter(video =>
         video.title.toLowerCase().includes(this.searchQuery.toLowerCase())
       );
     }
     return this.videoList;
   }

   // Method to edit a video item
   editVideo(index: number) {
     this.editIndex = index;
     this.editedVideoTitle = this.videoList[index].title;
     this.editedVideoGenre = this.videoList[index].genre;
     this.editedVideoRating = this.videoList[index].rating;
     this.editedVideoDescription = this.videoList[index].description;
   }

   // Method to save the edited video
   saveEdit() {
     if (this.editIndex !== null) {
       this.videoList[this.editIndex] = {
         title: this.editedVideoTitle,
         genre: this.editedVideoGenre,
         rating: this.editedVideoRating,
         description: this.editedVideoDescription
       };
       this.editIndex = null; // Exit edit mode
       // Reset edit input
       this.editedVideoTitle = '';
       this.editedVideoGenre = '';
       this.editedVideoRating = 0;
       this.editedVideoDescription = '';
     }
   }

   // Method to remove a video from the list
   removeVideo(index: number) {
     this.videoList.splice(index, 1);
   }

}

// video-list.service.ts
import { Injectable } from '@angular/core';

// Define the Video interface
interface Video {
  title: string;       // Title of the video
  genre: string;       // Genre of the video (e.g., Action, Comedy, etc.)
  rating: number;      // Video rating
  description: string; // Brief description of the video
}

@Injectable({
  providedIn: 'root'
})
export class VideoListService {
  private videoList: Video[] = [
    { title: 'Inception', genre: 'Sci-Fi', rating: 4.8, description: 'A mind-bending thriller' },
    { title: 'The Godfather', genre: 'Crime', rating: 4.9, description: 'A story about a crime family' },
    { title: 'Toy Story', genre: 'Animation', rating: 4.7, description: 'A tale of toys coming to life' },
  ];


  constructor() { }

  // Method to get the list of videos
  getVideoList(): Video[] {
    return this.videoList;
  }

  // Method to add a new video
  addVideo(video: Video) {
    this.videoList.push(video);
  }

  // Method to edit an existing video
  editVideo(index: number, updatedVideo: Video) {
    this.videoList[index] = updatedVideo;
  }

  // Method to remove a video
  removeVideo(index: number) {
    this.videoList.splice(index, 1);
  }
}

OUTPUT:

34. TV Show List

// updated tv-show-list.component.ts
import { Component } from '@angular/core';
import { TvShowListService } from '../../services/tv-show-list.service';

export interface TVShow {
  title: string;
  genre: string;
  imageUrl: string;
}

@Component({
  selector: 'app-tv-show-list',
  templateUrl: './tv-show-list.component.html',
  styleUrl: './tv-show-list.component.css'
})
export class TvShowListComponent {
  tvShows: TVShow[] = [];
  newShow: TVShow = { title: '', genre: '', imageUrl: '' };
  searchTerm: string = '';

  constructor(private tvShowListService: TvShowListService) {
    // Initialize the tvShows list from the service
    this.tvShows = this.tvShowListService.getTvShowList();
  }

  addShow() {
    if (this.newShow.title && this.newShow.genre) {
      this.tvShows.push({ ...this.newShow });
      this.newShow = { title: '', genre: '', imageUrl: '' }; // Reset form
    }
  }

  removeShow(index: number) {
    this.tvShows.splice(index, 1);
  }

  editShow(index: number) {
    this.newShow = { ...this.tvShows[index] };
    this.removeShow(index);
  }

  getFilteredShows(): TVShow[] {
    return this.tvShows.filter(show =>
      show.title.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

}

// tv-show-list.service.ts
import { Injectable } from '@angular/core';

export interface TVShow {
  title: string;
  genre: string;
  imageUrl: string;
}

@Injectable({
  providedIn: 'root'
})
export class TvShowListService {
  private tvShowList: TVShow[] = [
    { title: 'Breaking Bad', genre: 'Drama', imageUrl: 'data:image/jpeg;base64,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' },
    { title: 'Stranger Things', genre: 'Science Fiction', imageUrl: 'data:image/jpeg;base64,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' },
    { title: 'The Office', genre: 'Comedy', imageUrl: 'data:image/jpeg;base64,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' },
  ];

  constructor() { }

  getTvShowList(): TVShow[] {
    return this.tvShowList;
  }

  addTvShow(tvShow: TVShow) {
    this.tvShowList.push(tvShow);
  }

  removeTvShow(index: number) {
    this.tvShowList.splice(index, 1);
  }
}

OUTPUT:

35. Furniture List

// updated furniture-list.component.ts
import { Component } from '@angular/core';
import { FurnitureListService } from '../../services/furniture-list.service';

export interface Furniture {
  name: string;
  category: string;
  price: number;
  imageUrl: string;
}

@Component({
  selector: 'app-furniture-list',
  templateUrl: './furniture-list.component.html',
  styleUrl: './furniture-list.component.css'
})
export class FurnitureListComponent {
  furnitureItems: Furniture[] = [];
  newItem: Furniture = { name: '', category: '', price: 0, imageUrl: '' };
  searchTerm: string = '';

  constructor(private furnitureListService: FurnitureListService) {
    this.furnitureItems = this.furnitureListService.getFurnitureList();
  }

  addFurniture() {
    if (this.newItem.name && this.newItem.category && this.newItem.price) {
      this.furnitureItems.push({ ...this.newItem });
      this.newItem = { name: '', category: '', price: 0, imageUrl: '' }; // Reset form
    }
  }

  removeFurniture(index: number) {
    this.furnitureItems.splice(index, 1);
  }

  editFurniture(index: number) {
    this.newItem = { ...this.furnitureItems[index] };
    this.removeFurniture(index);
  }

  getFilteredItems(): Furniture[] {
    return this.furnitureItems.filter(item =>
      item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

}

// furniture-list.service.ts
import { Injectable } from '@angular/core';

export interface Furniture {
  name: string;
  category: string;
  price: number;
  imageUrl: string;
}

@Injectable({
  providedIn: 'root'
})
export class FurnitureListService {
  // Define the initial furniture list
  private furnitureList: Furniture[] = [
    { name: 'Wooden Chair', category: 'Chair', price: 45.99, imageUrl: 'data:image/jpeg;base64,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' },
    { name: 'Dining Table', category: 'Table', price: 199.99, imageUrl: 'data:image/jpeg;base64,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' },
    { name: 'Leather Sofa', category: 'Sofa', price: 599.99, imageUrl: 'data:image/jpeg;base64,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' }
  ];
  constructor() { }

  getFurnitureList(): Furniture[] {
    return this.furnitureList;
  }

  addFurniture(furniture: Furniture) {
    this.furnitureList.push(furniture);
  }

  removeFurniture(index: number) {
    this.furnitureList.splice(index, 1);
  }
}

OUTPUT:

36. Accessory List

// updated accessory-list.component.ts
import { Component } from '@angular/core';
import { AccessoryListService } from '../../services/accessory-list.service';

export interface Accessory {
  name: string;
  type: string;
  price: number;
  imageUrl: string;
}

@Component({
  selector: 'app-accessory-list',
  templateUrl: './accessory-list.component.html',
  styleUrl: './accessory-list.component.css'
})
export class AccessoryListComponent {
  accessoryItems: Accessory[] = [];
  newItem: Accessory = { name: '', type: '', price: 0, imageUrl: '' };
  searchTerm: string = '';

  constructor(private accessoryListService: AccessoryListService) {
    // Fetch the accessory list from the service
    this.accessoryItems = this.accessoryListService.getAccessoryList(); // Use accessoryItems
  }

  addAccessory() {
    if (this.newItem.name && this.newItem.type && this.newItem.price > 0) { // Check if price is greater than 0
      this.accessoryItems.push({ ...this.newItem });
      this.newItem = { name: '', type: '', price: 0, imageUrl: '' }; // Reset form
    }
  }

  removeAccessory(index: number) {
    this.accessoryItems.splice(index, 1);
  }

  editAccessory(index: number) {
    this.newItem = { ...this.accessoryItems[index] };
    this.removeAccessory(index);
  }

  getFilteredItems(): Accessory[] {
    return this.accessoryItems.filter(item =>
      item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

}

// accessory-list.service.ts
import { Injectable } from '@angular/core';

export interface Accessory {
  name: string;
  type: string; // Type of accessory (e.g., "Jewelry", "Watch", "Belt")
  price: number; // Price of the accessory
  imageUrl: string; // Image URL of the accessory
}

@Injectable({
  providedIn: 'root'
})
export class AccessoryListService {
// Initial list of accessories
private accessoryList: Accessory[] = [
  { name: 'Leather Belt', type: 'Belt', price: 29.99, imageUrl: 'data:image/jpeg;base64,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' },
  { name: 'Wrist Watch', type: 'Watch', price: 89.99, imageUrl: 'data:image/jpeg;base64,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' },
  { name: 'Gold Necklace', type: 'Jewelry', price: 199.99, imageUrl: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUSEhIVFRUVFRUVFRUVFRUVFRUXFRgXFxUVFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGBAQFy0dHiAtLSsrLS0tLS0tLSsrLSstLSsxKy0tLi0tLS0rLS0tKysrLSsrLS0tLS0rLSsrLSsrLf/AABEIAOEA4QMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAACAwABBAUGB//EADYQAAICAQIEAwYFBAEFAAAAAAABAhEDBBITITFBUWHwBSIycYGRFKGxwdEGI0LhYgczUoLx/8QAGAEBAQEBAQAAAAAAAAAAAAAAAAECAwT/xAAjEQEAAwACAgEEAwAAAAAAAAAAAQIRAyESQTEiUWFxEzKB/9oADAMBAAIRAxEAPwD2rQDHSQto5a6FtlWSSBANMNSFWSyYp9kFKQaZnFEUSyGVQosogsohABYnM6Q9iskE+rpdzNpyFiO2TSruaQcK5cgmicUZVbz2hLKKZ0ZFuL3Ci7AaphqZmbCjIg2RkNizHCZogwNCKyR927pLqZ8+oUU2+wjApT5turur6v8A0cOW0z9MfLrSPcn/AIiXgiDtpZj+CF82VZgt6LcUA8R7scFSQDD2MpoamFtlWE4guI0SwoyFOJANCkEmZbCUiYrTZBSmGmZVZZRQEbM+Xn9eX8jMkhWJXzON52Yq6VjOzYRpFtBItnWGJKaBaHUU4lQhoodtK2ECaLQzYU4FETGLIJYPE28368jlyX8YbrXZSfvSS8H9u3+vudLHSRztN1t9X1NqmZ4q53PzK2neoP3Fit5R2YAixakXuOusYOyrB3FWNMEVyBslk6MR0VsRGwWwLeMHhlbit5cBKIQviE4pnF05Mil5+kK4ozLpXFLI5KpqKUedq7k7510Ue18jlyTMZjdckOSPK/sXBFb0EpoV48nZJt1grJYO4lm8TTEQCy9xMBEaKsGeSk34Jt/JK2SegdA7Rf4u1UFcmlz5NRTSd13b7J9FzfVImmUoqnK+vPv9zn5zP9Yb8Y9yXKfvNV0/UU4ts0yhbsuMBFJ3ZJt6gEIUGMRdHRgG4obRZRlWQLcY7CWQ2y1WRsQsoSkFMcitwNlEVbkC5lMFk0FvBcxcpCZ5Ui6Y0OYuWQyT1SESyyl5IumNeTU9kO1XtCUpRUnyUW0k7S3VSTpctsYvy3MzaPHckl3fXn97XT5idZk3TcvF/l2ON528fhqsdOjHMXxjmxzBPMdYljHQ45fHOZxiPOaTHU45f4g5D1AL1IR21ql4m72lpFDCnkae7k4Sg7cpLdi2SbVOLjufJ9GuyPNafM/i/wDFp2+cU7u5d9vJ3Xku4he0JZJJylJxgpRxqUpSaUnbblJttvl35JJLoee/1T4w6R1GvQYZJLrfi33b6t+YzjnFWqCWpO0VyGJl2uMWsqONHVBrVeZcNdlTRaaOStUEtWTF11SHM/F+ZBg3TwWZ8mn8DoAtFRypRaKUzpSxmfJpkRWdZAuKBk07XQTJtdUND+KBLI/AVHIMWQqdlT3MS9I31Zu4gLkBlWmSJKBoYud+BMa0OB0pPvVL5y/1f2MkzTnhLkvK/q+f8fYzOEjnWvtqZKbBlkDlpmBLTm4hNLeYF5WE8RTiaQLkw8MbddFzbfgl1f0RMWGUpKMVbbpJd2bNXhenW3/N00125JqSafT3px59avsc73zqPmViPbLr8tLhrtyl3pp84p91aUvm/Iy450BIpGqVyEmdalmL4xmslm2WtZi+MY9xNwMblnLeoMG8m8Do8chh3EKPe2Sy3EpoYiAtFkoyoHEVPCmPITFc/Lo0ZZ6VrodmgXADhvcuxI5jrzwIRk0SfYaMUcw7E9zr711+nrl17C8mgfa/XYk8cscWnGpO65p+6uTncW1TtpeW7ozlyX9R8y1WvszNNN39vl2/IVtM29hRyHWOoxJOljEywjo5BiaKjBLAKlhOq4FvAquXTw5X1rv/AO3bl+Tza2LEar2NljgvJOLtqlXxdekbVdYyUvBV40cjX5pZJucqt9kqSS5KKXglR0c8HJ2/OvLm3+rf3YiWmM0pk+U/Kzb1Dkyxg7DpT04t4Dqyw7QdpteAF4QjJQNGp4gXjAz0UxzgC4ACQLaQqvoNkELIEspNTDaBaIshGyauKYNhWCEXZRRLAIoGypTpP5EVi1mt2ZMcYuKlKVJOVNxScsjin8VRT5JrqmadjlcpdX4u6XZeu9vuYNPkcsknfKlF1NNJtqT3Q6p0kr6NPn2OojhWsWvNv8dJnKxDLk0qZlyaHwOsynE7Yxrgy07QKbR1dRKKq2rk9sVaTlJpvbFNq5UnS8mIbl0xqpV703fuNqnGKaXPrba5HO1869tRXWeGXa/eXPsr6Pl8S+/IqWo3PmWtDJdXZUtK0Wv3lJNjkQSaMnDaIpNG9TGzYC8CFQyjoZi6mAemFy0xsWRBJoaY5ktKKlpvI7OxAvCXRxHgFSwHclp0JnpS6ORwSzqfhiF0dJsiZGCzErEjUglkEksitCmXuMu8veNMaVIrcI4pN/1/IamHN+v1E6qXu0urpLt15IJz8+xk12So3123N/LHGU235VHn4WJnI0wn2VLdKUve6ut8VGcU/hi6+JbdrUv+R1XLn+hy/ZmB408clUoPa47ty5dHGT6xadq+zRt3GOHqrfJ3Zo3itTqVFNu6it0qTk68lG22+VJIBz5pLq2kl5vz7Lv5GbUYU5RaldNSjJbuUo7o5HKPRNW0r5q6rk7cnJ45EfMs1rqadSnNtulzi6k3GrjPG43yWRe8pSS8k+R08cEkkklXRGfBFRioxVJKl9B28Upn7W1tHKIMsSCWQJM3jDNPTiJ6Y6JHEmK5EtMKeE7Lxi5YAa5VNFqbN8tMJlpyhSzDI5hcsIDgBqWQu0YrZaysDZXyIZ+KQqY2lFJlm5ZC0VtCIZmGokqSFtjpRFSiYloCkTievEpxBaIo3l9dQtL7S4eW1KKlHHPbvUnBSe1Rc6r3WnJXfLdb5Izyl69fQ5maf/ebdfDDq+e62lS6N7G0+3O/PNpysysRsxDqYtTvlkyVtU5uSi2ntT+GN9OSSXkkMeoUVufT1+Zg006hd8q8/qZ552/7kvhi6hadOT+GUqa926uuzS6slbZXZatHeQfLWyT92TWSSSuEo7salFzw2mn7s9r3PsvHdR08LbbnJ3KTuT7Lyjd0l2X6nL0EG/7k7cn0t21bcnFPrW5yrrV9+/QU+xKxs+UloiIyGu/0LUjKphKfTx/g66xjTvoJZDLvJxUNTG2OQNZDBxQ1mKmN6yF7jDxQlmCNpTgZlmGwyjBcsImWnNCmSwMU9OInpzrUgJYwrk8FlnV4KIU1lIQjNawhaKKAMBwCRLMzDRLxipQNUmkm2c3LrJXySS7d2ZxfIycfXr11OJmzVDNJOVKSb2NLlzXSXVNySa/jn09fkyxhunjnGNr+4oyqvn26nL1GKEsUmssdm9Pne5v3Vsikqk3utq0lUb6nG1qzWcnXWsTsdJpsjyxX+MVz59aXfo0+nTvfiOji3yTqoRpRVdvF0l1+J+b+gnSYG6VNRVVHwq0pPxnTab86Xn1MUKVeX8Gax5Z9oan6f2tIJsFgevXrmd8c9N4nr11RW/v6+4py9fuBYxNaeJ6/YF5TPuK3DBq4xOKY95TylG/ilrMc/jEWYrLpLMHDOcvjBLOaR2I6gOOpOMs4S1IHbWcYsxw/xQUdWMHc46Icf8T65EGDokIQqIiERCCF2RFImqDMrTB9h+zFnyNOTjtpuubfKXJeF1+viHJA/wBO51j1ai20sipNOua6VXrkc+XukxJnb22KON41F1VU/wDJU+XvcqqvE8h7Q/6cQlNTxZp4trcoxXvQTbvpa/8Ah29f7Vw6fJKE8kYyW2SUopymp290a5yd306uJwPb/wDXmyNYnCNrrJ7nfhtXr5HjtNInvqfw68deSf6uZn0mTT5Hjy1dboyje2cW3zXdd+Xbz5DU+jQn2j7UeeOmblunwYzyNdpZFFuPk1XTtyG4YUjvwTMx2vJ0GUQJI0TQqUT045azyQtjpIVOIxdKbAlMKSFSQw1TmA5lSAkMTR7yPIJbBsuB+8tZDNuJvCNSyk4pk4hN5Rs4pfFMe8veEbuMQybiGh7NlFspmBRZCzKoQhQEo5+twvlKPKUWpR+aN5CTGq8f/VeTPq9Ss0lOKjjWNQhFdruTm5c7bfbw8DFpPYEm03Cv+U3xJfRfCvzPdPGvL1ZNhy/ij27Rz2iMjpzND7PUF4v82dDaGkXR1rER8OMzMkNC5RNLiLcDbLNKAmUTbKIpwAxSiImjdPGKljKrBKIqSN08YmWMIxNANGuWIXLGBmaKY5wAcShZQTQLQVLI5EoFkDLKKLKPeEogRhFAhlURVMFhUVQFEZZAKZRdlsAaIkWQCqBSDJQC2gJRHUDtKEPGLliNbRTiXUc+WIXPEdBwFyxAc14xU8R05YhUsRRy5YxcsZ0p4hbxFHNljAeM6DxCpYwMLiDKJrljFyxkCKIO2EKPbFlIIwqiIshBRTCBAlglkQEootFNgSiIhAI0UWUBLIQoCUQiCYANA0MolFCnAB4zQU0BkeMXLEbnEDYXRzpYRM8J1JYxcsQ0cqWIVPEdSeIRLCEYOGQ38AhodthIhDCrREQglEiB6/UhAKkX4/L9iEIqo9fXkSXT6fwQgRb7fQrsQgVGRkIRAkfYhAoil19eJCARE7P6fuUQqLfr7loogFf6Kj2+v7kIUC+r+pUyEClTFev1IQIWQhDSP//Z' }
];


  constructor() { }

// Method to get the list of accessories
getAccessoryList(): Accessory[] {
  return this.accessoryList;
}

// Method to add a new accessory
addAccessory(accessory: Accessory) {
  this.accessoryList.push(accessory);
}

// Method to remove an accessory by index
removeAccessory(index: number) {
  this.accessoryList.splice(index, 1);
}
}

OUTPUT:

37. Building List

// updated building-list.component.ts
import { Component } from '@angular/core';
import { BuildingListService } from '../../services/building-list.service';

// Define an interface for Building
interface Building {
  name: string;
  floors: number;
  description: string;
}

@Component({
  selector: 'app-building-list',
  templateUrl: './building-list.component.html',
  styleUrl: './building-list.component.css'
})
export class BuildingListComponent {
  newBuilding = {
    name: '',
    floors: 0,
    description: ''
  };

  buildingList = [
    { name: 'Science Hall', floors: 5, description: 'Main science building' },
    { name: 'Library', floors: 3, description: 'Campus library' }
  ];

  searchTerm = '';
  editingIndex: number | null = null;

  constructor(private buildingListService: BuildingListService) {
    // Fetch the building list from the service
    this.buildingList = this.buildingListService.getBuildingList();
  }

  addBuilding() {
    if (this.editingIndex !== null) {
      this.buildingList[this.editingIndex] = { ...this.newBuilding };
      this.editingIndex = null;
    } else {
      this.buildingList.push({ ...this.newBuilding });
    }
    this.resetForm();
  }

  editBuilding(index: number) {
    this.newBuilding = { ...this.buildingList[index] };
    this.editingIndex = index;
  }

  removeBuilding(index: number) {
    this.buildingList.splice(index, 1);
  }

  getFilteredBuildings() {
    if (!this.searchTerm) {
      return this.buildingList;
    }
    return this.buildingList.filter(building =>
      building.name.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

  resetForm() {
    this.newBuilding = { name: '', floors: 0, description: '' };
  }

}

// building-list.service.ts
import { Injectable } from '@angular/core';

// Define the Building interface
export interface Building {
  name: string;
  floors: number;
  description: string;
}

@Injectable({
  providedIn: 'root'
})
export class BuildingListService {
    private buildingList: Building[] = [
      { name: 'Science Hall', floors: 5, description: 'Main science building' },
      { name: 'Library', floors: 3, description: 'Campus library' }
    ];

  constructor() { }

// Method to get the list of buildings
getBuildingList(): Building[] {
  return this.buildingList;
}

// Method to add a new building to the list
addBuilding(building: Building) {
  this.buildingList.push(building);
}

// Method to remove a building by index
removeBuilding(index: number) {
  this.buildingList.splice(index, 1);
}

// Method to update a building
updateBuilding(index: number, building: Building) {
  this.buildingList[index] = building;
}
}

OUTPUT:

38. Painting List

// updated painting-list.component.ts
import { Component } from '@angular/core';
import { PaintingListService } from '../../services/painting-list.service';

@Component({
  selector: 'app-painting-list',
  templateUrl: './painting-list.component.html',
  styleUrl: './painting-list.component.css'
})
export class PaintingListComponent {
  newPainting = {
    name: '',
    artist: '',
    year: 0,
    imageUrl: ''
  };

  paintingList = [
    { name: 'Mona Lisa', artist: 'Leonardo da Vinci', year: 1503, imageUrl: 'https://i.pinimg.com/474x/3f/90/a4/3f90a40c6f9b5d45e8c57d2afdb6ed48.jpg' },
    { name: 'Starry Night', artist: 'Vincent van Gogh', year: 1889, imageUrl: 'https://i.pinimg.com/564x/4a/9c/fd/4a9cfdec861d304d61a40b06a402fe7f.jpg' }
  ];

  searchTerm = '';
  editingIndex: number | null = null;

  constructor(private paintingListService: PaintingListService) {
    // Fetch the painting list from the service
    this.paintingList = this.paintingListService.getPaintingList();
  }

  addPainting() {
    if (this.editingIndex !== null) {
      this.paintingList[this.editingIndex] = { ...this.newPainting };
      this.editingIndex = null;
    } else {
      this.paintingList.push({ ...this.newPainting });
    }
    this.resetForm();
  }

  editPainting(index: number) {
    this.newPainting = { ...this.paintingList[index] };
    this.editingIndex = index;
  }

  removePainting(index: number) {
    this.paintingList.splice(index, 1);
  }

  getFilteredPaintings() {
    if (!this.searchTerm) {
      return this.paintingList;
    }
    return this.paintingList.filter(painting =>
      painting.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      painting.artist.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

  resetForm() {
    this.newPainting = { name: '', artist: '', year: 0, imageUrl: '' };
  }
}

// painting-list.service.ts
import { Injectable } from '@angular/core';

// Define the Painting interface here
export interface Painting {
  name: string;
  artist: string;
  year: number;
  imageUrl: string;
}

@Injectable({
  providedIn: 'root'
})
export class PaintingListService {
  private paintingList: Painting[] = [
    { name: 'Mona Lisa', artist: 'Leonardo da Vinci', year: 1503, imageUrl: 'https://i.pinimg.com/474x/3f/90/a4/3f90a40c6f9b5d45e8c57d2afdb6ed48.jpg' },
    { name: 'Starry Night', artist: 'Vincent van Gogh', year: 1889, imageUrl: 'https://i.pinimg.com/564x/4a/9c/fd/4a9cfdec861d304d61a40b06a402fe7f.jpg' }
  ];

  constructor() { }

// Get the list of paintings
getPaintingList(): Painting[] {
  return this.paintingList;
}

// Add a new painting
addPainting(painting: Painting) {
  this.paintingList.push(painting);
}

// Remove a painting by index
removePainting(index: number) {
  this.paintingList.splice(index, 1);
}

// Update a painting
updatePainting(index: number, painting: Painting) {
  this.paintingList[index] = painting;
}
}

OUTPUT:

39. Artist List

// updated artist-list.component.ts
import { Component } from '@angular/core';
import { ArtistListService } from '../../services/artist-list.service';

// Define the Artist interface
interface Artist {
  name: string;
  year: number;
  masterpiece: string;
}

@Component({
  selector: 'app-artist-list',
  templateUrl: './artist-list.component.html',
  styleUrls: ['./artist-list.component.css']
})
export class ArtistListComponent {
  newArtist: Artist = { name: '', year: 0, masterpiece: '' };
  searchArtist: string = '';
  artists: Artist[] = [];
  editIndex: number | null = null;

  constructor(private artistListService: ArtistListService) {
    // Fetch the initial artist list from the service
    this.artists = this.artistListService.getArtistList();
  }

  getFilteredArtists(): Artist[] {
    if (!this.searchArtist) {
      return this.artists;
    }
    return this.artists.filter(artist =>
      artist.name.toLowerCase().includes(this.searchArtist.toLowerCase())
    );
  }

  addArtist() {
    if (this.newArtist.name.trim() !== '' && this.newArtist.year > 0 && this.newArtist.masterpiece.trim() !== '') {
      if (this.editIndex !== null) {
        this.artists[this.editIndex] = { ...this.newArtist };
        this.editIndex = null;
      } else {
        this.artists.push({ ...this.newArtist });
      }
      this.resetForm();
      // Update the artist list in the service
      this.artistListService.updateArtistList(this.artists);
    }
  }

  editArtist(index: number) {
    this.newArtist = { ...this.artists[index] };
    this.editIndex = index;
  }

  removeArtist(index: number) {
    this.artists.splice(index, 1);
    // Update the artist list in the service
    this.artistListService.updateArtistList(this.artists);
  }

  resetForm() {
    this.newArtist = { name: '', year: 0, masterpiece: '' };
  }
}

// artist-list.service.ts
import { Component } from '@angular/core';
import { ArtistListService } from '../../services/artist-list.service';

// Define the Artist interface
interface Artist {
  name: string;
  year: number;
  masterpiece: string;
}

@Component({
  selector: 'app-artist-list',
  templateUrl: './artist-list.component.html',
  styleUrls: ['./artist-list.component.css']
})
export class ArtistListComponent {
  newArtist: Artist = { name: '', year: 0, masterpiece: '' };
  searchArtist: string = '';
  artists: Artist[] = [];
  editIndex: number | null = null;

  constructor(private artistListService: ArtistListService) {
    // Fetch the initial artist list from the service
    this.artists = this.artistListService.getArtistList();
  }

  getFilteredArtists(): Artist[] {
    if (!this.searchArtist) {
      return this.artists;
    }
    return this.artists.filter(artist =>
      artist.name.toLowerCase().includes(this.searchArtist.toLowerCase())
    );
  }

  addArtist() {
    if (this.newArtist.name.trim() !== '' && this.newArtist.year > 0 && this.newArtist.masterpiece.trim() !== '') {
      if (this.editIndex !== null) {
        this.artists[this.editIndex] = { ...this.newArtist };
        this.editIndex = null;
      } else {
        this.artists.push({ ...this.newArtist });
      }
      this.resetForm();
      // Update the artist list in the service
      this.artistListService.updateArtistList(this.artists);
    }
  }

  editArtist(index: number) {
    this.newArtist = { ...this.artists[index] };
    this.editIndex = index;
  }

  removeArtist(index: number) {
    this.artists.splice(index, 1);
    // Update the artist list in the service
    this.artistListService.updateArtistList(this.artists);
  }

  resetForm() {
    this.newArtist = { name: '', year: 0, masterpiece: '' };
  }
}

OUTPUT:

40. Composer List

// updated composer-list.component.ts
import { Component } from '@angular/core';
import { ComposerListService } from '../../services/composer-list.service';

// Define the Composer interface
interface Composer {
  name: string;
  year: number;
  masterpiece: string;
}

@Component({
  selector: 'app-composer-list',
  templateUrl: './composer-list.component.html',
  styleUrl: './composer-list.component.css'
})
export class ComposerListComponent {
    newComposer: Composer = { name: '', year: 0, masterpiece: '' };
    searchComposer: string = '';
    composers: Composer[] = [];
    editIndex: number | null = null;

    constructor(private composerListService: ComposerListService) {
      // Fetch the initial composer list from the service
      this.composers = this.composerListService.getComposerList();
    }

    getFilteredComposers(): Composer[] {
      if (!this.searchComposer) {
        return this.composers;
      }
      return this.composers.filter(composer =>
        composer.name.toLowerCase().includes(this.searchComposer.toLowerCase())
      );
    }

    addComposer() {
      if (this.newComposer.name.trim() !== '' && this.newComposer.year > 0 && this.newComposer.masterpiece.trim() !== '') {
        if (this.editIndex !== null) {
          this.composers[this.editIndex] = { ...this.newComposer };
          this.editIndex = null;
        } else {
          this.composers.push({ ...this.newComposer });
        }
        this.resetForm();
        // Update the composer list in the service
        this.composerListService.updateComposerList(this.composers);
      }
    }

    editComposer(index: number) {
      this.newComposer = { ...this.composers[index] };
      this.editIndex = index;
    }

    removeComposer(index: number) {
      this.composers.splice(index, 1);
      // Update the composer list in the service
      this.composerListService.updateComposerList(this.composers);
    }

    resetForm() {
      this.newComposer = { name: '', year: 0, masterpiece: '' };
    }
}

// composer.list.service.ts
import { Injectable } from '@angular/core';

// Define the Composer interface
interface Composer {
  name: string;
  year: number;
  masterpiece: string;
}


@Injectable({
  providedIn: 'root'
})
export class ComposerListService {
  private composers: Composer[] = [
    { name: 'Ludwig van Beethoven', year: 1827, masterpiece: 'Symphony No. 9' },
    { name: 'Wolfgang Amadeus Mozart', year: 1791, masterpiece: 'The Magic Flute' },
    { name: 'Johann Sebastian Bach', year: 1750, masterpiece: 'Brandenburg Concerto' },
    { name: 'Frederic Chopin', year: 1849, masterpiece: 'Nocturne in E-flat major' },
    { name: 'Pyotr Ilyich Tchaikovsky', year: 1893, masterpiece: 'Swan Lake' }
  ];

  constructor() { }
  getComposerList(): Composer[] {
    return this.composers;
  }

  updateComposerList(updatedComposers: Composer[]): void {
    this.composers = updatedComposers;
  }
}

OUTPUT:

41. Podcast List

// updated podcast-list.component.ts
import { Component } from '@angular/core';
import { PodcastListService } from '../../services/podcast-list.service';

// Define the Podcast interface
interface Podcast {
  title: string;
  host: string;
  description: string;
}

@Component({
  selector: 'app-podcast-list',
  templateUrl: './podcast-list.component.html',
  styleUrls: ['./podcast-list.component.css']
})
export class PodcastListComponent {
  newPodcast: Podcast = { title: '', host: '', description: '' }; // Ensure this is an object of Podcast type
  searchPodcast: string = '';
  podcasts: Podcast[] = []; // Ensure this is an array of Podcast type
  editIndex: number | null = null;

  constructor(private podcastListService: PodcastListService) {
    // Fetch the initial podcast list from the service
    this.podcasts = this.podcastListService.getPodcastList();
  }

  getFilteredPodcasts(): Podcast[] {
    if (!this.searchPodcast) {
      return this.podcasts;
    }
    return this.podcasts.filter(podcast =>
      podcast.title.toLowerCase().includes(this.searchPodcast.toLowerCase())
    );
  }

  addPodcast() {
    if (this.newPodcast.title.trim() !== '' && this.newPodcast.host.trim() !== '' && this.newPodcast.description.trim() !== '') {
      if (this.editIndex !== null) {
        this.podcasts[this.editIndex] = { ...this.newPodcast }; // Update existing podcast
        this.editIndex = null;
      } else {
        this.podcasts.push({ ...this.newPodcast }); // Add new podcast
      }
      this.resetForm();
      // Update the podcast list in the service
      this.podcastListService.updatePodcastList(this.podcasts);
    }
  }

  editPodcast(index: number) {
    this.newPodcast = { ...this.podcasts[index] }; // Load the selected podcast for editing
    this.editIndex = index;
  }

  removePodcast(index: number) {
    this.podcasts.splice(index, 1); // Remove the selected podcast
    // Update the podcast list in the service
    this.podcastListService.updatePodcastList(this.podcasts);
  }

  resetForm() {
    this.newPodcast = { title: '', host: '', description: '' }; // Reset the form
  }
}

// podcast-list.service.ts
import { Injectable } from '@angular/core';

// Define the Podcast interface
interface Podcast {
  title: string;
  host: string;
  description: string;
}

@Injectable({
  providedIn: 'root'
})
export class PodcastListService {
  private podcasts: Podcast[] = [
    { title: 'The Daily', host: 'Michael Barbaro', description: 'This is what the news should sound like. The biggest stories of our time, told by the best journalists in the world.' },
    { title: 'Radiolab', host: 'Jad Abumrad & Robert Krulwich', description: 'Investigating a strange world.' },
    { title: 'Stuff You Should Know', host: 'Josh Clark & Charles W. W. Greene', description: 'If you’ve ever wanted to know about weird things, then this is the podcast for you.' },
    { title: 'How I Built This', host: 'Guy Raz', description: 'Guy Raz dives into the stories behind some of the world’s best-known companies.' },
    { title: 'Freakonomics Radio', host: 'Stephen J. Dubner', description: 'Discover the hidden side of everything.' }
  ];

  constructor() { }
  getPodcastList(): Podcast[] {
    return this.podcasts;
  }

  updatePodcastList(updatedPodcasts: Podcast[]): void {
    this.podcasts = updatedPodcasts;
  }


}

OUTPUT:

42. Exercise List

// updated exercise-list.component.ts
import { Component } from '@angular/core';
import { ExerciseListService } from '../../services/exercise-list.service';

export interface Exercise {
  name: string;
  description: string;
  duration: number; // duration in minutes
}


@Component({
  selector: 'app-exercise-list',
  templateUrl: './exercise-list.component.html',
  styleUrl: './exercise-list.component.css'
})
export class ExerciseListComponent {
  newExercise: Exercise = { name: '', description: '', duration: 0 }; // Correctly initialized
  searchExercise: string = '';
  exercises: Exercise[] = []; // Ensure this is initialized as an Exercise array
  editIndex: number | null = null;

  constructor(private exerciseListService: ExerciseListService) {
    this.exercises = this.exerciseListService.getExerciseList(); // Should correctly get Exercise[]
  }

  getFilteredExercises(): Exercise[] {
    if (!this.searchExercise) {
      return this.exercises;
    }
    return this.exercises.filter(exercise =>
      exercise.name.toLowerCase().includes(this.searchExercise.toLowerCase())
    );
  }

  addExercise() {
    if (this.newExercise.name.trim() !== '' && this.newExercise.description.trim() !== '' && this.newExercise.duration > 0) {
      if (this.editIndex !== null) {
        this.exercises[this.editIndex] = { ...this.newExercise };
        this.editIndex = null;
      } else {
        this.exercises.push({ ...this.newExercise });
      }
      this.resetForm();
      this.exerciseListService.updateExerciseList(this.exercises); // Correctly updates the service
    }
  }

  editExercise(index: number) {
    this.newExercise = { ...this.exercises[index] }; // Load the selected exercise for editing
    this.editIndex = index;
  }

  removeExercise(index: number) {
    this.exercises.splice(index, 1);
    this.exerciseListService.updateExerciseList(this.exercises); // Update service after removal
  }

  resetForm() {
    this.newExercise = { name: '', description: '', duration: 0 }; // Reset the form
  }
}

// exercise-list.service.ts
import { Injectable } from '@angular/core';

interface Exercise {
  name: string;
  description: string;
  duration: number; // duration in minutes
}

@Injectable({
  providedIn: 'root'
})
export class ExerciseListService {
  private exercises: Exercise[] = [
    { name: 'Push Up', description: 'A basic upper body exercise', duration: 10 },
    { name: 'Squats', description: 'A fundamental lower body exercise', duration: 15 },
    { name: 'Plank', description: 'Core strengthening exercise', duration: 5 }
  ]; // Sample exercises

  constructor() { }

  getExerciseList(): Exercise[] {
    return this.exercises; // Return the list of exercises
  }

  updateExerciseList(exercises: Exercise[]) {
    this.exercises = exercises; // Update the list of exercises
  }

}

OUTPUT:

43. Meal Plan List

// updated meal-plan-list.component.ts
import { Component } from '@angular/core';
import { MealPlanListService } from '../../services/meal-plan-list.service';


@Component({
  selector: 'app-meal-plan-list',
  templateUrl: './meal-plan-list.component.html',
  styleUrl: './meal-plan-list.component.css'
})
export class MealPlanListComponent {
  newMeal: string = '';
  searchMeal: string = '';
  meals: string[] = ['Breakfast - Oatmeal', 'Lunch - Grilled Chicken', 'Dinner - Salmon and Veggies'];
  editIndex: number | null = null;

  constructor(private mealPlanListService: MealPlanListService) {}


  getFilteredMeals(): string[] {
    if (!this.searchMeal) {
      return this.meals;
    }
    return this.meals.filter(meal =>
      meal.toLowerCase().includes(this.searchMeal.toLowerCase())
    );
  }


  addMeal() {
    if (this.newMeal.trim() !== '') {
      if (this.editIndex !== null) {
        this.meals[this.editIndex] = this.newMeal.trim();
        this.editIndex = null;
      } else {
        this.meals.push(this.newMeal.trim());
      }
      this.newMeal = '';
    }
  }

  editMeal(index: number) {
    this.newMeal = this.meals[index];
    this.editIndex = index;
  }

  removeMeal(index: number) {
    this.meals.splice(index, 1);
  }

}

// meal-plan-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MealPlanListService {
  private meals: string[] = [
    'Breakfast - Oatmeal',
    'Lunch - Grilled Chicken',
    'Dinner - Salmon and Veggies'
  ];

  constructor() { }

  // Get all meals
  getMeals(): string[] {
    return this.meals;
  }

  // Add a new meal
  addMeal(meal: string) {
    this.meals.push(meal);
  }

  // Edit an existing meal
  editMeal(index: number, meal: string) {
    this.meals[index] = meal;
  }

  // Remove a meal
  removeMeal(index: number) {
    this.meals.splice(index, 1);
  }
}

OUTPUT:

44. Budget List

// updated budget-list.component.ts
import { Component } from '@angular/core';
import { BudgetListService } from '../../services/budget-list.service';

interface BudgetItem {
  name: string;
  amount: number;
}

@Component({
  selector: 'app-budget-list',
  templateUrl: './budget-list.component.html',
  styleUrls: ['./budget-list.component.css'] // Corrected here
})
export class BudgetListComponent {
  newItem: BudgetItem = { name: '', amount: 0 };
  searchItem: string = '';
  editIndex: number | null = null;

  constructor(private budgetListService: BudgetListService) {}

  get budgetItems(): BudgetItem[] {
    return this.budgetListService.getBudgetItems(); // Fetch from service
  }

  getFilteredItems(): BudgetItem[] {
    if (!this.searchItem) {
      return this.budgetItems;
    }
    return this.budgetItems.filter(item =>
      item.name.toLowerCase().includes(this.searchItem.toLowerCase())
    );
  }

  addItem() {
    if (this.newItem.name.trim() !== '' && this.newItem.amount > 0) {
      if (this.editIndex !== null) {
        this.budgetListService.editBudgetItem(this.editIndex, this.newItem.name, this.newItem.amount);
        this.editIndex = null;
      } else {
        this.budgetListService.addBudgetItem(this.newItem.name, this.newItem.amount);
      }
      this.newItem = { name: '', amount: 0 };
    }
  }

  editItem(index: number) {
    const item = this.budgetItems[index];
    this.newItem = { ...item };
    this.editIndex = index;
  }

  removeItem(index: number) {
    this.budgetListService.removeBudgetItem(index);
  }
}

// budget-list.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BudgetListService {
  private budgetItems: { name: string; amount: number }[] = [];

  constructor() {
    // Sample budget items
    this.budgetItems = [
      { name: 'Development', amount: 5000 },
      { name: 'Marketing', amount: 2000 },
      { name: 'Design', amount: 1500 }
    ];
  }

  getBudgetItems(): { name: string; amount: number }[] {
    return this.budgetItems;
  }

  addBudgetItem(name: string, amount: number) {
    this.budgetItems.push({ name, amount });
  }

  editBudgetItem(index: number, name: string, amount: number) {
    if (index >= 0 && index < this.budgetItems.length) {
      this.budgetItems[index] = { name, amount };
    }
  }

  removeBudgetItem(index: number) {
    if (index >= 0 && index < this.budgetItems.length) {
      this.budgetItems.splice(index, 1);
    }
  }
}

OUTPUT:

45. Presentation List

// updated presentation-list.component.ts
import { Component } from '@angular/core';
import { PresentationListService } from '../../services/presentation-list.service';

interface Presentation {
  title: string;
  date: string;
  duration: number;
}

@Component({
  selector: 'app-presentation-list',
  templateUrl: './presentation-list.component.html',
  styleUrls: ['./presentation-list.component.css']
})
export class PresentationListComponent {
  newPresentation: Presentation = { title: '', date: '', duration: 0 };
  searchTerm: string = '';
  editIndex: number | null = null;

  constructor(private presentationListService: PresentationListService) {}

  get presentations(): Presentation[] {
    return this.presentationListService.getPresentations();
  }

  getFilteredPresentations(): Presentation[] {
    if (!this.searchTerm) {
      return this.presentations;
    }
    return this.presentations.filter(presentation =>
      presentation.title.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

  addPresentation() {
    if (this.newPresentation.title.trim() !== '' && this.newPresentation.duration > 0) {
      if (this.editIndex !== null) {
        this.presentationListService.editPresentation(this.editIndex, this.newPresentation.title, this.newPresentation.date, this.newPresentation.duration);
        this.editIndex = null;
      } else {
        this.presentationListService.addPresentation(this.newPresentation.title, this.newPresentation.date, this.newPresentation.duration);
      }
      this.newPresentation = { title: '', date: '', duration: 0 };
    }
  }

  editPresentation(index: number) {
    const presentation = this.presentations[index];
    this.newPresentation = { ...presentation };
    this.editIndex = index;
  }

  removePresentation(index: number) {
    this.presentationListService.removePresentation(index);
  }
}

// update presentation-list.service.ts
import { Injectable } from '@angular/core';

interface Presentation {
  title: string;
  date: string; // Use string for simplicity; consider using Date type for better handling
  duration: number; // Duration in minutes
}

@Injectable({
  providedIn: 'root'
})
export class PresentationListService {
  private presentations: Presentation[] = [];

  constructor() {
    // Sample presentations
    this.presentations = [
      { title: 'Angular Basics', date: '2024-10-15', duration: 30 },
      { title: 'Advanced TypeScript', date: '2024-10-20', duration: 45 },
      { title: 'RxJS in Depth', date: '2024-10-25', duration: 60 }
    ];
  }

  getPresentations(): Presentation[] {
    return this.presentations;
  }

  addPresentation(title: string, date: string, duration: number) {
    this.presentations.push({ title, date, duration });
  }

  editPresentation(index: number, title: string, date: string, duration: number) {
    if (index >= 0 && index < this.presentations.length) {
      this.presentations[index] = { title, date, duration };
    }
  }

  removePresentation(index: number) {
    if (index >= 0 && index < this.presentations.length) {
      this.presentations.splice(index, 1);
    }
  }
}

OUTPUT:

46. Tour List

// updated tour-list.component.ts
import { Component } from '@angular/core';
import { TourListService } from '../../services/tour-list.service';

interface Tour {
  name: string;
  destination: string;
  duration: number; // Duration in days
}

@Component({
  selector: 'app-tour-list',
  templateUrl: './tour-list.component.html',
  styleUrls: ['./tour-list.component.css']
})
export class TourListComponent {
  newTour: Tour = { name: '', destination: '', duration: 0 };
  searchTerm: string = '';
  editIndex: number | null = null;

  constructor(private tourListService: TourListService) {}

  get tours(): Tour[] {
    return this.tourListService.getTours();
  }

  getFilteredTours(): Tour[] {
    if (!this.searchTerm) {
      return this.tours;
    }
    return this.tours.filter(tour =>
      tour.name.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

  addTour() {
    if (this.newTour.name.trim() !== '' && this.newTour.duration > 0) {
      if (this.editIndex !== null) {
        this.tourListService.editTour(this.editIndex, this.newTour.name, this.newTour.destination, this.newTour.duration);
        this.editIndex = null;
      } else {
        this.tourListService.addTour(this.newTour.name, this.newTour.destination, this.newTour.duration);
      }
      this.newTour = { name: '', destination: '', duration: 0 };
    }
  }

  editTour(index: number) {
    const tour = this.tours[index];
    this.newTour = { ...tour };
    this.editIndex = index;
  }

  removeTour(index: number) {
    this.tourListService.removeTour(index);
  }
}

// tour-list.service.ts
import { Injectable } from '@angular/core';

interface Tour {
  name: string;
  destination: string;
  duration: number; // Duration in days
}

@Injectable({
  providedIn: 'root'
})
export class TourListService {
  private tours: Tour[] = [];

  constructor() {
    // Sample tours
    this.tours = [
      { name: 'Beach Getaway', destination: 'Maldives', duration: 7 },
      { name: 'Mountain Trek', destination: 'Himalayas', duration: 10 },
      { name: 'City Explorer', destination: 'New York', duration: 5 }
    ];
  }

  getTours(): Tour[] {
    return this.tours;
  }

  addTour(name: string, destination: string, duration: number) {
    this.tours.push({ name, destination, duration });
  }

  editTour(index: number, name: string, destination: string, duration: number) {
    if (index >= 0 && index < this.tours.length) {
      this.tours[index] = { name, destination, duration };
    }
  }

  removeTour(index: number) {
    if (index >= 0 && index < this.tours.length) {
      this.tours.splice(index, 1);
    }
  }
}

OUTPUT:

47. Event List

// updated event-list.component.ts
import { Component } from '@angular/core';
import { EventListService } from '../../services/event-list.service';

@Component({
  selector: 'app-event-list',
  templateUrl: './event-list.component.html',
  styleUrls: ['./event-list.component.css'] // Fixed typo: styleUrl should be styleUrls
})
export class EventListComponent {
  newEventName: string = ''; // Variable to hold new event name input
  newEventDate: string = ''; // Variable to hold new event date input
  newEventLocation: string = ''; // Variable to hold new event location input
  searchTerm: string = ''; // Variable to hold search term

  constructor(private eventListService: EventListService) {}

  // Get the events from the service
  get events() {
    return this.eventListService.getEvents();
  }

  // Method to add a new event
  addEvent() {
    if (this.newEventName.trim() !== '' && this.newEventDate.trim() !== '' && this.newEventLocation.trim() !== '') {
      this.eventListService.addEvent(this.newEventName.trim(), this.newEventDate.trim(), this.newEventLocation.trim());
      this.newEventName = ''; // Clear input field
      this.newEventDate = ''; // Clear input field
      this.newEventLocation = ''; // Clear input field
    }
  }

  // Method to remove an event by index
  removeEvent(index: number) {
    this.eventListService.removeEvent(index);
  }

  // Method to edit an event
  editEvent(index: number) {
    const updatedName = prompt('Edit event name:', this.events[index].name);
    const updatedDate = prompt('Edit event date:', this.events[index].date);
    const updatedLocation = prompt('Edit event location:', this.events[index].location);
    if (updatedName !== null && updatedDate !== null && updatedLocation !== null) {
      this.eventListService.editEvent(index, updatedName, updatedDate, updatedLocation);
    }
  }

  // Method to get filtered event list based on search term
  getFilteredEvents() {
    return this.events.filter(event =>
      event.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      event.date.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      event.location.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }
}

// event-list.service.ts
import { Injectable } from '@angular/core';

interface Event {
  name: string;
  date: string; // Date in ISO format
  location: string;
}

@Injectable({
  providedIn: 'root'
})
export class EventListService {
  private events: Event[] = [];

  constructor() {
    // Sample events
    this.events = [
      { name: 'Music Concert', date: '2024-10-20', location: 'City Park' },
      { name: 'Art Exhibition', date: '2024-11-01', location: 'Art Gallery' },
      { name: 'Food Festival', date: '2024-12-15', location: 'Downtown' }
    ];
  }

  getEvents(): Event[] {
    return this.events;
  }

  addEvent(name: string, date: string, location: string) {
    this.events.push({ name, date, location });
  }

  editEvent(index: number, name: string, date: string, location: string) {
    if (index >= 0 && index < this.events.length) {
      this.events[index] = { name, date, location };
    }
  }

  removeEvent(index: number) {
    if (index >= 0 && index < this.events.length) {
      this.events.splice(index, 1);
    }
  }
}

OUTPUT:

48. Developer Tools List

// updated developer-tools-list.component.ts
import { Component } from '@angular/core';
import { DeveloperToolsListService } from '../../services/developer-tools-list.service'; // Make sure to import the interface

export interface DeveloperTool {
  name: string;
  version: string;
  description: string;
  category: string; // e.g., IDE, version control, etc.
}
@Component({
  selector: 'app-developer-tools-list',
  templateUrl: './developer-tools-list.component.html',
  styleUrls: ['./developer-tools-list.component.css']
})
export class DeveloperToolsListComponent {
  tools: DeveloperTool[] = []; // Array to hold tool details
  newTool: DeveloperTool = { name: '', version: '', description: '', category: '' }; // Updated to include category
  searchTerm: string = ''; // Variable to hold search term

  constructor(private developerToolsListService: DeveloperToolsListService) {
    this.tools = this.developerToolsListService.getDeveloperTools(); // Load initial tools
  }

   // Method to add a new tool
   addTool() {
    if (this.newTool.name.trim() && this.newTool.version.trim() && this.newTool.description.trim() && this.newTool.category.trim()) {
      this.developerToolsListService.addDeveloperTool({ ...this.newTool }); // Add new tool
      this.resetNewTool(); // Clear input fields
    }
  }

  // Method to reset new tool input
  resetNewTool() {
    this.newTool = { name: '', version: '', description: '', category: '' }; // Reset all fields
  }

  // Method to remove a tool by index
  removeTool(index: number) {
    this.developerToolsListService.removeDeveloperTool(index); // Remove tool from service
  }

  // Method to edit a tool
  editTool(index: number) {
    const updatedTool = this.tools[index];
    const updatedName = prompt('Edit tool name:', updatedTool.name);
    const updatedVersion = prompt('Edit tool version:', updatedTool.version);
    const updatedDescription = prompt('Edit tool description:', updatedTool.description);
    const updatedCategory = prompt('Edit tool category:', updatedTool.category);

    if (updatedName && updatedVersion && updatedDescription && updatedCategory) {
      this.tools[index] = {
        name: updatedName,
        version: updatedVersion,
        description: updatedDescription,
        category: updatedCategory,
      };
    }
  }

  // Method to get filtered tool list based on search term
  getFilteredTools() {
    return this.tools.filter(tool =>
      tool.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      tool.version.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      tool.description.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      tool.category.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }
}

// developer-tools-list.service.ts
import { Injectable } from '@angular/core';

export interface DeveloperTool {
  name: string;
  version: string;
  description: string;
  category: string; // e.g., IDE, version control, etc.
}

@Injectable({
  providedIn: 'root',
})
export class DeveloperToolsListService {
  private tools: DeveloperTool[] = [
    { name: 'Visual Studio Code', version: '1.58', description: 'Code editor', category: 'IDE' },
    { name: 'Git', version: '2.32', description: 'Version control', category: 'Version Control' },
  ];

  constructor() { }

  getDeveloperTools(): DeveloperTool[] {
    return this.tools;
  }

  addDeveloperTool(tool: DeveloperTool): void {
    this.tools.push(tool);
  }

  removeDeveloperTool(index: number): void {
    this.tools.splice(index, 1);
  }
}

OUTPUT:

49. Framework List

// updated framework-list.component.ts
import { Component } from '@angular/core';
import { FrameworkListService } from '../../services/framework-list.service';

export interface Framework {
  name: string;
  version: string;
  description: string;
  category: string; // e.g., front-end, back-end, mobile, etc.
}

@Component({
  selector: 'app-framework-list',
  templateUrl: './framework-list.component.html',
  styleUrl: './framework-list.component.css'
})
export class FrameworkListComponent {
  frameworks: { name: string; version: string; description: string }[] = []; // Array to hold framework details
  newFrameworkName: string = ''; // Variable to hold new framework name input
  newFrameworkVersion: string = ''; // Variable to hold new framework version input
  newFrameworkDescription: string = ''; // Variable to hold new framework description input
  searchTerm: string = ''; // Variable to hold search term

  constructor(private frameworkListService: FrameworkListService) {
    this.frameworks = this.frameworkListService.getFrameworks(); // Load initial frameworks
  }
  // Method to add a new framework
  addFramework() {
    if (this.newFrameworkName.trim() !== '' && this.newFrameworkVersion.trim() !== '' && this.newFrameworkDescription.trim() !== '') {
      this.frameworks.push({
        name: this.newFrameworkName.trim(),
        version: this.newFrameworkVersion.trim(),
        description: this.newFrameworkDescription.trim(),
      });
      this.newFrameworkName = ''; // Clear input field
      this.newFrameworkVersion = ''; // Clear input field
      this.newFrameworkDescription = ''; // Clear input field
    }
  }

  // Method to remove a framework by index
  removeFramework(index: number) {
    this.frameworks.splice(index, 1);
  }

  // Method to edit a framework
  editFramework(index: number) {
    const updatedName = prompt('Edit framework name:', this.frameworks[index].name);
    const updatedVersion = prompt('Edit framework version:', this.frameworks[index].version);
    const updatedDescription = prompt('Edit framework description:', this.frameworks[index].description);
    if (updatedName !== null && updatedVersion !== null && updatedDescription !== null) {
      this.frameworks[index] = {
        name: updatedName,
        version: updatedVersion,
        description: updatedDescription,
      };
    }
  }

  // Method to get filtered framework list based on search term
  getFilteredFrameworks() {
    return this.frameworks.filter(framework =>
      framework.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      framework.version.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      framework.description.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

}

// framework-list.service.ts
import { Injectable } from '@angular/core';

export interface Framework {
  name: string;
  version: string;
  description: string;
  category: string; // e.g., front-end, back-end, mobile, etc.
}

@Injectable({
  providedIn: 'root'
})
export class FrameworkListService {
  private frameworks: Framework[] = [
    {
      name: 'Angular',
      version: '12.0.0',
      description: 'A platform for building mobile and desktop web applications.',
      category: 'Front-end'
    },
    {
      name: 'React',
      version: '17.0.2',
      description: 'A JavaScript library for building user interfaces.',
      category: 'Front-end'
    },
    {
      name: 'Node.js',
      version: '14.17.0',
      description: 'A JavaScript runtime built on Chrome\'s V8 JavaScript engine.',
      category: 'Back-end'
    },
    {
      name: 'Django',
      version: '3.2.5',
      description: 'A high-level Python web framework that encourages rapid development.',
      category: 'Back-end'
    },
    {
      name: 'Flutter',
      version: '2.2.3',
      description: 'An open-source UI software development toolkit for building natively compiled applications for mobile, web, and desktop.',
      category: 'Mobile'
    }
  ];

  constructor() {}

  // Method to get all frameworks
  getFrameworks(): Framework[] {
    return this.frameworks;
  }

  // Method to add a new framework
  addFramework(framework: Framework) {
    this.frameworks.push(framework);
  }

  // Method to remove a framework by index
  removeFramework(index: number) {
    this.frameworks.splice(index, 1);
  }

  // Method to edit a framework by index
  editFramework(index: number, updatedFramework: Framework) {
    this.frameworks[index] = updatedFramework;
  }
}

OUTPUT:

50. Library List

// updated library-list.component.ts
import { Component } from '@angular/core';
import { LibraryListService } from '../../services/library-list.service';

export interface Library {
  name: string;
  version: string;
  description: string;
  category: string; // e.g., JavaScript, CSS, Utility, etc.
}


@Component({
  selector: 'app-library-list',
  templateUrl: './library-list.component.html',
  styleUrl: './library-list.component.css'
})
export class LibraryListComponent {
  libraries: { name: string; version: string; description: string }[] = []; // Array to hold library details
  newLibraryName: string = ''; // Variable to hold new library name input
  newLibraryVersion: string = ''; // Variable to hold new library version input
  newLibraryDescription: string = ''; // Variable to hold new library description input
  searchTerm: string = ''; // Variable to hold search term

  constructor(private libraryListService: LibraryListService) {
    // Initialize libraries from the service
    this.libraries = this.libraryListService.getLibraries();
  }

  // Method to add a new library
  addLibrary() {
    if (this.newLibraryName.trim() !== '' && this.newLibraryVersion.trim() !== '' && this.newLibraryDescription.trim() !== '') {
      this.libraries.push({
        name: this.newLibraryName.trim(),
        version: this.newLibraryVersion.trim(),
        description: this.newLibraryDescription.trim(),
      });
      this.newLibraryName = ''; // Clear input field
      this.newLibraryVersion = ''; // Clear input field
      this.newLibraryDescription = ''; // Clear input field
    }
  }

  // Method to remove a library by index
  removeLibrary(index: number) {
    this.libraries.splice(index, 1);
  }

  // Method to edit a library
  editLibrary(index: number) {
    const updatedName = prompt('Edit library name:', this.libraries[index].name);
    const updatedVersion = prompt('Edit library version:', this.libraries[index].version);
    const updatedDescription = prompt('Edit library description:', this.libraries[index].description);
    if (updatedName !== null && updatedVersion !== null && updatedDescription !== null) {
      this.libraries[index] = {
        name: updatedName,
        version: updatedVersion,
        description: updatedDescription,
      };
    }
  }

  // Method to get filtered library list based on search term
  getFilteredLibraries() {
    return this.libraries.filter(library =>
      library.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      library.version.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
      library.description.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }

}

// library-list.service.ts
import { Injectable } from '@angular/core';

export interface Library {
  name: string;
  version: string;
  description: string;
  category: string; // e.g., JavaScript, CSS, Utility, etc.
}

@Injectable({
  providedIn: 'root'
})
export class LibraryListService {
  private libraries: Library[] = [
    {
      name: 'Lodash',
      version: '4.17.21',
      description: 'A modern JavaScript utility library delivering modularity, performance & extras.',
      category: 'JavaScript'
    },
    {
      name: 'Moment.js',
      version: '2.29.1',
      description: 'Parse, validate, manipulate, and display dates in JavaScript.',
      category: 'JavaScript'
    },
    {
      name: 'Bootstrap',
      version: '5.1.0',
      description: 'The most popular HTML, CSS, and JS library in the world.',
      category: 'CSS'
    },
    {
      name: 'Tailwind CSS',
      version: '2.2.19',
      description: 'A utility-first CSS framework for rapid UI development.',
      category: 'CSS'
    },
    {
      name: 'jQuery',
      version: '3.6.0',
      description: 'A fast, small, and feature-rich JavaScript library.',
      category: 'JavaScript'
    }
  ];

  constructor() { }

 // Retrieve the full list of libraries
 getLibraries(): Library[] {
  return this.libraries;
}

// Add a new library to the list
addLibrary(library: Library) {
  this.libraries.push(library);
}

// Remove a library from the list
removeLibrary(index: number) {
  this.libraries.splice(index, 1);
}

// Edit an existing library
editLibrary(index: number, updatedLibrary: Library) {
  this.libraries[index] = updatedLibrary;
}
}

Activity 23: Research Angular Services

Table of contents

What are Angular Services?

Key Concepts:

Use Cases for Angular Services:

Example of an Angular Service:

Using the Service in a Component:

Benefits of Angular Services:

From Activity 15:

1. Student List Service:

OUTPUT:

2. Employee-List

OUTPUT:

3. Fruit-List

OUTPUT:

4. Course List

OUTPUT:

5. Book List

OUTPUT:

6. City List

OUTPUT:

7. Movie List

OUTPUT:

8. Car Model List

OUTPUT:

9. Product List

OUTPUT:

10. Subject List

OUTPUT:

11. Country List

12. Sports List

OUTPUT:

13. Vegetable List

OUTPUT:

14. Animal List

OUTPUT:

15. Tool List

OUTPUT:

16. Language List

OUTPUT:

17. Game List

OUTPUT:

18. Software List

OUTPUT:

19. Phone Contact List

OUTPUT:

OUTPUT:

21. Food Menu

OUTPUT:

22. Grocery List

OUTPUT:

23. Classroom List

OUTPUT:

24. Inventory List

OUTPUT:

25. Lecture List

OUTPUT:

26. Stationery List

OUTPUT:

27. Flower List

28. Destination List

OUTPUT:

29. Laptop List

OUTPUT:

30. Laptop Specifications List

OUTPUT:

31. Computer Hardware List

OUTPUT:

32. Mobile App List

OUTPUT:

33. Video List

OUTPUT:

34. TV Show List

OUTPUT:

35. Furniture List

OUTPUT:

36. Accessory List

OUTPUT:

37. Building List

OUTPUT: