# Activity 33: Angular Recipe Grid

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732597125738/34b56c8a-2a40-467c-9036-467c91c80ee6.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732597141356/40f5dbf8-e00e-4377-8d20-2375248ef705.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732597152752/85b752a4-653a-411b-b95f-e5b0e1ad7657.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732597166506/00187ce6-afd8-403c-9208-c8d988c703bd.png align="center")

With this project I use this interface or model, this is based on the provided figma design. `name` for the menu name and the `img` is for the food image. then ID is their unique identifier.

```typescript
// recipe.model.ts
export interface Recipe { 
  id: number;
  name: string;
  img: string;
}
```

I created a list of object on my recipe.service.ts the purpose of this is to be able to use the list to other components. All I need to to is to inject the service to those components. but in this case its unnecessary. make sure that the `id name` and `img` is same with the one that you put in the model.

```typescript
//recipe.service.ts

import { Injectable } from '@angular/core';
import { Recipe } from './recipe.model';

@Injectable({
  providedIn: 'root',
})
export class RecipeService {
  recipeList: Recipe[] = [
    {
      id: 1,
      name: 'Choc-Crackle Peanut Butter Cups',
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3aE_ZjNTQgJeEiApzwgUzzvM5L_r8oXDTwA&s',
    },
    {
      id: 2,
      name: 'Pancakes1',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 3,
      name: 'Pancakes2',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 4,
      name: 'Lemon Eton Mess',
      img: 'https://img.taste.com.au/UOkNsfUb/w720-h480-cfill-q80/taste/2020/08/5-ingredient-lemon-eton-mess-164715-2.jpg',
    },
    {
      id: 5,
      name: 'Choc-Crackle Peanut Butter Cups',
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3aE_ZjNTQgJeEiApzwgUzzvM5L_r8oXDTwA&s',
    },
    {
      id: 6,
      name: 'Pancakes',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 7,
      name: 'Lemon Eton Mess',
      img: 'https://img.taste.com.au/UOkNsfUb/w720-h480-cfill-q80/taste/2020/08/5-ingredient-lemon-eton-mess-164715-2.jpg',
    },
    {
      id: 8,
      name: 'Pancakes',
      img: 'https://www.allrecipes.com/thmb/hB7uGW06pqyk6hApOfGxk5kG4SI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/21014-Good-old-Fashioned-Pancakes-mfs_001-1-8fc3e06998fe4fe8b5f2ad6ba7e8ad46.jpg',
    },
    {
      id: 9,
      name: 'Choc-Crackle Peanut Butter Cups',
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3aE_ZjNTQgJeEiApzwgUzzvM5L_r8oXDTwA&s',
    },
    {
      id: 10,
      name: 'Lemon Eton Mess',
      img: 'https://img.taste.com.au/UOkNsfUb/w720-h480-cfill-q80/taste/2020/08/5-ingredient-lemon-eton-mess-164715-2.jpg',
    },
  ];

  getRecipe() {
    return this.recipeList;
  }
}
```

in this component I just inject the service that I created so that I can have an access to my list of object from the services and called the `getRecipe` method that I created.

```typescript
// recipe.compoent.ts
import { Component } from '@angular/core';
import { Recipe } from './recipe.model';
import { RecipeService } from './recipe.service';
@Component({
  selector: 'app-recipe',
  templateUrl: './recipe.component.html',
  styleUrl: './recipe.component.css',
})
export class RecipeComponent {
  recipies: Recipe[] = [];

  constructor(private recipeService: RecipeService) {}

  ngOnInit(): void {
    this.recipies = this.recipeService.getRecipe();
  }
}
```

using `*ngFor` to loop the contents of my list of object and calling it to show the output on the webpage.

```html
<div class="wrapper">
  <div class="wrapper__content">
    <div *ngFor="let rec of recipies" class="wrapper__content-card">
      <img [src]="rec.img" class="card__image" />
      <div class="card__content">
        <h3 class="card__title">{{ rec.name }}</h3>
      </div>
      <div class="card__btn">
        <button class="btn btn-primary">Ingredients</button> 
        <button class="btn btn-secondary">Trending!</button>
      </div>
    </div>
  </div>
</div>
```

this is the css file for the `recipe.component.css`

```css
/* recipe.component.css  */

* { 
  font-family: "inter", Arial, Helvetica, sans-serif;
}
.wrapper { 
  min-height: 100vh;
  padding: 3rem;
}

.wrapper__content { 
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;  
  align-items: center;
  justify-content: center;
}

.wrapper__content-card { 
  width: 300px;
  height: 350px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;

  box-shadow: 2px 10px 24px -6px rgba(0,0,0,0.64);
  -webkit-box-shadow: 2px 10px 24px -6px rgba(0,0,0,0.64);
  -moz-box-shadow: 2px 10px 24px -6px rgba(0,0,0,0.64);}

.card__image { 
  height: 200px;
  width: 100%;
}

.card__content { 
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.card__btn { 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px;
}

.btn { 
  padding: 5px 20px;
  border-radius: 20px;
  border: none;
}

.btn-primary { 
  background-color: #1DA1F2;
  color: white;
}

.btn-secondary { 
  background-color: transparent;
  border: 2px solid #17BF63;
}
```

and this is the css file that I wrote in the `style.css` its optional, I just fix the formatting and imported the fonts. I wrote it here because this is where universal css designs or code should be added.

```css
/* style.css */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,
opsz,wght@0,14..32,100..900;1,14..32,100..900&family=PT+Sans+Caption:wght@400;700&family=Poppins:ital,
wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,
900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  margin: 0;
  padding: 0;
}
```

**github:** [https://github.com/thisisnotsnorlax/AngularRecipeGrid.git](https://github.com/thisisnotsnorlax/AngularRecipeGrid.git)

**firebase:** [https://angularrecipegrid-9322b.web.app/](https://angularrecipegrid-9322b.web.app/)