Angular API

Learn how to integrate APIs into an Angular project

Objectives

1. Learn how to apply APIs in an Angular.

2. Understand how to create, read, update, and delete (CRUD) data using APIs.

3. Customize and enhance the design of the application using Angular features.

4. Deploy the final activity on Firebase hosting.

5. Document the process

Step 1: Fork this

ails.

<h1>Restaurants</h1>

<!--CREAE RESTAURANT-->
<form #restaurantForm="ngForm" (ngSubmit)="createRestaurant(restaurantForm)">
  <input
    type="text"
    name="name"
    ngModel
    placeholder="Name"
    required
    #name="ngModel"
  />
  <div *ngIf="name.invalid && name.touched">Name is required</div>

  <input
    type="text"
    name="address"
    ngModel
    placeholder="Address"
    required
    #address="ngModel"
  />
  <div *ngIf="address.invalid && address.touched">Address is required</div>

  <input
    type="text"
    name="phone"
    ngModel
    placeholder="Phone"
    required
    #phone="ngModel"
  />
  <div *ngIf="phone.invalid && phone.touched">Phone is required</div>

  <input
    type="email"
    name="email"
    ngModel
    placeholder="Email"
    required
    #email="ngModel"
  />
  <div *ngIf="email.invalid && email.touched">Email is required</div>

  <input
    type="number"
    name="user_id"
    ngModel
    placeholder="User ID"
    required
    #userId="ngModel"
  />
  <div *ngIf="userId.invalid && userId.touched">User ID is required</div>

  <input
    type="number"
    name="category_id"
    ngModel
    placeholder="Category ID"
    required
    #categoryId="ngModel"
  />
  <div *ngIf="categoryId.invalid && categoryId.touched">Category ID is required</div>

  <input
    type="text"
    name="description"
    ngModel
    placeholder="Description"
    required
    #description="ngModel"
  />
  <div *ngIf="description.invalid && description.touched">Description is required</div>

  <button type="submit" [disabled]="restaurantForm.invalid">
    Create Restaurant
  </button>
</form>


<section>
<table border="1" class="table table-striped">
  <thead>
  <tr>
    <th>Restaurant Name</th>
    <th>Restaurant UUID</th>
    <th>Location</th>
    <th>Description</th>
    <th>Actions</th> <!-- Add Actions column -->
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let restaurant of restaurants">
    <td>{{ restaurant.name }}</td>
    <td>{{ restaurant.restaurant_uuid }}</td>
    <td>{{ restaurant.address }}</td>
    <td>{{ restaurant.description }}</td>
    <td>
      <!-- Action buttons -->
      <button (click)="getRestaurantDetails(restaurant.restaurant_uuid)">View</button>
      <button (click)="updateRestaurant(restaurant.restaurant_uuid, restaurant)">Update</button>
      <button (click)="deleteRestaurant(restaurant.restaurant_uuid)">Delete</button>
    </td>
  </tr>
  </tbody>
</table>
</section>

<p>Manage Users</p>
<section>
  <form #userForm="ngForm" (ngSubmit)="createUser(userForm)">
    <input
      type="text"
      name="email"
      ngModel
      placeholder="Email"
      required
      #email="ngModel"
    />
    <div *ngIf="email.invalid && email.touched">Email is required</div>

    <input
      type="text"
      name="username"
      ngModel
      placeholder="Username"
      required
      #username="ngModel"
    />
    <div *ngIf="username.invalid && username.touched">Username is required</div>

    <input
      type="password"
      name="password"
      ngModel
      placeholder="Password"
      required
      minlength="6"
      #password="ngModel"
    />
    <div *ngIf="password.invalid && password.touched">
      Password is required and must be at least 6 characters
    </div>

    <button type="submit" [disabled]="userForm.invalid">Create User</button>
  </form>

</section>

<section>
  <table border="1" class="table table-striped">
    <thead>
    <tr>
      <th>Id</th>
      <th>Username</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.user_uuid }}</td>
      <td>{{ user.username }}</td>
      <td>{{ user.email }}</td>
      <td>
        <button (click)="viewUserDetails(user.user_uuid)">View Details</button>
        <button (click)="updateUser(user.user_uuid, user)">Update</button>
        <button (click)="deleteUser(user.user_uuid)">Delete</button>
      </td>
    </tr>
    </tbody>
  </table>
</section>

Additional Tasks:

• Implement CRUD functionality for:

  1. Menu

  2. Menu-Category

  3. Restaurant-Category

Apply the CRUD API (CREATE READ UPDATE DELETE)

Step 4: Change the Design

• You can keep the existing table design, or:

  • Add new styles using CSS Grid or Flexbox.

  • Enhance the layout and design for better user experience.

Step 5: Push your code