Activity 15: Angular with TypeScript and data structures

This article will guide you through a hands-on learning experience with Angular and TypeScript, focusing on the practical application of data structures, specifically arrays. We'll explore how to manipulate arrays effectively, adding new data and retrieving existing information through various scenarios.

Why Arrays?

Arrays are fundamental data structures in programming, providing a way to store and manage collections of data. In Angular, arrays are essential for representing lists, managing dynamic content, and building interactive user interfaces.

Setting the Stage: A Simple Shopping List

Let's start with a basic example: a student list application. This will demonstrate the core concepts of working with arrays in Angular.

HTML (student.component.html)

html

Copy

<p>Student List works!</p>
<input type="text" [(ngModel)]="item"/>
<button class="btn btn-primary" (click)="addItems()">Add Student</button>
<ul>
  <li *ngFor="let student of studentLit; let i = index">
    {{student}}
    <button class="btn btn-danger" (click)="deleteStudent(i)">Delete</button>
  </li>
</ul>

TypeScript (student.component.ts)

typescript

Copy

import { Component } from '@angular/core';

@Component({
  selector: 'app-studentlist',
  templateUrl: './studentlist.component.html',
  styleUrl: './studentlist.component.css'
})
export class StudentlistComponent {
  studentList: string[] = ["Jerome1", "Jerome2"];
  item: string = '';

  addItems() {
    this.studentList.push(this.item);
  }

  deleteStudent(index: number) {
    this.studentList.splice(index, 1);
  }
}

This simple example demonstrates the fundamental elements of working with arrays in Angular:

1. Array Declaration: We declare a cartList array of type string[] to store our shopping items.

2. Data Binding: The [(ngModel)] directive binds the input field to the item variable, allowing users to enter new items.

3. Iteration: The *ngFor directive iterates through the cartList array, displaying each item in a list element.

4. Adding Items: The addItems() function uses the push() method to add the entered item to the cartList array.

50 Scenarios for Mastering Arrays

Now, let's dive into the heart of our learning journey – 50 diverse scenarios to solidify your understanding of array manipulation in Angular.

1. Student List:

• Create a list of students, each with a name, age, and grade.

• Allow users to add new students to the list.

• Implement functionality to search for students by name.

2. Employee List:

• Maintain a list of employees, including their name, job title, and department.

• Enable users to add new employees and update existing employee information.

• Implement sorting functionality to arrange the employee list by name, job title, or department.

3. Fruit List:

• Create a list of fruits, each with a name, color, and season.

• Allow users to add new fruits and remove existing fruits from the list.

• Implement filtering functionality to display fruits based on their color or season.

4. Course List:

• Maintain a list of courses offered by a school, including course name, instructor, and credit hours.

• Enable users to add new courses and remove existing courses from the list.

• Implement sorting functionality to arrange the course list by name, instructor, or credit hours.

5. Book List:

• Create a list of books in a library, including book title, author, and genre.

• Allow users to add new books and remove existing books from the list.

• Implement filtering functionality to display books based on their genre or author.

6. City List:

• Maintain a list of cities where a company operates, including city name, country, and population.

• Enable users to add new cities and update existing city information.

• Implement sorting functionality to arrange the city list by name, country, or population.

7. Movie List:

• Create a list of movies currently playing in a theater, including movie title, director, and genre.

• Allow users to add new movies and remove existing movies from the list.

• Implement filtering functionality to display movies based on their genre or director.

8. Car Model List:

• Maintain a list of car models available at a dealership, including model name, year, and price.

• Enable users to add new car models and update existing car model information.

• Implement sorting functionality to arrange the car model list by name, year, or price.

9. Product List:

• Create a list of products sold in a store, including product name, price, and quantity in stock.

• Allow users to add new products and update existing product information.

• Implement filtering functionality to display products based on their price or quantity in stock.

10. Subject List:

• Maintain a list of subjects taught in a semester, including subject name, instructor, and credit hours.

• Enable users to add new subjects and remove existing subjects from the list.

• Implement sorting functionality to arrange the subject list by name, instructor, or credit hours.

11. Country List:

• Create a list of countries, grouped by continent, including country name, capital city, and population.

• Allow users to add new countries and remove existing countries from the list.

• Implement filtering functionality to display countries based on their continent or population.

12. Sports List:

• Maintain a list of popular sports, including sport name, number of players, and equipment required.

• Enable users to add new sports and remove existing sports from the list.

• Implement sorting functionality to arrange the sports list by name, number of players, or equipment required.

13. Vegetable List:

• Create a list of vegetables available at a grocery store, including vegetable name, color, and season.

• Allow users to add new vegetables and remove existing vegetables from the list.

• Implement filtering functionality to display vegetables based on their color or season.

14. Animal List:

• Maintain a list of animals in a zoo, including animal name, species, and habitat.

• Enable users to add new animals and update existing animal information.

• Implement sorting functionality to arrange the animal list by name, species, or habitat.

15. Tool List:

• Create a list of tools used in a workshop, including tool name, type, and purpose.

• Allow users to add new tools and remove existing tools from the list.

• Implement filtering functionality to display tools based on their type or purpose.

16. Language List:

• Maintain a list of programming languages, including language name, creator, and popularity.

• Enable users to add new languages and update existing language information.

• Implement sorting functionality to arrange the language list by name, creator, or popularity.

17. Game List:

• Create a list of video games, including game title, genre, and release date.

• Allow users to add new games and remove existing games from the list.

• Implement filtering functionality to display games based on their genre or release date.

18. Software List:

• Maintain a list of software installed on a computer, including software name, version, and purpose.

• Enable users to add new software and remove existing software from the list.

• Implement sorting functionality to arrange the software list by name, version, or purpose.

19. Phone Contact List:

• Create a list of phone contacts, including contact name, phone number, and email address.

• Allow users to add new contacts and update existing contact information.

• Implement searching functionality to find contacts by name or phone number.

20. Music Playlist:

• Maintain a list of songs in a playlist, including song title, artist, and genre.

• Enable users to add new songs and remove existing songs from the list.

• Implement sorting functionality to arrange the playlist by title, artist, or genre.

21. Food Menu:

• Create a list of food items on a restaurant menu, including item name, description, and price.

• Allow users to add new items and update existing item information.

• Implement filtering functionality to display items based on their category or price.

22. Grocery List:

• Maintain a list of items to buy in a grocery store, including item name, quantity, and price.

• Enable users to add new items and remove existing items from the list.

• Implement sorting functionality to arrange the grocery list by name, quantity, or price.

23. Classroom List:

• Create a list of students in a classroom, including student name, age, and grade.

• Allow users to add new students and remove existing students from the list.

• Implement searching functionality to find students by name or grade.

24. Inventory List:

• Maintain a list of items in a store’s inventory, including item name, quantity in stock, and price.

• Enable users to add new items and update existing item information.

• Implement filtering functionality to display items based on their quantity in stock or price.

25. Lecture List:

• Create a list of lectures scheduled for a course, including lecture topic, date, and time.

• Allow users to add new lectures and remove existing lectures from the list.

• Implement sorting functionality to arrange the lecture list by topic, date, or time.

26. Stationery List:

• Maintain a list of office stationery, including item name, quantity, and price.

• Enable users to add new items and remove existing items from the list.

• Implement sorting functionality to arrange the stationery list by name, quantity, or price.

27. Flower List:

• Create a list of flowers for a wedding, including flower name, color, and quantity.

• Allow users to add new flowers and remove existing flowers from the list.

• Implement filtering functionality to display flowers based on their color or quantity.

28. Destination List:

• Maintain a list of travel destinations, including destination name, country, and attractions.

• Enable users to add new destinations and update existing destination information.

• Implement sorting functionality to arrange the destination list by name, country, or attractions.

29. Laptop List:

• Create a list of laptop models, including model name, manufacturer, and price.

• Allow users to add new models and remove existing models from the list.

• Implement filtering functionality to display models based on their manufacturer or price.

30. Laptop Specifications List:

• Maintain a list of laptop specifications, including processor, RAM, storage, and display size.

• Enable users to add new specifications and update existing specification information.

• Implement sorting functionality to arrange the specification list by processor, RAM, storage, or display size.

31. Computer Hardware List:

• Create a list of computer components, including component name, type, and price.

• Allow users to add new components and remove existing components from the list.

• Implement filtering functionality to display components based on their type or price.

32. Mobile App List:

• Maintain a list of apps on a phone, including app name, developer, and category.

• Enable users to add new apps and remove existing apps from the list.

• Implement sorting functionality to arrange the app list by name, developer, or category.

33. Video List:

• Create a list of videos in a library, including video title, genre, and duration.

• Allow users to add new videos and remove existing videos from the list.

• Implement filtering functionality to display videos based on their genre or duration.

34. TV Show List:

• Maintain a list of TV shows available for streaming, including show name, genre, and number of seasons.

• Enable users to add new shows and remove existing shows from the list.

• Implement sorting functionality to arrange the TV show list by name, genre, or number of seasons.

35. Furniture List:

• Create a list of furniture items in a store, including item name, type, and price.

• Allow users to add new items and remove existing items from the list.

• Implement filtering functionality to display items based on their type or price.

36. Accessory List:

• Maintain a list of accessories for mobile phones, including accessory name, type, and price.

• Enable users to add new accessories and remove existing accessories from the list.

• Implement sorting functionality to arrange the accessory list by name, type, or price.

37. Building List:

• Create a list of buildings in a campus, including building name, address, and purpose.

• Allow users to add new buildings and remove existing buildings from the list.

• Implement searching functionality to find buildings by name or address.

38. Painting List:

• Maintain a list of famous paintings, including painting name, artist, and year created.

• Enable users to add new paintings and update existing painting information.

• Implement sorting functionality to arrange the painting list by name, artist, or year created.

39. Artist List:

• Create a list of famous artists, including artist name, nationality, and prominent works.

• Allow users to add new artists and remove existing artists from the list.

• Implement searching functionality to find artists by name or nationality.

40. Composer List:

• Maintain a list of famous music composers, including composer name, nationality, and famous compositions.

• Enable users to add new composers and update existing composer information.

• Implement sorting functionality to arrange the composer list by name, nationality, or famous compositions.

41. Podcast List:

• Create a list of podcast episodes, including episode title, podcast name, and release date.

• Allow users to add new episodes and remove existing episodes from the list.

• Implement filtering functionality to display episodes based on their podcast name or release date.

42. Exercise List:

• Maintain a list of exercises for a workout routine, including exercise name, muscle group, and sets/reps.

• Enable users to add new exercises and remove existing exercises from the list.

• Implement sorting functionality to arrange the exercise list by name, muscle group, or sets/reps.

43. Meal Plan List:

• Create a list of meals in a weekly plan, including meal name, ingredients, and instructions.

• Allow users to add new meals and remove existing meals from the list.

• Implement filtering functionality to display meals based on their category or day of the week.

44. Budget List:

• Maintain a list of budget items for a project, including item name, cost, and category.

• Enable users to add new items and update existing item information.

• Implement sorting functionality to arrange the budget list by name, cost, or category.

45. Presentation List:

• Create a list of presentation topics, including topic name, speaker, and date.

• Allow users to add new topics and remove existing topics from the list.

• Implement sorting functionality to arrange the presentation list by name, speaker, or date.

46. Tour List:

• Maintain a list of tour dates for a band, including city, venue, and date.

• Enable users to add new tour dates and update existing tour date information.

• Implement sorting functionality to arrange the tour list by city, venue, or date.

47. Event List:

• Create a list of upcoming events, including event name, date, and location.

• Allow users to add new events and remove existing events from the list.

• Implement filtering functionality to display events based on their category or date.

48. Developer Tools List:

• Maintain a list of software developer tools, including tool name, purpose, and language support.

• Enable users to add new tools and remove existing tools from the list.

• Implement sorting functionality to arrange the developer tools list by name, purpose, or language support.

49. Framework List:

• Create a list of web development frameworks, including framework name, language, and popularity.

• Allow users to add new frameworks and remove existing frameworks from the list.

• Implement filtering functionality to display frameworks based on their language or popularity.

50. Library List:

• Maintain a list of libraries used in a project, including library name, purpose, and language support.

• Enable users to add new libraries and remove existing libraries from the list.

• Implement sorting functionality to arrange the library list by name, purpose, or language support.

Committing Your Progress

As you implement each scenario, make sure to commit your changes to your GitHub repository. This will create a clear and organized record of your progress, demonstrating your understanding of array manipulation in Angular. Each scenario should be implemented as a separate commit, resulting in a repository with 50+ commits.

OUTPUT:

Github Link:
https://github.com/jerome09232/activity15

Firebase Link:
acitivity15.web.app