Angular with TypeScript and data structures

• Documentation of my 50 Angular Data Structure and uploading it to firebase

First i use my command prompt to go to my angular folder using this command

cd - Change Directory
dir - To show all the directory

Second i ng new project and name it angular_Data_structure

ng new angular_Data_structure

Third i open my angular application and make a components folder and go back to my command prompt to install bootstrap using this command

npm install bootstrap

Fourth i go back to my angular application and do this code to my main.ts file

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Fifth i delete my selector and module to my app.component.ts i also made app.component.css and add this code

.btn-dark a{
    text-decoration: none;
    color: var(--bs-white);
}
.btn-dark:hover {
    background-color: var(--bs-primary);
}
.border-danger {
    border: solid 2px;
}

Sixth i also make an app.module.ts file and add this code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule, Routes} from '@angular/router';
import {CommonModule} from "@angular/common";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AppComponent} from "./app.component";
import {provideAnimationsAsync} from "@angular/platform-browser/animations/async";
import { FormsModule } from '@angular/forms';
import { StudentListComponent } from './components/student-list/student-list.component';
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
import { FruitListComponent } from './components/fruit-list/fruit-list.component';
import { CourseListComponent } from './components/course-list/course-list.component';
import { BookListComponent } from './components/book-list/book-list.component';
import { CityListComponent } from './components/city-list/city-list.component';
import { MovieListComponent } from './components/movie-list/movie-list.component';
import { CarModelListComponent } from './components/car-model-list/car-model-list.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { SubjectListComponent } from './components/subject-list/subject-list.component';
import { CountryListComponent } from './components/country-list/country-list.component';
import { SportsListComponent } from './components/sports-list/sports-list.component';
import { VegetableListComponent } from './components/vegetable-list/vegetable-list.component';
import { AnimalListComponent } from './components/animal-list/animal-list.component';
import { ToolListComponent } from './components/tool-list/tool-list.component';
import { LanguageListComponent } from './components/language-list/language-list.component';
import { GameListComponent } from './components/game-list/game-list.component';
import { SoftwareListComponent } from './components/software-list/software-list.component';
import { PhoneContactListComponent } from './components/phone-contact-list/phone-contact-list.component';
import { MusicPlaylistComponent } from './components/music-playlist/music-playlist.component';
import { FoodMenuComponent } from './components/food-menu/food-menu.component';
import { GroceryListComponent } from './components/grocery-list/grocery-list.component';
import { ClassroomListComponent } from './components/classroom-list/classroom-list.component';
import { InventoryListComponent } from './components/inventory-list/inventory-list.component';
import { LectureListComponent } from './components/lecture-list/lecture-list.component';
import { StationeryListComponent } from './components/stationery-list/stationery-list.component';
import { FlowerListComponent } from './components/flower-list/flower-list.component';
import { DestinationListComponent } from './components/destination-list/destination-list.component';
import { LaptopListComponent } from './components/laptop-list/laptop-list.component';
import { LaptopSpecificationsListComponent } from './components/laptop-specifications-list/laptop-specifications-list.component';
import { ComputerHardwareListComponent } from './components/computer-hardware-list/computer-hardware-list.component';
import { MobileAppListComponent } from './components/mobile-app-list/mobile-app-list.component';
import { VideoListComponent } from './components/video-list/video-list.component';
import { TvShowListComponent } from './components/tv-show-list/tv-show-list.component';
import { FurnitureListComponent } from './components/furniture-list/furniture-list.component';
import { AccessoryListComponent } from './components/accessory-list/accessory-list.component';
import { BuildingListComponent } from './components/building-list/building-list.component';
import { PaintingListComponent } from './components/painting-list/painting-list.component';
import { ArtistListComponent } from './components/artist-list/artist-list.component';
import { ComposerListComponent } from './components/composer-list/composer-list.component';
import { PodcastListComponent } from './components/podcast-list/podcast-list.component';
import { ExerciseListComponent } from './components/exercise-list/exercise-list.component';
import { MealPlanListComponent } from './components/meal-plan-list/meal-plan-list.component';
import { BudgetListComponent } from './components/budget-list/budget-list.component';
import { PresentationListComponent } from './components/presentation-list/presentation-list.component';
import { TourListComponent } from './components/tour-list/tour-list.component';
import { EventListComponent } from './components/event-list/event-list.component';
import { DeveloperToolsListComponent } from './components/developer-tools-list/developer-tools-list.component';
import { FrameworkListComponent } from './components/framework-list/framework-list.component';
import { LibraryListComponent } from './components/library-list/library-list.component';

const routes: Routes = [
    {path: ' ', component: AppComponent},
    {path: 'student-list', component: StudentListComponent},
    {path: 'employee-list', component: EmployeeListComponent},
    {path: 'fruit-list', component: FruitListComponent},
    {path: 'course-list', component: CourseListComponent},
    {path: 'book-list', component: BookListComponent},
    {path: 'city-list', component: CityListComponent},
    {path: 'movie-list', component: MovieListComponent},
    {path: 'car-model-list', component: CarModelListComponent},
    {path: 'product-list', component: ProductListComponent},
    {path: 'subject-list', component: SubjectListComponent},
    {path: 'country-list', component: CountryListComponent},
    {path: 'sports-list', component: SportsListComponent},
    {path: 'vegetable-list', component: VegetableListComponent},
    {path: 'animal-list', component: AnimalListComponent},
    {path: 'tool-list', component: ToolListComponent},
    {path: 'language-list', component: LanguageListComponent},
    {path: 'game-list', component: GameListComponent},
    {path: 'software-list', component: SoftwareListComponent},
    {path: 'phone-contact-list', component: PhoneContactListComponent},
    {path: 'music-playlist', component: MusicPlaylistComponent},
    {path: 'food-menu', component: FoodMenuComponent},
    {path: 'grocery-list',component: GroceryListComponent},
    {path: 'classroom-list', component: ClassroomListComponent},
    {path: 'inventory-list',component: InventoryListComponent},
    {path: 'lecture-list', component: LectureListComponent},
    {path: 'stationery-list', component: StationeryListComponent},
    {path: 'flower-list',component: FlowerListComponent},
    {path: 'destination-list', component: DestinationListComponent},
    {path: 'laptop-list', component: LaptopListComponent},
    {path: 'laptop-specifications-list', component: LaptopSpecificationsListComponent},
    {path: 'computer-hardware-list', component: ComputerHardwareListComponent},
    {path: 'mobile-app-list', component: MobileAppListComponent},
    {path: 'video-list', component: VideoListComponent},
    {path: 'tv-show-list', component: TvShowListComponent},
    {path: 'furniture-list', component: FurnitureListComponent},
    {path: 'accessory-list', component: AccessoryListComponent},
    {path: 'building-list', component: BuildingListComponent},
    {path: 'painting-list', component: PaintingListComponent},
    {path: 'artist-list', component: ArtistListComponent},
    {path: 'composer-list', component: ComposerListComponent},
    {path: 'podcast-list', component: PodcastListComponent},
    {path: 'exercise-list', component: ExerciseListComponent},
    {path: 'meal-plan-list', component: MealPlanListComponent},
    {path: 'budget-list', component: BudgetListComponent},
    {path: 'presentation-list', component: PresentationListComponent},
    {path: 'tour-list', component: TourListComponent},
    {path: 'event-list', component: EventListComponent},
    {path: 'developer-tools-list', component: DeveloperToolsListComponent},
    {path: 'framework-list', component: FrameworkListComponent},
    {path: 'library-list', component: LibraryListComponent},
];

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(routes, {enableTracing: true}),
        FormsModule,
    ],
    declarations: [
        AppComponent,
        StudentListComponent,
        EmployeeListComponent,
        FruitListComponent,
        CourseListComponent,
        BookListComponent,
        CityListComponent,
        MovieListComponent,
        CarModelListComponent,
        ProductListComponent,
        SubjectListComponent,
        CountryListComponent,
        SportsListComponent,
        VegetableListComponent,
        AnimalListComponent,
        ToolListComponent,
        LanguageListComponent,
        GameListComponent,
        SoftwareListComponent,
        PhoneContactListComponent,
        MusicPlaylistComponent,
        FoodMenuComponent,
        GroceryListComponent,
        ClassroomListComponent,
        InventoryListComponent,
        LectureListComponent,
        StationeryListComponent,
        FlowerListComponent,
        DestinationListComponent,
        LaptopListComponent,
        LaptopSpecificationsListComponent,
        ComputerHardwareListComponent,
        MobileAppListComponent,
        VideoListComponent,
        TvShowListComponent,
        FurnitureListComponent,
        AccessoryListComponent,
        BuildingListComponent,
        PaintingListComponent,
        ArtistListComponent,
        ComposerListComponent,
        PodcastListComponent,
        ExerciseListComponent,
        MealPlanListComponent,
        BudgetListComponent,
        PresentationListComponent,
        TourListComponent,
        EventListComponent,
        DeveloperToolsListComponent,
        FrameworkListComponent,
        LibraryListComponent,
    ],
    providers: [
        provideAnimationsAsync(),
    ],

    bootstrap: [
        AppComponent,
    ],
    exports: [RouterModule],
})
export class AppModule{}

Seventh i also add this code to my app.component.html

<div class="btn-group d-flex flex-wrap" role="group" aria-label="Responsive button group">
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/student-list">Student List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/employee-list">Employee List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/fruit-list">Fruit List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/course-list">Course List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/book-list">Book List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/city-list">City List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/movie-list">Movie List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/car-model-list">Car Model List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/product-list">Product List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/subject-list">Subject List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/country-list">Country List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/sports-list">Sports List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/vegetable-list">Vegetable List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/animal-list">Animal List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/tool-list">Tool List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/language-list">Programming Language List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/game-list">Game List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/software-list">Software List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/phone-contact-list">Phone Contact List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/music-playlist">Music Play List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/food-menu">Food Menu List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/grocery-list">Grocery List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/classroom-list">Classroom List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/inventory-list">Inventory List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/lecture-list">Lecture List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/stationery-list">Stationery List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/flower-list">Flower List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/destination-list">Destination List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/laptop-list">Laptop List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/laptop-specifications-list">Laptop Specifications List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/computer-hardware-list">Computer Hardware List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/mobile-app-list">Mobile App List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/video-list">Video List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/tv-show-list">TV Show List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/furniture-list">Furniture List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/accessory-list">Accessory List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/building-list">Building List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/painting-list">Painting List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/artist-list">Artist List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/composer-list">Composer List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/podcast-list">Podcast List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/exercise-list">Exercise List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/meal-plan-list">Meal Plan List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/budget-list">Budget List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/presentation-list">Presentation List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/tour-list">Tour List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/event-list">Event List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/developer-tools-list">Developer Tools List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/framework-list">Framework List</a></button>
  <button type="button" class="btn btn-dark rounded border-danger"><a routerLink="/library-list">Library List</a></button>
</div>
<hr class="border-danger rounded">
<router-outlet/>

Eighth i go back to my command prompt and ng generate component components this 50 components

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.

ng generate component components/StudentList 
ng generate component components/EmployeeList 
.....
....

Nineth i go to firebase website and login my account then create new project

Then i go to my angular folder using command prompt and then i firebase init

Tenth ng build

Eleventh firebase deploy

Twelveth add this code to firebase.json and repeat firebase init, ng build and firebase deploy if you are using vs code

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "asia-east1"
    }
  }
}

And i commit this to my github repository the link is

https://github.com/BrandonLCanete/fiftyAngularDataStructures.git

Firebase Link

https://canete-angular-data-structure.web.app/