Activity 33: Angular Recipe Grid

Jerome BerisoJerome Beriso
3 min read

This documentation outlines the structure and functionality of the Recipe Application, a simple application that manages recipe data. The application is built using TypeScript and Angular, and consists of the following components:

1. recipe.service.ts:

  • Purpose: The recipe.service.ts file houses the service responsible for managing recipe data. It provides methods for creating, reading, updating, and deleting (CRUD) recipes.

  • Key Methods:

    • getRecipes(): Retrieves all recipes from the data source.

    • getRecipe(id: number): Retrieves a specific recipe by its ID.

    • addRecipe(recipe: Recipe): Adds a new recipe to the data source.

    • updateRecipe(recipe: Recipe): Updates an existing recipe in the data source.

    • deleteRecipe(id: number): Deletes a recipe from the data source.

  • Example Usage:


import { Injectable } from '@angular/core';
import { Recipe } from '../models/library.mode';

@Injectable({
  providedIn: 'root',
})
export class RecipeService {
  private recipeList: Recipe[] = [
    {
      name: 'Adobo',
      price: '250',
      star: '★★★☆☆',
      image:'data:image/jpeg;base64,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',

    },
    {
      name: 'Sinigang',
      price: '300',
      star: '★★★★☆',
      image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTImaYPY_rHxSgGg1ogioWhOaNxeEp4TTNiIw&s',
    },
    {
      name: 'Tinola',
      price: '150',
      star: '★☆☆☆☆',
      image:
        'https://panlasangpinoy.com/wp-content/uploads/2014/12/Tinola.jpg',
    },
    {
      name: 'Kare-kare',
      price: '250',
      star: '★★☆☆☆',
      image:'https://www.unileverfoodsolutions.com.ph/dam/global-ufs/mcos/SEA/calcmenu/recipes/PH-recipes/red-meats-&-red-meat-dishes/kare-kare/kare-kare-main.jpg',

    },
    {
      name: 'Letchon Kawali',
      price: '100',
      star: '★★★☆☆',
      image: 'https://www.sentro1771.com/ews/wp-content/uploads/2023/06/Lechon-Kawali_V2-scaled.jpg',
    },


  ];

  getRecipe() {
    return this.recipeList;
  }
}

2. recipe.model.ts:

  • Purpose: The recipe.model.ts file defines the Recipe interface, which represents the structure of a recipe object. It defines the properties that each recipe object should have.

  • Interface Definition:


export interface Recipe {
  name: string;
  price: string;
  image: string;
  star: string
}

3. recipe.component.ts:

  • Purpose: The recipe.component.ts file contains the logic for the Recipe component, which displays and interacts with recipe data. It handles user interactions, data binding, and communication with the recipe.service.ts.

  • Key Methods:

    • ngOnInit(): Initializes the component, typically fetching initial recipe data from the service.

    • addRecipe(): Handles the addition of a new recipe.

    • updateRecipe(recipe: Recipe): Handles the updating of an existing recipe.

    • deleteRecipe(id: number): Handles the deletion of a recipe.

  • Example Usage:


import { Component } from '@angular/core';
import {Recipe} from '../../models/library.mode';
import { RecipeService } from '../../services/library.service';
import { OnInit } from '@angular/core';


@Component({
  selector: 'app-recipe',
  standalone: true,
  imports: [],
  templateUrl: './recipe.component.html',
  styleUrl: './recipe.component.css'
})
export class RecipeComponent {
  recipeList:  Recipe[] = [];

  constructor(private libraryService: RecipeService) {}

  ngOnInit(): void {
    this.recipeList = this.libraryService.getRecipe();
  }
}

4. recipe.component.html:

  • Purpose: The recipe.component.html file defines the template for the Recipe component. It uses Angular's template syntax to display recipe data and provide user interaction elements.

  • Template Structure:


<h1>Activity 33: Angular Recipe Grid</h1>
<main class="roboto-regular">
  @for(book of recipeList; track $index){
    <div class="book-card">
      <div class="book-card__image__container">
        <img class="book-card__image" [src]="book.image" />
      </div>
      <div class="book-card__details">
        <p class="book-card__details__information roboto-bold">
          Title: <span class="roboto-regular">{{ book.name }}</span>
        </p>

        <p class="book-card__details__information roboto-bold">
          Price: <span class="roboto-regular">{{ book.price }}</span>
        </p>
        <p class="book-card__details__information roboto-bold">
          Star: <span class="roboto-regular">{{ book.star }}</span>
        </p>
        <div class="button-container">
          <button class="button-borrow roboto-medium"> Show Ingredient</button>
        </div>

      </div>
    </div>
  }
</main>

  • Key Elements:

    • *ngFor: Iterates over the recipes array to display each recipe.

    • {{ recipe.name }}: Data binding to display the recipe name.

    • (click)="deleteRecipe(recipe.id)": Event binding to trigger the deleteRecipe() method when the delete button is clicked.

Overall Application Flow:

  1. The recipe.component.ts initializes and fetches recipe data from the recipe.service.ts.

  2. The recipe.component.html displays the recipe data using Angular's template syntax.

  3. User interactions, such as adding, updating, or deleting recipes, are handled by the recipe.component.ts.

  4. The recipe.component.ts communicates with the recipe.service.ts to perform CRUD operations on recipe data.

This documentation provides a basic overview of the Recipe Application. For a more detailed understanding, please refer to the source code files.

GITHUB LINK:https://github.com/jerome09232/acitivity33
FIREBASE LINK:https://acitivity33.web.app/

0
Subscribe to my newsletter

Read articles from Jerome Beriso directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Angular

Written by

Jerome Beriso
Jerome Beriso