# Activity 17: Angular with TypeScript and data structures

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728448317562/798a399a-a63f-4c72-a9f6-061547792ae8.png align="center")

Step 2: inside the **<mark>src folder</mark>**, the **<mark>app folder</mark>** , I created a folder named **<mark>Components</mark>**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728448298384/0134f287-53bd-4c30-b9e1-136ecff1983c.png align="center")

Step 3: Inside this of **<mark>components</mark>** folder, I use the terminal to generate 50 components each.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728462739771/c8ac7966-2993-4aef-b246-ca6d6baa132b.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728462889423/26b1d62d-212f-4ea6-a698-78fb960e58f1.png align="center")

```typescript
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 **<mark>app.component.html</mark>** to connect all of the components using **<mark>navbar</mark>** and **<mark>rounterlink</mark>.**

```typescript
<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.

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

Step 7: First created a project in Firebase website called "**<mark>Angular-TS-DataStructure</mark>**".

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728482026923/5544c78e-1722-484a-977b-dbc049c623b2.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728482871429/58219038-74f4-40de-b26c-4081b43c3403.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728483209959/7588e258-a8c4-4577-b6d8-c05f413594a1.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728483689646/83fa039e-9fbc-4759-8064-2557073a515d.png align="center")

I used the command **<mark>firebase login</mark>** 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728484074424/e8551844-4566-40c9-b82f-b2781c00e406.png align="center")

And next, I did was run the **<mark>firebase init</mark>** 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728484628114/17e48bd0-f62c-4e34-8c6e-d530fbe6f7a1.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728484689988/24c118fe-94d0-46ae-bd92-5ebb6865fdd8.png align="center")

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: **<mark>firebase deploy</mark>**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728484757157/75f79f0f-6474-48ff-b092-cbfe4c102d54.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728485040617/414f6319-b7a5-4c60-84ce-7e4d03d1e7b1.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728485152339/55f8344d-ef9d-4614-aa52-12dcb763c516.png align="center")

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.

**<mark>URL web browser</mark>:** [https://angular-ts-datastructure.web.app/](https://angular-ts-datastructure.web.app/)

**<mark>Github Link</mark>:** [https://github.com/RomelUsigan/Angular\_TS\_DataStructures](https://github.com/RomelUsigan/Angular_TS_DataStructures)