Activity 15: Angular with TypeScript and data structures

In navigate component. html where all the components link together, then i add a button for style.

<style>

    body {
      background-color: #f2f2f2;
    }

    h1 {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
      margin-top: 10px;
    }

    .input-container {
      margin-bottom: 20px;
    }

    input[type="text"] {
      width: 10%;
      height: 30px;
      padding: 10px;
      margin-top:  50px;
      border: none;
      border-radius: 4px;
      background-color: #f2f2f2;
      color: #0a0303;
      margin-left: 30px;
      top: 10%;
    }

    button {
      width: 20%;
      height: 40px;
      padding: 10px;
      border: none;

      border-radius: 4px;
      background-color: #62c3fcb2;
      color: #fff;
      cursor: pointer;
      margin-left: 30px;
      position: relative; 
      bottom: 10%;
      margin-top: 20px;

    }
    button:hover{
    background: #f2f2f2;
    color: #333;
    }

    button a {
        text-decoration: none;
        color: #333;
        font-size: 1rem;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-family: 700;
    }
</style>    

<h1 class="headinng">Angular components with Data structure</h1>

<button><a  routerLink ='/studentlist'>student-list</a></button>
<button><a  routerLink ='/employeelist'>employee-list</a></button>
<button><a  routerLink ='/fruitlist'>fruit-list</a></button>
<button><a  routerLink ='/courselist'>Courselist</a></button>
<button><a  routerLink ='/booklist'>Book list</a></button>
<button><a  routerLink ='/citylist'>City list</a></button>
<button><a  routerLink ='/movielist'>Movie list</a></button>
<button><a  routerLink ='/carlist'>Car model list</a></button>
<button><a  routerLink ='/productlist'>Product list</a></button>
<button><a  routerLink ='/subjectlist'>Subject list</a></button>

<button><a  routerLink ='/sportlist'>Sport list</a></button>
<button><a  routerLink ='/vegetableslist'>Vegetable list</a></button>
<button><a  routerLink ='/animallist'>Animal list</a></button>
<button><a  routerLink ='/toollist'>Tool list</a></button>
<button><a  routerLink ='/languagelist'>Language list</a></button>
<button><a  routerLink ='/gamelist'>Game list</a></button>
<button><a  routerLink ='/softwarelsit'>Software list</a></button>
<button><a  routerLink ='/contactlist'>Contact list</a></button>
<button><a  routerLink ='/musiclist'>Music list</a></button>
<button><a  routerLink ='/foodmenulist'>Food menu list</a></button>
<button><a  routerLink ='/countrylist'>Country list</a></button>

<button><a  routerLink ='/grocerylist'>Grocery list</a></button>
<button><a  routerLink ='/classroomlist'>Classroom list</a></button>
<button><a  routerLink ='/inventorylist'>Inventory list</a></button>
<button><a  routerLink ='/lecturelist'>Lecture list</a></button>
<button><a  routerLink ='/stationarylist'>Stationary list</a></button>
<button><a  routerLink ='/flowerlist'>Flower list</a></button>
<button><a  routerLink ='/destinantionlist'>Destination list</a></button>
<button><a  routerLink ='/loptoplist'>Loptop list</a></button>
<button><a  routerLink ='/specificationlist'>Loptop specifications list</a></button>
<button><a  routerLink ='/computerhardware'>Computer hardware list</a></button>


<button><a  routerLink ='/mobilelist'>Mobile list</a></button>
<button><a  routerLink ='/videolist'>Video list</a></button>
<button><a  routerLink ='/tvshow'>TV show list</a></button>
<button><a  routerLink ='/furniturelist'>Furniture list</a></button>
<button><a  routerLink ='/composerlist'>Composer list</a></button>
<button><a  routerLink ='/accessorylist'> Accessory  list</a></button>
<button><a  routerLink ='/buildinglist'> Building list</a></button>
<button><a  routerLink ='/paintinglist'>Painting list</a></button>
<button><a  routerLink ='/artistlist'>Artist  list</a></button>
<button><a  routerLink ='/podcastlist'>Podcast list</a></button>
<button><a  routerLink ='/accessorylist'>Accessory list</a></button>

Lastly I pushed and committed each file on GitHub repository, but for now I cannot deploy the angular project.

gid add .
git status
git push -u oriign main

OUTPUT:

GitHub Repository: https://github.com/Koronuma4Dev/LatestAngularComponents

firebase hosting: