Loquero, Rodney I.'s Blog
Angular and Typescript with Data Stuctures

Angular and Typescript with Data Stuctures

Loquero, Rodney I.'s photo
Loquero, Rodney I.
·

21 min read

Practicing List Data Structure

For the activity that has been given in our LMS, we create another 50 components using Angular Framework. Mastering data structure is main goal of our activity and here in this documentation I will show you what I did to accomplish the task.

First this is the code snippets of each components I made:

  1. Student List Component

    studentlist.component.html

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newName" placeholder="Enter name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addName()">Add Name</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Names</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let name of names">
     <td>{{ name }}</td>
   </tr>
   </tbody>
 </table>

    studentlist.component.ts

     export class StudentlistComponent {

   names: string[] = ['Rodney Idanan', 'Kim So Hyun', 'Morty Smith'];
   newName: string = '';

   addName() {
     if (this.newName.trim()) {
       this.names.push(this.newName);
       this.newName = '';
     }
   }
 }

  2. Employee List

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newEmployee" placeholder="Enter name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addName()">Add Name</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Employee Names</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let name of names">
     <td>{{ name }}</td>
   </tr>
   </tbody>
 </table>

     export class EmployeelistComponent {
   names: string[] = ['Travis Scott', 'Manny Trillanes', 'Fiona Bratchelor'];
   newEmployee: string = '';

   addName() {
     if (this.newEmployee.trim()) {
       this.names.push(this.newEmployee);
       this.newEmployee = '';
     }
   }
 }

  3. Fruit List

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="fruitNames" placeholder="Enter fruit name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addFruit()">Add Item</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Fruit Names</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let name of fruits">
     <td>{{ name }}</td>
   </tr>
   </tbody>
 </table>

     export class FruitlistComponent {
   fruits: string[] = ['Apple', 'Mango', 'Orange'];
   fruitNames: string = '';

   addFruit() {
     if (this.fruitNames.trim()) {
       this.fruits.push(this.fruitNames);
       this.fruitNames = '';
     }
   }

 }

  4. Course List

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newCourses" placeholder="Enter name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addCourses()">Add Name</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Names</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let course of courses">
     <td>{{ course }}</td>
   </tr>
   </tbody>
 </table>

     export class CourselistComponent {
   courses: string[] = ['Bachelor of Science in Nursing', 'Bachelor of Science in Information Technology', 'Bachelor of Science in Criminology'];
   newCourses: string = '';

   addCourses() {
     if (this.newCourses.trim()) {
       this.courses.push(this.newCourses);
       this.newCourses = '';
     }
   }

 }

  5. Book List

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newBooks" placeholder="Enter book name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addBooks()">Add Book</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Name of Books</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let book of books">
     <td>{{ book }}</td>
   </tr>
   </tbody>
 </table>

     export class BooklistComponent {
   books: string[] = ["To Kill a Mockingbird", "1984", 'Ready Player One'];
   newBooks: string = '';

   addBooks() {
     if (this.newBooks.trim()) {
       this.books.push(this.newBooks);
       this.newBooks = '';
     }
   }

 }

  6. City List

    
 <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newCity" placeholder="Enter city name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addCity()">Add City</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Names of Cities</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let city of cities">
     <td>{{ city }}</td>
   </tr>
   </tbody>
 </table>

     export class CitylistComponent {
   cities: string[] = ['New York', 'London', 'Manila'];
   newCity: string = '';

   addCity() {
     if (this.newCity.trim()) {
       this.cities.push(this.newCity);
       this.newCity = '';
     }
   }

 }

  7. Movie List

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newMovies" placeholder="Enter movie name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addMovies()">Add Movie</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Movie Names</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let movie of movies">
     <td>{{ movie }}</td>
   </tr>
   </tbody>
 </table>

     export class MovielistComponent {
   movies: string[] = ['Inception', 'Interstellar', 'How To Train Your Dragon'];
   newMovies: string = '';

   addMovies() {
     if (this.newMovies.trim()) {
       this.movies.push(this.newMovies );
       this.newMovies = '';
     }
   }

 }

  8. Car Model List

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newCarModels" placeholder="Enter new Car Model" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addCarModels()">Add Car Model</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Car Models</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let cars of carModels">
     <td>{{ cars }}</td>
   </tr>
   </tbody>
 </table>

     export class CarmodellistComponent {
   carModels: string[] = ['Toyota Corolla', 'Honda Civic', 'Ford Raptor'];
   newCarModels: string = '';

   addCarModels() {
     if (this.newCarModels.trim()) {
       this.carModels.push(this.newCarModels);
       this.newCarModels = '';
     }
   }

 }

  9. Product List

     <style>
   thead th {
     border-bottom: 2px solid black;
     padding-bottom: 5px;
   }
 </style>

 <div style="margin: 10px">
   <input type="text" [(ngModel)]="newProducts" placeholder="Enter product name" />
   <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addProducts()">Add Product</button>
 </div>

 <table border="2" style="margin: 10px">
   <thead>
   <tr>
     <th>Product Names</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let prod of products">
     <td>{{ prod }}</td>
   </tr>
   </tbody>
 </table>

     export class ProductlistComponent {
   products: string[] = ['Laptop', 'Smartphone', 'Headphone'];
   newProducts: string = '';

   addProducts() {
     if (this.newProducts.trim()) {
       this.products.push(this.newProducts);
       this.newProducts = '';
     }
   }

 }

  10. Subject List

    <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newSubjects" placeholder="Enter subject" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addSubjects()">Add Subject</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Subjects</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let sub of subjects">
    <td>{{ sub }}</td>
  </tr>
  </tbody>
</table>

    export class SubjectlistComponent {
  subjects: string[] = ['Ethics', 'Science', 'Mathematics'];
  newSubjects: string = '';

  addSubjects() {
    if (this.newSubjects.trim()) {
      this.subjects.push(this.newSubjects);
      this.newSubjects = '';
    }
  }

}

  11. Country List

    <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newCountry" placeholder="Enter country Name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addCountry()">Add Country</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Country Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let country of countries">
    <td>{{ country }}</td>
  </tr>
  </tbody>
</table>

    export class CountrylistComponent {
  countries: string[] = ['United States (North America)', 'Brazil (South America)', 'South Korea (Asia)'];
  newCountry: string = '';

  addCountry() {
    if (this.newCountry.trim()) {
      this.countries.push(this.newCountry);
      this.newCountry = '';
    }
  }
}

  12. Sports List

    <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newSport" placeholder="Enter sports name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addSport()">Add Sport</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Sport Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let sport of sports">
    <td>{{ sport }}</td>
  </tr>
  </tbody>
</table>

    export class SportslistComponent {
  sports: string[] = ['Soccer', 'Basketball', 'Voleyball'];
  newSport: string = '';

  addSport() {
    if (this.newSport.trim()) {
      this.sports.push(this.newSport);
      this.newSport = '';
    }
  }
}

  13. Vegetable List

    <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newVegetables" placeholder="Enter vegetable name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addVegetable()">Add Vegetable</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Vegetables</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let veges of vegetables">
    <td>{{ veges }}</td>
  </tr>
  </tbody>
</table>

    export class VegetablelistComponent {
  vegetables: string[] = ['Carrot', 'Broccoli', 'Cauliflower'];
  newVegetables: string = '';

  addVegetable() {
    if (this.newVegetables.trim()) {
      this.vegetables.push(this.newVegetables);
      this.newVegetables = '';
    }
  }
}

  14. Animal List

    <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newAnimals" placeholder="Enter animal name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addAnimal()">Add Animal</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Animal Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of animals">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

    export class AnimallistComponent {
  animals: string[] = ['Lion', 'Elephant', 'Tiger'];
  newAnimals: string = '';

  addAnimal() {
    if (this.newAnimals.trim()) {
      this.animals.push(this.newAnimals);
      this.newAnimals = '';
    }
  }
}

  15. Tool List

    <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newTool" placeholder="Enter tool name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addTool()">Add Tool</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Tool Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of tools">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

    export class ToollistComponent {
  tools: string[] = ['Hammer', 'Screwdriver', 'Hacksaw'];
  newTool: string = '';

  addTool() {
    if (this.newTool.trim()) {
      this.tools.push(this.newTool);
      this.newTool = '';
    }
  }
}

  16. Language List

    ```python

    Add Language

    Programming Languages
    {{ lang }} 

    
    ```python
    export class LanguagelistComponent {
      languages: string[] = ['Python', 'Java', 'Kotlin'];
      newLanguage: string = '';

      addLanguage() {
        if (this.newLanguage.trim()) {
          this.languages.push(this.newLanguage);
          this.newLanguage = '';
        }
      }
    }

    1. Game List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newGames" placeholder="Enter game name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addGame()">Add Game</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Names of Games</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of games">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class GamelistComponent {
  games: string[] = ['League of Legends', 'Minecraft', 'Call of Duty'];
  newGames: string = '';

  addGame() {
    if (this.newGames.trim()) {
      this.games.push(this.newGames);
      this.newGames = '';
    }
  }
}

    2. Software List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newSoftware" placeholder="Enter software name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addSoftware()">Add Software</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Software Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of softwares">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class SoftwarelistComponent {
  softwares: string[] = ['Microsoft Word', 'Adobe Photoshop', 'OBS Studio'];
  newSoftware: string = '';

  addSoftware() {
    if (this.newSoftware.trim()) {
      this.softwares.push(this.newSoftware);
      this.newSoftware = '';
    }
  }
}

    3. Phone Contact List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newContact" placeholder="Enter name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addContact()">Add Name</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Name of Contacts</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of contacts">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class PhonecontactlistComponent {
  contacts: string[] = ['John Michael', 'Jessy James', 'Gus Fring'];
  newContact: string = '';

  addContact() {
    if (this.newContact.trim()) {
      this.contacts.push(this.newContact);
      this.newContact = '';
    }
  }
}

    4. Music Playlist

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newMusic" placeholder="Enter music name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addMusic()">Add Music</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Music Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of musics">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class MusicplaylistsComponent {
  musics: string[] = ['Shape of You', 'Bohemian Rhapsody', 'Melancholy Hill'];
  newMusic: string = '';

  addMusic() {
    if (this.newMusic.trim()) {
      this.musics.push(this.newMusic);
      this.newMusic = '';
    }
  }
}

    5. Food Menu

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newMenu" placeholder="Enter menu" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addMenu()">Add Menu</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Menus</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of menu">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class FoodmenulistComponent {
  menu: string[] = ['Menudo', 'Caldereta', 'Pochero'];
  newMenu: string = '';

  addMenu() {
    if (this.newMenu.trim()) {
      this.menu.push(this.newMenu);
      this.newMenu = '';
    }
  }
}

    6. Grocery List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newGroceryItem" placeholder="Enter grocery item" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addGrocery()">Add Item</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Grocery Items</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let item of groceries">
    <td>{{ item }}</td>
  </tr>
  </tbody>
</table>

      export class GrocerylistComponent {
  groceries: string[] = ['Eggs', 'Milk', 'Vegetables'];
  newGroceryItem: string = '';

  addGrocery() {
    if (this.newGroceryItem.trim()) {
      this.groceries.push(this.newGroceryItem);
      this.newGroceryItem = '';
    }
  }
}

    7. Classroom List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newClassroomStudent" placeholder="Enter student name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addClassroomStudent()">Add Student</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Classroom Students</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let studName of classroomStudent">
    <td>{{ studName }}</td>
  </tr>
  </tbody>
</table>

      export class ClassroomlistComponent {
  classroomStudent: string[] = ['Rodney Idanan', 'Fiercieval Toribio', 'James Kent Taay'];
  newClassroomStudent: string = '';

  addClassroomStudent() {
    if (this.newClassroomStudent.trim()) {
      this.classroomStudent.push(this.newClassroomStudent);
      this.newClassroomStudent = '';
    }
  }
}

    8. Inventory List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newInventoryItems" placeholder="Enter item name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addInventoryItem()">Add Item</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Inventory Items</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let items of inventoryItems">
    <td>{{ items }}</td>
  </tr>
  </tbody>
</table>

      export class InventorylistComponent {
  inventoryItems: string[] = ['Laptop', 'Printer', 'Mouse'];
  newInventoryItems: string = '';

  addInventoryItem() {
    if (this.newInventoryItems.trim()) {
      this.inventoryItems.push(this.newInventoryItems);
      this.newInventoryItems = '';
    }
  }
}

    9. Lecture List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newLectures" placeholder="Enter lecture name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addLecture()">Add Lecture</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Lectures</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of lectures">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class LecturelistComponent {
  lectures: string[] = ['Data Stuctures', 'Python Introduction', 'Angular Components'];
  newLectures: string = '';

  addLecture() {
    if (this.newLectures.trim()) {
      this.lectures.push(this.newLectures);
      this.newLectures = '';
    }
  }
}

    10. Stationery List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newStationeryItem" placeholder="Enter item name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addStationeryItems()">Add Item</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Stationery Items</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let items of stationeryItems">
    <td>{{ items }}</td>
  </tr>
  </tbody>
</table>

      export class StationerylistComponent {
  stationeryItems: string[] = ['Ballpen', 'Notebook', 'Scissors'];
  newStationeryItem: string = '';

  addStationeryItems() {
    if (this.newStationeryItem.trim()) {
      this.stationeryItems.push(this.newStationeryItem);
      this.newStationeryItem = '';
    }
  }
}

    11. Flower List

      
<style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newFlower" placeholder="Enter name of flower" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addFlower()">Add Flower</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Flower Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of flowers">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class FlowerlistComponent {
  flowers: string[] = ['Rose', 'Tulip', 'Sunflower'];
  newFlower: string = '';

  addFlower() {
    if (this.newFlower.trim()) {
      this.flowers.push(this.newFlower);
      this.newFlower = '';
    }
  }
}

    12. Destination List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newDestination" placeholder="Enter destination name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addDestination()">Add Place</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Names of Places</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let place of destinations">
    <td>{{ place }}</td>
  </tr>
  </tbody>
</table>

      export class DestinationlistComponent {
  destinations: string[] = ['Paris', 'Tokyo', 'London'];
  newDestination: string = '';

  addDestination() {
    if (this.newDestination.trim()) {
      this.destinations.push(this.newDestination);
      this.newDestination = '';
    }
  }
}

    13. Laptop List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newLaptop" placeholder="Enter laptop unit name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addLaptop()">Add Laptop</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Laptop Units</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let brand of laptops">
    <td>{{ brand }}</td>
  </tr>
  </tbody>
</table>

      export class LaptoplistComponent {
  laptops: string[] = ['Dell XPS 13', 'MacBook Pro', 'Infinix Inbook x4'];
  newLaptop: string = '';

  addLaptop() {
    if (this.newLaptop.trim()) {
      this.laptops.push(this.newLaptop);
      this.newLaptop = '';
    }
  }
}

    14. Laptop Specifications List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newLaptopSpecs" placeholder="Enter name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addLaptopSpec()">Add Name</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let specs of laptopSpecs">
    <td>{{ specs }}</td>
  </tr>
  </tbody>
</table>

      export class LaptopspecificationlistComponent {
  laptopSpecs: string[] = ['16GB RAM, Intel i7 Processor', '512GB SSD, AMD Ryzen 5'];
  newLaptopSpecs: string = '';

  addLaptopSpec() {
    if (this.newLaptopSpecs.trim()) {
      this.laptopSpecs.push(this.newLaptopSpecs);
      this.newLaptopSpecs = '';
    }
  }
}

    15. Computer Hardware List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newHardwares" placeholder="Enter hardware name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addHardwares()">Add Hardware</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Computer Hardwares</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let hardware of compHardwares">
    <td>{{ hardware }}</td>
  </tr>
  </tbody>
</table>

      export class ComputerhardwarelistComponent {
  compHardwares: string[] = ['Motherboard', 'Graphics Card', 'CPU'];
  newHardwares: string = '';

  addHardwares() {
    if (this.newHardwares.trim()) {
      this.compHardwares.push(this.newHardwares);
      this.newHardwares = '';
    }
  }
}

    16. Mobile App List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newMobileApps" placeholder="Enter application name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addApps()">Add Application</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Mobile Applications</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let apps of mobileApps">
    <td>{{ apps }}</td>
  </tr>
  </tbody>
</table>

      export class MobileapplistComponent {
  mobileApps: string[] = ['Facebook', 'Instagram', 'Youtube'];
  newMobileApps: string = '';

  addApps() {
    if (this.newMobileApps.trim()) {
      this.mobileApps.push(this.newMobileApps);
      this.newMobileApps = '';
    }
  }
}

    17. Video List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newVideo" placeholder="Enter video name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addVideo()">Add Video</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Videos</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let vid of videos">
    <td>{{ vid }}</td>
  </tr>
  </tbody>
</table>

      export class VideolistComponent {
  videos: string[] = ['The Social Dillema', 'The Planet', 'Vsauce'];
  newVideo: string = '';

  addVideo() {
    if (this.newVideo.trim()) {
      this.videos.push(this.newVideo);
      this.newVideo = '';
    }
  }
}

    18. TV Show List

      
<style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newTvShow" placeholder="Enter tv show" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addTvShow()">Add TV Show</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>TV Shows</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of shows">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class TvshowlistComponent {
  shows: string[] = ['Breaking Bad', 'Prison Break', 'The Sopranos'];
  newTvShow: string = '';

  addTvShow() {
    if (this.newTvShow.trim()) {
      this.shows.push(this.newTvShow);
      this.newTvShow = '';
    }
  }
}

    19. Furniture List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newFurniture" placeholder="Enter furniture" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addFurniture()">Add Furniture</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Furniture Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let items of furnitures">
    <td>{{ items }}</td>
  </tr>
  </tbody>
</table>

      export class FurniturelistComponent {

  furnitures: string[] = ['Sofa', 'Dining Table', 'Bed'];
  newFurniture: string = '';

  addFurniture() {
    if (this.newFurniture.trim()) {
      this.furnitures.push(this.newFurniture);
      this.newFurniture = '';
    }
  }
}

    20. Accessory List

      
<style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newAccessories" placeholder="Enter accessory" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addAccessories()">Add Accessory</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Accessory Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let items of accessories">
    <td>{{ items }}</td>
  </tr>
  </tbody>
</table>

      export class AccessorylistComponent {
  accessories: string[] = ['Phone Case', 'Screen Protector', 'Laptop Bag'];
  newAccessories: string = '';

  addAccessories() {
    if (this.newAccessories.trim()) {
      this.accessories.push(this.newAccessories);
      this.newAccessories = '';
    }
  }
}

    21. Building List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newBuilding" placeholder="Enter building" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addBuilding()">Add Building</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Buildings</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let building of buildings">
    <td>{{ building }}</td>
  </tr>
  </tbody>
</table>

      export class BuildinglistComponent {

  buildings: string[] = ['Library', 'Gymnasium', 'Clinic'];
  newBuilding: string = '';

  addBuilding() {
    if (this.newBuilding.trim()) {
      this.buildings.push(this.newBuilding);
      this.newBuilding = '';
    }
  }
}

    22. Painting List

      
<style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newPainting" placeholder="Enter painting" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addPainting()">Add Painting</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Paintings</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let paint of paintings">
    <td>{{ paint }}</td>
  </tr>
  </tbody>
</table>

      export class PaintinglistComponent {
  paintings: string[] = ['Starry Night', 'Mona Lisa', 'The Scream'];
  newPainting: string = '';

  addPainting() {
    if (this.newPainting.trim()) {
      this.paintings.push(this.newPainting);
      this.newPainting = '';
    }
  }
}

    23. Artist List

      
<style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newArtist" placeholder="Enter artist name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addArtist()">Add Name</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Artist Name</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of artists">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class ArtistlistComponent {
  artists: string[] = ['Vincent Van Gogh', 'Pablo Picasso', 'Bob Ross'];
  newArtist: string = '';

  addArtist() {
    if (this.newArtist.trim()) {
      this.artists.push(this.newArtist);
      this.newArtist = '';
    }
  }
}

    24. Composer List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newComposer" placeholder="Enter composer name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addComposer()">Add Name</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Composer Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of composers">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class ComposerlistComponent {
  composers: string[] = ['Beethoven', 'Wolfgang', 'Kween Yasmin'];
  newComposer: string = '';

  addComposer() {
    if (this.newComposer.trim()) {
      this.composers.push(this.newComposer);
      this.newComposer = '';
    }
  }
}

    25. Podcast List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newPodcast" placeholder="Enter podcast" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addPodcast()">Add Podcast</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Podcasts</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let pods of podcasts">
    <td>{{ pods }}</td>
  </tr>
  </tbody>
</table>

      export class PodcastlistComponent {
  podcasts: string[] = ['The Daily', 'How I Built This', 'Payaman Talks'];
  newPodcast: string = '';

  addPodcast() {
    if (this.newPodcast.trim()) {
      this.podcasts.push(this.newPodcast);
      this.newPodcast = '';
    }
  }
}

    26. Exercise List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newExercise" placeholder="Enter exercise name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addExercise()">Add Exercise</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Exercises list</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let exercise of exercises">
    <td>{{ exercise }}</td>
  </tr>
  </tbody>
</table>

      export class ExerciselistComponent {
  exercises: string[] = ['Push Up', 'Bench Press', 'Curl Ups'];
  newExercise: string = '';

  addExercise() {
    if (this.newExercise.trim()) {
      this.exercises.push(this.newExercise);
      this.newExercise = '';
    }
  }
}

    27. Meal Plan List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newMealplan" placeholder="Enter meal" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addMealplan()">Add Meal</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Meal Plans</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let meal of mealplans">
    <td>{{ meal }}</td>
  </tr>
  </tbody>
</table>

      export class MealplanlistComponent {
  mealplans: string[] = ['Grilled Chicken with Vegetables', 'Caesar Salad', 'Canny Salad'];
  newMealplan: string = '';

  addMealplan() {
    if (this.newMealplan.trim()) {
      this.mealplans.push(this.newMealplan);
      this.newMealplan = '';
    }
  }
}

    28. Budget List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newBudget" placeholder="Enter new budget" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addBudget()">Add Budget</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Budget List</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let budget of budgets">
    <td>{{ budget }}</td>
  </tr>
  </tbody>
</table>

      export class BudgetlistComponent {
  budgets: string[] = ['Food Expenses', 'Fare Expenses', 'Daily Expenses'];
  newBudget: string = '';

  addBudget() {
    if (this.newBudget.trim()) {
      this.budgets.push(this.newBudget);
      this.newBudget = '';
    }
  }
}

    29. Presentation List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newPresentations" placeholder="Enter presentation title" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addPresentations()">Add Presentation</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Presentation Titles</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let present of presentations">
    <td>{{ present }}</td>
  </tr>
  </tbody>
</table>

      export class PresentationlistComponent {
  presentations: string[] = ['Artificial Intelligence', 'Climate Change', 'Contemporary World'];
  newPresentations: string = '';

  addPresentations() {
    if (this.newPresentations.trim()) {
      this.presentations.push(this.newPresentations);
      this.newPresentations = '';
    }
  }
}

    30. Tour List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newTourLocation" placeholder="Enter Location" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addTourLocation()">Add Location</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Tour Locations</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let tours of tourLocations">
    <td>{{ tours }}</td>
  </tr>
  </tbody>
</table>

      export class TourlistComponent {
  tourLocations: string[] = ['Tokyo, Japan', 'Perth, Australia', 'Tondo, Manila'];
  newTourLocation: string = '';

  addTourLocation() {
    if (this.newTourLocation.trim()) {
      this.tourLocations.push(this.newTourLocation);
      this.newTourLocation = '';
    }
  }
}

    31. Event List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newEvent" placeholder="Enter event name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addEvent()">Add Event</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Event Names</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of events">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class EventlistComponent {
  events: string[] = ['Music Festival', 'Tech Conference', 'Comic Con'];
  newEvent: string = '';

  addEvent() {
    if (this.newEvent.trim()) {
      this.events.push(this.newEvent);
      this.newEvent = '';
    }
  }
}

    32. Developer Tools List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newDevTools" placeholder="Enter developer tool name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addDevTool()">Add Dev Tool</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Developer Tools</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let tools of devTools">
    <td>{{ tools }}</td>
  </tr>
  </tbody>
</table>

      export class DevelopertoollistComponent {
  devTools: string[] = ['Visual Studio Code', 'GitHub', 'WebStorm'];
  newDevTools: string = '';

  addDevTool() {
    if (this.newDevTools.trim()) {
      this.devTools.push(this.newDevTools);
      this.newDevTools = '';
    }
  }
}

    33. Framework List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newFramework" placeholder="Enter framework name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addFramework()">Add Framework</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Framework List</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of frameworks">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class FrameworklistComponent {
  frameworks: string[] = ['Angular', 'React', 'Bootstrap'];
  newFramework: string = '';

  addFramework() {
    if (this.newFramework.trim()) {
      this.frameworks.push(this.newFramework);
      this.newFramework = '';
    }
  }
}

    34. Library List

      <style>
  thead th {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
  }
</style>

<div style="margin: 10px">
  <input type="text" [(ngModel)]="newLibraries" placeholder="Enter library name" />
  <button style="margin: 4px; margin-top: -3px" class="btn btn-primary" (click)="addLibrary()">Add Library</button>
</div>

<table border="2" style="margin: 10px">
  <thead>
  <tr>
    <th>Library List</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let name of libraries">
    <td>{{ name }}</td>
  </tr>
  </tbody>
</table>

      export class LibrarylistComponent {
  libraries: string[] = ['jQuery', 'Lodash', 'NumPy'];
  newLibraries: string = '';

  addLibrary() {
    if (this.newLibraries.trim()) {
      this.libraries.push(this.newLibraries);
      this.newLibraries = '';
    }
  }
}

      Github: https://github.com/rodney-lqr/AngularTypescriptDS

      URL: https://rodney-ngts-4a.web.app/

AngularTypeScript