Activity 15: Angular with TypeScript and Data Structures
To apply my learning in our lesson, Lets create 50 example scenarios for lists that is stated in this Activity.
The goal in this Activity is to get familiar with handling Typescript arrays in an Angular Environment.
Applying what I understand of the lesson and to master basic operations like adding and fetching items from a list.
Here are 50 example scenarios for lists you can implement in your activity:
Student List – Manage a list of students.
Employee List – Manage a list of employees.
Fruit List – List different types of fruits.
Course List – List of courses offered in a school.
Book List – List of books in a library.
City List – List of cities a company operates in.
Movie List – List of movies in a theater.
Car Model List – List of car models available at a dealership.
Product List – List of products sold in a store.
Subject List – List of subjects taught in a semester.
Country List – List of countries by continent.
Sports List – List of popular sports.
Vegetable List – List of vegetables available at a grocery store.
Animal List – List of animals in a zoo.
Tool List – List of tools used in a workshop.
Language List – List of programming languages.
Game List – List of video games.
Software List – List of software installed on a computer.
Phone Contact List – List of phone contacts.
Music Playlist – List of songs in a playlist.
Food Menu – List of food items on a restaurant menu.
Grocery List – List of items to buy in a grocery store.
Classroom List – List of students in a classroom.
Inventory List – List of items in a store’s inventory.
Lecture List – List of lectures scheduled for a course.
Stationery List – List of office stationery.
Flower List – List of flowers for a wedding.
Destination List – List of travel destinations.
Laptop List – List of laptop models.
Laptop Specifications List – List of laptop specifications.
Computer Hardware List – List of computer components.
Mobile App List – List of apps on a phone.
Video List – List of videos in a library.
TV Show List – List of TV shows available for streaming.
Furniture List – List of furniture items in a store.
Accessory List – List of accessories for mobile phones.
Building List – List of buildings in a campus.
Painting List – List of famous paintings.
Artist List – List of famous artists.
Composer List – List of famous music composers.
Podcast List – List of podcast episodes.
Exercise List – List of exercises for a workout routine.
Meal Plan List – List of meals in a weekly plan.
Budget List – List of budget items for a project.
Presentation List – List of presentation topics.
Tour List – List of tour dates for a band.
Event List – List of upcoming events.
Developer Tools List – List of software developer tools.
Framework List – List of web development frameworks.
Library List – List of libraries used in a project.
1. Student List – Manage a list of students.
Create a New Angular Component in your Project.
ng generate component components/student-list
Create the HTML file.
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 getStudentList()">{{ student }}</li>
</ul>
</div>
Then create or define the typescript file of your Student list.
student-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-student-list',
templateUrl: './student-list.component.html',
styleUrl: './student-list.component.css'
})
export class StudentListComponent {
students: string[] = ['Alice', 'Bob', 'Charlie']; // Initial list of students
newStudent: string = ''; // Input field for new student
// Method to add a new student
addStudent() {
if (this.newStudent.trim()) { // Check for empty input
this.students.push(this.newStudent); // Add new student to the list
this.newStudent = ''; // Clear the input field
}
}
// Method to fetch the list of students
getStudentList() {
return this.students; // Return the list of students
}
}
Output:
Commit Message:
2. Employee List – Manage a list of employees.
Create Component
ng generate component components/employee-list
Create the HTML file
<div>
<h2>Employee List</h2>
<!-- Input field for adding a new employee -->
<input type="text" [(ngModel)]="newEmployee" placeholder="Enter employee name" />
<button (click)="addEmployee()">Add Employee</button>
<!-- Display the list of employees -->
<ul>
<li *ngFor="let employee of getEmployeeList()">{{ employee }}</li>
</ul>
</div>
Then create or define the typescript file
import { Component } from '@angular/core';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent {
employees: string[] = [];
newEmployee: string = '';
addEmployee() {
if (this.newEmployee) {
this.employees.push(this.newEmployee);
this.newEmployee = ''; // Clear the input field after adding
}
}
getEmployeeList() {
return this.employees;
}
}
Output:
Commit Message:
3. Fruit List – List different types of fruits.
Create Component
ng generate component components/fruit-list
Create the HTML file
<div>
<h2>Fruit List</h2>
<!-- Input field for adding a new fruit -->
<input type="text" [(ngModel)]="newFruit" placeholder="Enter fruit name" />
<button (click)="addFruit()">Add Fruit</button>
<!-- Display the list of fruits -->
<ul>
<li *ngFor="let fruit of getFruitList()">{{ fruit }}</li>
</ul>
</div>
Then create or define the typescript file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FruitListComponent } from './fruit-list.component';
describe('FruitListComponent', () => {
let component: FruitListComponent;
let fixture: ComponentFixture<FruitListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [FruitListComponent]
})
.compileComponents();
fixture = TestBed.createComponent(FruitListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Output:
Commit Message:
4. Course List – List of courses offered in a school
Create the Course List Component
ng generate component components/course-list
HTML: course-list.component.html
<div>
<h2>Course List</h2>
<!-- Input field for adding a new course -->
<input type="text" [(ngModel)]="newCourse" placeholder="Enter course name" />
<button (click)="addCourse()">Add Course</button>
<!-- Display the list of courses -->
<ul>
<li *ngFor="let course of courses; let i = index">
{{ course }}
<button (click)="removeCourse(i)">Remove</button>
</li>
</ul>
</div>
TypeScript: course-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-course-list',
templateUrl: './course-list.component.html',
styleUrls: ['./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
// 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
}
}
Output:
Commit Message:
5. Book List – List of books in a library
Create the Book List Component
ng generate component components/book-list
HTML: book-list.component.html
<div>
<h2>Book List</h2>
<!-- Input field for adding a new book -->
<input type="text" [(ngModel)]="newBook" placeholder="Enter book title" />
<button (click)="addBook()">Add Book</button>
<!-- Display the list of books -->
<ul>
<li *ngFor="let book of books; let i = index">
{{ book }}
<button (click)="removeBook(i)">Remove</button>
</li>
</ul>
</div>
TypeScript: book-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-book-list',
templateUrl: './book-list.component.html',
styleUrls: ['./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
// 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
}
}
Output:
Commit Message:
This is the Final Output of my Angular Data Structure where in it is already deployed in Firebase.
Importance of Practicing Angular Data Structures and Firebase Deployment
Practicing Angular data structures and Firebase deployment is crucial for developing efficient web applications. Understanding data structures allows developers to manage and manipulate data effectively, enhancing app performance and enabling dynamic updates. This practice also improves problem-solving skills and helps developers leverage TypeScript features for cleaner code. On the other hand, deploying applications on Firebase provides scalability, real-time data updates, and eliminates the need for a separate backend, speeding up development. Firebase’s easy deployment process and integration with Google services further simplify adding features like analytics and security, ensuring user data protection. Overall, these skills make developers stronger and prepare them for future challenges.
Key Points:
Data Structure Importance:
Enhances understanding of Angular and app organization.
Improves data management for smoother app performance.
Supports dynamic updates for real-time changes.
Develops problem-solving skills beneficial for coding and interviews.
Increases TypeScript knowledge for cleaner code.
Firebase Deployment Importance:
Provides scalability to handle growing user demand.
Enables real-time data updates for instant information sharing.
Eliminates the need for building a separate backend.
Simplifies deployment processes for quick app launch.
Integrates well with Google services for added functionalities.
Ensures built-in security for user data protection.
Here’s the link of my Project deployed in Firebase:
Angular Data Structure Deployed in Firebase
