Set Up the Angular Project

Create a new Angular project (if you don't already have one):
```
 ng new angular-data-structures
```
- When prompted, choose Angular routing: Yes
- Select CSS as the stylesheet format (or any other if preferred).
Navigate into your project directory:
```
 cd angular-data-structures
```

Generate 50 Components

Next, we'll create 50 different components. Each component will handle its own array-based list.

Generate the first component:

ng generate component components/list1

Repeat the command for all 50 components
This will create 50 folders inside the src/app/components/ directory, with each folder containing 4 files: .html, .ts, .css, and .spec.ts files for each component.

Step 3: Set Up Routing for All Components

To navigate between the components, we need to set up Angular's routing.

Open src/app/app-routing.module.ts (or app.routes.ts if that's what you use) and import all 50 components.
Modify the file as follows:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { List1Component } from './components/list1/list1.component';
import { List2Component } from './components/list2/list2.component';
// Import all other components
import { List50Component } from './components/list50/list50.component';

const routes: Routes = [
  { path: 'list1', component: List1Component },
  { path: 'list2', component: List2Component },
  // Add routes for all other lists
  { path: 'list50', component: List50Component },
  { path: '', redirectTo: '/list1', pathMatch: 'full' }  // Redirect to list1 by default
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This sets up routes for all 50 components so you can navigate between them.

Step 4: Implement Lists in Components

Now, we will implement a list in each component. Let’s start with List1Component:

In list1.component.ts, modify the component to use an array for the list of items:

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

@Component({
  selector: 'app-list1',
  templateUrl: './list1.component.html',
  styleUrls: ['./list1.component.css']
})
export class List1Component {
  items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  addItem(newItem: string) {
    if (newItem) {
      this.items.push(newItem);  // Add new item to the list
    }
  }
}

In list1.component.html, create an input box to add items and display the list:

<h3>List 1</h3>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
<input #newItem type="text" placeholder="Add new item">
<button (click)="addItem(newItem.value); newItem.value=''">Add</button>

Repeat these steps for each of the other components (list2, list3, etc.), making slight variations in the list or its functionality as needed. Here’s an example for List2Component:

// list2.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-list2',
  templateUrl: './list2.component.html',
  styleUrls: ['./list2.component.css']
})
export class List2Component {
  numbers: number[] = [1, 2, 3];

  addNumber(newNumber: string) {
    const num = parseInt(newNumber, 10);
    if (!isNaN(num)) {
      this.numbers.push(num);
    }
  }
}

<!-- list2.component.html -->
<h3>Number List</h3>
<ul>
  <li *ngFor="let num of numbers">{{ num }}</li>
</ul>
<input #newNumber type="text" placeholder="Add number">
<button (click)="addNumber(newNumber.value); newNumber.value=''">Add</button>

Step 5: Link Components on the Main Page

To allow users to navigate between the components, add links on the main page (app.component.html):

Open app.component.html and create a navigation menu:

<nav>
  <a routerLink="/list1">List 1</a> |
  <a routerLink="/list2">List 2</a> |
  <!-- Add links to all other lists -->
  <a routerLink="/list50">List 50</a>
</nav>
<router-outlet></router-outlet>

This will create navigation links for all 50 components.

Step 6: Commit and Push to GitHub

After each step or after implementing each component, commit your changes to GitHub.

Initialize a Git repository (if you haven’t done so):

 git init
 git remote add origin https://github.com/your-username/angular-data-structures.git

Add and commit changes:

 git add .
 git commit -m "Implemented List 1"
 git push origin main

Repeat this for all components, committing each one separately as required.

Step 7: Deploy to Firebase Hosting

Install Firebase tools (if you don’t have them yet):
```
 npm install -g firebase-tools
```
Login to Firebase:
```
 firebase login
```
Initialize Firebase in your Angular project:
```
 firebase init
```
- Select Hosting and choose your Firebase project.
- Choose the dist/angular-data-structures folder as the public directory.
- Set up the app as a Single Page Application.