Activity 17: Angular with TypeScript and data structures

Step 1: I created a folder named AngularWithTypeScriptAndDataStructures for this activity in the command prompt and install the needed packages.

Step 2: inside the src folder, the app folder , I created a folder named Components

Step 3: Inside this of components folder, I use the terminal to generate 50 components each.

Step 4: I created a app.module.ts to set up, and configure the routes, imports, and declarations.

import { RouterModule, Routes } from "@angular/router";
import { AppComponent } from "./app.component";
import { NgModule } from "@angular/core";
import { CommonModule, CurrencyPipe } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule } from '@angular/forms';
import { StudentlistComponent } from './Components/studentlist/studentlist.component';
import { EmployeelistComponent } from './Components/employeelist/employeelist.component';
import { FruitlistComponent } from './Components/fruitlist/fruitlist.component';
import { CourselistComponent } from './Components/courselist/courselist.component';
import { BooklistComponent } from './Components/booklist/booklist.component';
import { CitylistComponent } from './Components/citylist/citylist.component';
import { MovielistComponent } from './Components/movielist/movielist.component';
import { CarmodellistComponent } from './Components/carmodellist/carmodellist.component';
import { ProductlistComponent } from './Components/productlist/productlist.component';
import { SubjectlistComponent } from './Components/subjectlist/subjectlist.component';
import { CountrylistComponent } from './Components/countrylist/countrylist.component';
import { SportlistComponent } from './Components/sportlist/sportlist.component';
import { VegetablelistComponent } from './Components/vegetablelist/vegetablelist.component';
import { AnimallistComponent } from './Components/animallist/animallist.component';
import { ToollistComponent } from './Components/toollist/toollist.component';
import { LanguagelistComponent } from './Components/languagelist/languagelist.component';
import { GamelistComponent } from './Components/gamelist/gamelist.component';
import { SoftwarelistComponent } from './Components/softwarelist/softwarelist.component';
import { PhonelistComponent } from './Components/phonelist/phonelist.component';
import { MusicplaylistComponent } from './Components/musicplaylist/musicplaylist.component';
import { FoodmenuComponent } from './Components/foodmenu/foodmenu.component';
import { GrocerylistComponent } from './Components/grocerylist/grocerylist.component';
import { ClassroomlistComponent } from './Components/classroomlist/classroomlist.component';
import { InventorylistComponent } from './Components/inventorylist/inventorylist.component';
import { LecturelistComponent } from './Components/lecturelist/lecturelist.component';
import { StationerylistComponent } from './Components/stationerylist/stationerylist.component';
import { FlowerlistComponent } from './Components/flowerlist/flowerlist.component';
import { DestinationlistComponent } from './Components/destinationlist/destinationlist.component';
import { LaptoplistComponent } from './Components/laptoplist/laptoplist.component';
import { LaptopspecificationslistComponent } from './Components/laptopspecificationslist/laptopspecificationslist.component';
import { ComputerhardwarelistComponent } from './Components/computerhardwarelist/computerhardwarelist.component';
import { MobileapplistComponent } from './Components/mobileapplist/mobileapplist.component';
import { VideolistComponent } from './Components/videolist/videolist.component';
import { TvshowlistComponent } from './Components/tvshowlist/tvshowlist.component';
import { FurniturelistComponent } from './Components/furniturelist/furniturelist.component';
import { AccessorylistComponent } from './Components/accessorylist/accessorylist.component';
import { BuildinglistComponent } from './Components/buildinglist/buildinglist.component';
import { PaintinglistComponent } from './Components/paintinglist/paintinglist.component';
import { ArtistlistComponent } from './Components/artistlist/artistlist.component';
import { ComposerlistComponent } from './Components/composerlist/composerlist.component';
import { PodcastlistComponent } from './Components/podcastlist/podcastlist.component';
import { ExerciselistComponent } from './Components/exerciselist/exerciselist.component';
import { MealplanlistComponent } from './Components/mealplanlist/mealplanlist.component';
import { BudgetlistComponent } from './Components/budgetlist/budgetlist.component';
import { PresentationlistComponent } from './Components/presentationlist/presentationlist.component';
import { TourlistComponent } from './Components/tourlist/tourlist.component';
import { EventlistComponent } from './Components/eventlist/eventlist.component';
import { DevelopertoolslistComponent } from './Components/developertoolslist/developertoolslist.component';
import { FrameworklistComponent } from './Components/frameworklist/frameworklist.component';
import { LibrarylistComponent } from './Components/librarylist/librarylist.component';

const routes: Routes = [
  {path: '', component: StudentlistComponent},
  {path: 'employeelist', component: EmployeelistComponent},
  {path: 'fruitlist', component: FruitlistComponent},
  {path: 'courselist', component: CourselistComponent},
  {path: 'booklist', component: BooklistComponent},
  {path: 'citylist', component: CitylistComponent},
  {path: 'movielist', component: MovielistComponent},
  {path: 'carmodellist', component: CarmodellistComponent},
  {path: 'productlist', component: ProductlistComponent},
  {path: 'subjectlist', component: SubjectlistComponent},
  {path: 'countrylist', component: CountrylistComponent},
  {path: 'sportlist', component: SportlistComponent},
  {path: 'vegetablelist', component: VegetablelistComponent},
  {path: 'animallist', component: AnimallistComponent},
  {path: 'toollist', component: ToollistComponent},
  {path: 'languagelist', component: LanguagelistComponent},
  {path: 'gamelist', component: GamelistComponent},
  {path: 'softwarelist', component: SoftwarelistComponent},
  {path: 'phonelist', component: PhonelistComponent},
  {path: 'musicplaylist', component: MusicplaylistComponent},
  {path: 'foodmenu', component: FoodmenuComponent},
  {path: 'grocerylist', component: GrocerylistComponent},
  {path: 'classroomlist', component: ClassroomlistComponent},
  {path: 'inventorylist', component: InventorylistComponent},
  {path: 'lecturelist', component: LecturelistComponent},
  {path: 'stationerylist', component: StationerylistComponent},
  {path: 'flowerlist', component: FlowerlistComponent},
  {path: 'destinationlist', component: DestinationlistComponent},
  {path: 'laptoplist', component: LaptoplistComponent},
  {path: 'laptopspecificationslist', component: LaptopspecificationslistComponent},
  {path: 'computerhardwarelist', component: ComputerhardwarelistComponent},
  {path: 'mobileapplist', component: MobileapplistComponent},
  {path: 'videolist', component: VideolistComponent},
  {path: 'tvshowlist', component: TvshowlistComponent},
  {path: 'furniturelist', component: FurniturelistComponent},
  {path: 'accessorylist', component: AccessorylistComponent},
  {path: 'buildinglist', component: BuildinglistComponent},
  {path: 'paintinglist', component: PaintinglistComponent},
  {path: 'artistlist', component: ArtistlistComponent},
  {path: 'composerlist', component: ComposerlistComponent},
  {path: 'podcastlist', component: PodcastlistComponent},
  {path: 'exerciselist', component: ExerciselistComponent},
  {path: 'mealplanlist', component: MealplanlistComponent},
  {path: 'budgetlist',component: BudgetlistComponent},
  {path: 'presentationlist', component: PresentationlistComponent},
  {path: 'tourlist', component: TourlistComponent},
  {path: 'eventlist', component: EventlistComponent},
  {path: 'developertoolslist', component: DevelopertoolslistComponent},
  {path: 'frameworklist', component: FrameworklistComponent},
  {path: 'librarylist', component: LibrarylistComponent},

]
@NgModule({
  declarations: [
    AppComponent,
    StudentlistComponent,
    EmployeelistComponent,
    FruitlistComponent,
    CourselistComponent,
    BooklistComponent,
    CitylistComponent,
    MovielistComponent,
    CarmodellistComponent,
    ProductlistComponent,
    SubjectlistComponent,
    CountrylistComponent,
    SportlistComponent,
    VegetablelistComponent,
    AnimallistComponent,
    ToollistComponent,
    LanguagelistComponent,
    GamelistComponent,
    SoftwarelistComponent,
    PhonelistComponent,
    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
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes, {enableTracing: true}),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: I modified the app.component.html to connect all of the components using navbar and rounterlink.

<div class="button-container">
  <button routerLink="" routerLinkActive="router-link-active" class="list-button">Student List</button>
  <button routerLink="employeelist" routerLinkActive="router-link-active" class="list-button">Employee List</button>
  <button routerLink="fruitlist" routerLinkActive="router-link-active" class="list-button">Fruit List</button>
  <button routerLink="courselist" routerLinkActive="router-link-active" class="list-button">Course List</button>
  <button routerLink="booklist" routerLinkActive="router-link-active" class="list-button">Book List</button>
  <button routerLink="citylist" routerLinkActive="router-link-active" class="list-button">City List</button>
  <button routerLink="movielist" routerLinkActive="router-link-active" class="list-button">Movie List</button>
  <button routerLink="carmodellist" routerLinkActive="router-link-active" class="list-button">Car Model List</button>
  <button routerLink="productlist" routerLinkActive="router-link-active" class="list-button">Product List</button>
  <button routerLink="subjectlist" routerLinkActive="router-link-active" class="list-button">Subject List</button>
  <button routerLink="countrylist" routerLinkActive="router-link-active" class="list-button">Country List</button>
  <button routerLink="sportlist" routerLinkActive="router-link-active" class="list-button">Sport List</button>
  <button routerLink="vegetablelist" routerLinkActive="router-link-active" class="list-button">Vegetable List</button>
  <button routerLink="animallist" routerLinkActive="router-link-active" class="list-button">Animal List</button>
  <button routerLink="toollist" routerLinkActive="router-link-active" class="list-button">Tool List</button>
  <button routerLink="languagelist" routerLinkActive="router-link-active" class="list-button">Language List</button>
  <button routerLink="gamelist" routerLinkActive="router-link-active" class="list-button">Game List</button>
  <button routerLink="softwarelist" routerLinkActive="router-link-active" class="list-button">Software List</button>
  <button routerLink="phonelist" routerLinkActive="router-link-active" class="list-button">Phone List</button>
  <button routerLink="musicplaylist" routerLinkActive="router-link-active" class="list-button">Music Playlist</button>
  <button routerLink="foodmenu" routerLinkActive="router-link-active" class="list-button">Food Menu</button>
  <button routerLink="grocerylist" routerLinkActive="router-link-active" class="list-button">Grocery List</button>
  <button routerLink="classroomlist" routerLinkActive="router-link-active" class="list-button">Classroom List</button>
  <button routerLink="inventorylist" routerLinkActive="router-link-active" class="list-button">Inventory List</button>
  <button routerLink="lecturelist" routerLinkActive="router-link-active" class="list-button">Lecture List</button>
  <button routerLink="stationerylist" routerLinkActive="router-link-active" class="list-button">Stationery List</button>
  <button routerLink="flowerlist" routerLinkActive="router-link-active" class="list-button">Flower List</button>
  <button routerLink="destinationlist" routerLinkActive="router-link-active" class="list-button">Destination List</button>
  <button routerLink="laptoplist" routerLinkActive="router-link-active" class="list-button">Laptop List</button>
  <button routerLink="laptopspecificationslist" routerLinkActive="router-link-active" class="list-button">Laptop Specs List</button>
  <button routerLink="computerhardwarelist" routerLinkActive="router-link-active" class="list-button">Computer hardware List</button>
  <button routerLink="mobileapplist" routerLinkActive="router-link-active" class="list-button">Mobile App List</button>
  <button routerLink="videolist" routerLinkActive="router-link-active" class="list-button">Video List</button>
  <button routerLink="tvshowlist" routerLinkActive="router-link-active" class="list-button">TV Show List</button>
  <button routerLink="furniturelist" routerLinkActive="router-link-active" class="list-button">Furniture List</button>
  <button routerLink="accessorylist" routerLinkActive="router-link-active" class="list-button">Accessory List</button>
  <button routerLink="buildinglist" routerLinkActive="router-link-active" class="list-button">Building List</button>
  <button routerLink="paintinglist" routerLinkActive="router-link-active" class="list-button">Painting List</button>
  <button routerLink="artistlist" routerLinkActive="router-link-active" class="list-button">Artist List</button>
  <button routerLink="composerlist" routerLinkActive="router-link-active" class="list-button">Composer List</button>
  <button routerLink="podcastlist" routerLinkActive="router-link-active" class="list-button">Podcast List</button>
  <button routerLink="exerciselist" routerLinkActive="router-link-active" class="list-button">Exercise List</button>
  <button routerLink="mealplanlist" routerLinkActive="router-link-active" class="list-button">Meal Plan List</button>
  <button routerLink="budgetlist" routerLinkActive="router-link-active" class="list-button">Budget List</button>
  <button routerLink="presentationlist" routerLinkActive="router-link-active" class="list-button">Presentation List</button>
  <button routerLink="tourlist" routerLinkActive="router-link-active" class="list-button">Tour List</button>
  <button routerLink="eventlist" routerLinkActive="router-link-active" class="list-button">Event List</button>
  <button routerLink="developertoolslist" routerLinkActive="router-link-active" class="list-button">Developer Tools List</button>
  <button routerLink="frameworklist" routerLinkActive="router-link-active" class="list-button">Framework List</button>
  <button routerLink="librarylist" routerLinkActive="router-link-active" class="list-button">Library List</button>
</div>
<router-outlet></router-outlet>

Step 6: I pushed and committed each of the components in my GitHub repository.

git add . 
git commit -m "#name of components" 
git push -u origin main

Step 7: First created a project in Firebase website called "Angular-TS-DataStructure".

Step 8. After you create a project. Like the previous Activity we did. Click Build and find Hosting. Then Get started

Step 9. Follow the steps on how to set up firebase hosting. Download this command npm install -g firebase-tools using your CMD. But if you have already downloaded it, you don't need to download it again.

Step 10. Open a terminal window and navigate to or create a root directory for your web app. And use these commands “firebase login”, “firebase init”

I used the command firebase login to sign in to my Firebase account through the command prompt. This step connected my project to my Firebase account, allowing me to manage and deploy it easily.

And next, I did was run the firebase init command. This initialized Firebase services in my project, allowing me to choose the features I wanted to use, hosting to set up my project for deployment.

Step 11. When you're ready, deploy your web app

Put your static files (e.g., HTML, CSS, JS) in your app's deploy directory (the default is "public"). Then, run this command from your app's root directory: firebase deploy

Finally, I ran the firebase deploy command to upload my project to Firebase. This step published my Angular app online, making it accessible through the Firebase hosting service.

And then I received the hosting URL, which provided a link to access my deployed Angular app online. This URL allows anyone to view the project directly in their web browser.

URL web browser: https://angular-ts-datastructure.web.app/

Github Link: https://github.com/RomelUsigan/Angular_TS_DataStructures