Activity 15: Angular with TypeScript and data structures

1. Angular: The Framework for Structure and Functionality

• Angular is a powerful framework that provides a comprehensive set of tools for building dynamic web applications. It offers a component-based architecture, data binding, directives, services, and routing, which streamline the development process.

• Components: Angular applications are built from components, which are self-contained units responsible for a specific part of the user interface (UI). Components encapsulate HTML templates, CSS styles, and TypeScript logic, making them modular and reusable.

• Data Binding: Angular's data binding mechanism automatically synchronizes data between the UI and the application's underlying logic. This ensures that changes in data are reflected in the UI, and vice versa, creating a dynamic and responsive user experience.

• Directives: Directives extend the functionality of HTML elements, allowing developers to create custom behaviors and interactions. Examples include ngIf for conditional rendering, ngFor for iterating over data, and custom directives for specific application needs.

• Services: Services are reusable blocks of code that provide functionality shared across multiple components. They handle tasks like data fetching, data manipulation, or communication with backend APIs.

• Modules: Modules organize code into logical groups, promoting modularity and maintainability. The root module (app.module.ts) defines the core components, services, and other features of the application.

• Routing: Routing defines how users navigate between different parts of the application. It allows for creating multi-page applications with separate views and controllers.

HTML: car.component.html

TYPESCRIPT: car.component.ts

1. Student List

• Data: Each student has a name, age, and grade.

• Functionality:

  • Add Students: Users can input new student information and add them to the list.

  • Search: Users can enter a student's name to find their details in the list.

2. Employee List

• Data: Each employee has a name, jobTitle, department, and hireDate.

• Functionality:

  • Add Employees: Users can input new employee information and add them to the list.

  • Filter: Users can select a department to view only employees from that department.

3. Fruit List

• Data: Each fruit has a name, color, and season.

• Functionality:

  • Add Fruits: Users can input new fruit information and add them to the list.

  • Sort: Users can choose to sort the fruit list by color (e.g., alphabetically, by color hue).

4. Course List

• Data: Each course has a courseName, instructor, and description.

• Functionality:

  • Add Courses: Users can input new course details and add them to the list.

  • Filter: Users can select an instructor to view only courses taught by that instructor.

5. Book List

• Data: Each book has a title, author, genre, and publicationDate.

• Functionality:

  • Add Books: Users can input new book information and add them to the list.

  • Search: Users can enter a book title or author's name to find matching books.

6. City List

• Data: Each city has a cityName, state, and population.

• Functionality:

  • Add Cities: Users can input new city information and add them to the list.

  • Sort: Users can choose to sort the city list by population (ascending or descending).

7. Movie List

• Data: Each movie has a title, director, releaseYear, and genre.

• Functionality:

  • Add Movies: Users can input new movie information and add them to the list.

  • Filter: Users can select a genre to view only movies belonging to that genre.

8. Car Model List

• Data: Each car model has a make, model, year, and price.

• Functionality:

  • Add Car Models: Users can input new car model information and add them to the list.

  • Sort: Users can choose to sort the car model list by price (ascending or descending).

9. Product List

• Data: Each product has a productName, description, price, and quantityInStock.

• Functionality:

  • Add Products: Users can input new product information and add them to the list.

  • Filter: Users can enter a minimum and maximum price to view products within that price range.

10. Subject List

• Data: Each subject has a subjectName, courseLevel, and instructor.

• Functionality:

  • Add Subjects: Users can input new subject information and add them to the list.

  • Sort: Users can choose to sort the subject list by course level (e.g., elementary, high school, college).

11. Country List

• Data: Each country has a countryName, continent, and population.

• Functionality:

  • Add Countries: Users can input new country information and add them to the list.

  • Filter: Users can select a continent to view only countries on that continent.

12. Sports List

• Data: Each sport has a sportName, numberOfPlayers, and equipment.

• Functionality:

  • Add Sports: Users can input new sport information and add them to the list.

  • Sort: Users can choose to sort the sports list by the number of players (ascending or descending).

13. Vegetable List

• Data: Each vegetable has a vegetableName, color, and season.

• Functionality:

  • Add Vegetables: Users can input new vegetable information and add them to the list.

  • Sort: Users can choose to sort the vegetable list by color.

14. Animal List

• Data: Each animal has an animalName, species, habitat, and diet.

• Functionality:

  • Add Animals: Users can input new animal information and add them to the list.

  • Filter: Users can select a habitat to view only animals that live in that habitat.

15. Tool List

• Data: Each tool has a toolName, type, and description.

• Functionality:

  • Add Tools: Users can input new tool information and add them to the list.

  • Search: Users can enter a tool name or type to find matching tools.

16. Language List

• Data: Each programming language has a languageName, type, and popularityRanking.

• Functionality:

  • Add Languages: Users can input new language information and add them to the list.

  • Sort: Users can choose to sort the language list by popularity ranking (ascending or descending).

17. Game List

• Data: Each game has a gameTitle, genre, releaseDate, and platform.

• Functionality:

  • Add Games: Users can input new game information and add them to the list.

  • Filter: Users can select a genre or platform to view only games matching those criteria.

18. Software List

• Data: Each software has a softwareName, version, and description.

• Functionality:

  • Add Software: Users can input new software information and add them to the list.

  • Sort: Users can choose to sort the software list by version (e.g., alphabetically, numerically).

19. Phone Contact List

• Data: Each contact has a name, phoneNumber, emailAddress, and address.

• Functionality:

  • Add Contacts: Users can input new contact information and add them to the list.

  • Search: Users can enter a contact name or phone number to find matching contacts.

20. Music Playlist

• Data: Each song has a songTitle, artist, album, and duration.

• Functionality:

  • Add Songs: Users can input new song information and add them to the playlist.

  • Sort: Users can choose to sort the playlist by artist or album (alphabetically).

21. Food Menu

• Data: Each dish has a dishName, description, price, and category.

• Functionality:

  • Add Dishes: Users can input new dish information and add them to the menu.

  • Filter: Users can select a category to view only dishes from that category.

22. Grocery List

• Data: Each item has an itemName, quantity, and price.

• Functionality:

  • Add Items: Users can input new grocery items and add them to the list.

  • Sort: Users can choose to sort the grocery list by price (ascending or descending).

23. Classroom List

• Data: Each student has a studentName, grade, and teacher.

• Functionality:

  • Add Students: Users can input new student information and add them to the list.

  • Filter: Users can select a grade to view only students from that grade.

24. Inventory List

• Data: Each item has an itemName, quantity, and price.

• Functionality:

  • Add Items: Users can input new inventory items and add them to the list.

  • Sort: Users can choose to sort the inventory list by quantity (ascending or descending).

25. Lecture List

• Data: Each lecture has a lectureTopic, date, and time.

• Functionality:

  • Add Lectures: Users can input new lecture information and add them to the list.

  • Sort: Users can choose to sort the lecture list by date (ascending or descending).

26. Stationery List

• Data: Each item has an itemName, quantity, and price.

• Functionality:

  • Add Items: Users can input new stationery items and add them to the list.

  • Sort: Users can choose to sort the stationery list by price (ascending or descending).

27. Flower List

• Data: Each flower has a flowerName, color, and quantity.

• Functionality:

  • Add Flowers: Users can input new flower information and add them to the list.

  • Sort: Users can choose to sort the flower list by color (alphabetically or by color hue).

28. Destination List

• Data: Each destination has a destinationName, country, and description.

• Functionality:

  • Add Destinations: Users can input new destination information and add them to the list.

  • Filter: Users can select a country to view only destinations in that country.

29. Laptop List

• Data: Each laptop model has a modelName, price, and specifications.

• Functionality:

  • Add Laptops: Users can input new laptop model information and add them to the list.

  • Sort: Users can choose to sort the laptop list by price (ascending or descending).

30. Laptop Specifications List

• Data: Each specification has a specificationName, value, and description.

• Functionality:

  • Add Specifications: Users can input new laptop specifications and add them to the list.

  • Filter: Users can enter a specification name to view only specifications matching that name.

31. Computer Hardware List

• Data: Each component has a componentName, type, and price.

• Functionality:

  • Add Components: Users can input new computer hardware components and add them to the list.

  • Sort: Users can choose to sort the component list by price (ascending or descending).

32. Mobile App List

• Data: Each app has an appName, description, and category.

• Functionality:

  • Add Apps: Users can input new mobile app information and add them to the list.

  • Filter: Users can select a category to view only apps belonging to that category.

33. Video List

• Data: Each video has a videoTitle, description, and genre.

• Functionality:

  • Add Videos: Users can input new video information and add them to the list.

  • Filter: Users can select a genre to view only videos belonging to that genre.

34. TV Show List

• Data: Each TV show has a showName, genre, and numberOfSeasons.

• Functionality:

  • Add TV Shows: Users can input new TV show information and add them to the list.

  • Filter: Users can select a genre to view only TV shows belonging to that genre.

35. Furniture List

• Data: Each furniture item has a furnitureName, description, and price.

• Functionality:

  • Add Furniture: Users can input new furniture information and add them to the list.

  • Sort: Users can choose to sort the furniture list by price (ascending or descending).

36. Accessory List

• Data: Each accessory has an accessoryName, description, and price.

• Functionality:

  • Add Accessories: Users can input new accessory information and add them to the list.

  • Filter: Users can select a type (e.g., phone case, charger, headphones) to view only accessories matching that type.

37. Building List

• Data: Each building has a buildingName, address, and numberOfFloors.

• Functionality:

  • Add Buildings: Users can input new building information and add them to the list.

  • Sort: Users can choose to sort the building list by the number of floors (ascending or descending).

38. Painting List

• Data: Each painting has a paintingName, artist, and yearCreated.

• Functionality:

  • Add Paintings: Users can input new painting information and add them to the list.

  • Filter: Users can select an artist to view only paintings created by that artist.

39. Artist List

• Data: Each artist has an artistName, nationality, and style.

• Functionality:

  • Add Artists: Users can input new artist information and add them to the list.

  • Sort: Users can choose to sort the artist list by nationality (alphabetically).

40. Composer List

• Data: Each composer has a composerName, era, and famousWorks.

• Functionality:

  • Add Composers: Users can input new composer information and add them to the list.

  • Filter: Users can select an era to view only composers from that era.

41. Podcast List

• Data: Each podcast episode has an episodeTitle, description, and releaseDate.

• Functionality:

  • Add Episodes: Users can input new podcast episode information and add them to the list.

  • Sort: Users can choose to sort the episode list by release date (ascending or descending).

42. Exercise List

• Data: Each exercise has an exerciseName, muscleGroup, and description.

• Functionality:

  • Add Exercises: Users can input new exercise information and add them to the list.

  • Filter: Users can select a muscle group to view only exercises targeting that muscle group.

43. Meal Plan List

• Data: Each meal has a mealName, ingredients, and instructions.

• Functionality:

  • Add Meals: Users can input new meal information and add them to the list.

  • Filter: Users can select a day of the week to view only meals planned for that day.

44. Budget List

• Data: Each budget item has an itemName, category, and amount.

• Functionality:

  • Add Budget Items: Users can input new budget items and add them to the list.

  • Filter: Users can select a category to view only budget items belonging to that category.

45. Presentation List

• Data: Each presentation topic has a topicName, description, and targetAudience.

• Functionality:

  • Add Topics: Users can input new presentation topics and add them to the list.

  • Sort: Users can choose to sort the presentation topic list by target audience (alphabetically).

46. Tour List

• Data: Each tour date has a date, city, and venue.

• Functionality:

  • Add Tour Dates: Users can input new tour date information and add them to the list.

  • Filter: Users can select a city to view only tour dates in that city.

47. Event List

• Data: Each event has an eventName, date, time, and location.

• Functionality:

  • Add Events: Users can input new event information and add them to the list.

  • Sort: Users can choose to sort the event list by date (ascending or descending).

48. Developer Tools List

• Data: Each tool has a toolName, description, and category.

• Functionality:

  • Add Tools: Users can input new developer tool information and add them to the list.

  • Filter: Users can select a category to view only tools belonging to that category.

49. Framework List

• Data: Each framework has a frameworkName, description, and language.

• Functionality:

  • Add Frameworks: Users can input new framework information and add them to the list.

  • Filter: Users can select a programming language to view only frameworks written in that language.

50. Library List

• Data: Each library has a libraryName, description, and purpose.

• Functionality:

  • Add Libraries: Users can input new library information and add them to the list.

  • Search: Users can enter a library name or purpose to find matching libraries.

OUTPUT:

GITHUB LINK:

https://github.com/Gerliedao-ayan/Activity-15

FIREBASE LINK:
https://activity-15.web.app