angular help

api.service.ts

import { Injectable } from '@angular/core';
import { recepieslist, type } from '../mockdata/recepies.mock';
import { Recipe } from '../models/recipe.interface';
import { ItemType } from '../models/item.interface';
import { Category, SubCategory } from '../models/categories.interface';
import { categories, subcategory } from '../mockdata/categories.mock';
import { Observable, of } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(
    
  ) { }

  getrecipe(id:number): Recipe {
    return recepieslist[recepieslist.findIndex(element => this.checker(element, id, "id"))]
  }

  getType(id: number): ItemType{
    return type[id]
  }

  private checker(element: any, checker: any, propertie: String): Boolean{
    let prop = propertie as keyof typeof element
    return element[prop] === checker
    
  }

  getCategory(name: string): Observable<Category>{
    return of(categories[categories.findIndex(element => this.checker(element, name, "name"))])
  }

  getSubCategory(name: String): SubCategory{
    return subcategory[subcategory.findIndex(element => this.checker(element, name, "name"))]
  }
}

recipe.interface.ts

import { FormArray, FormBuilder, FormControl, FormGroup } from "@angular/forms";
import { IngredientData } from "./ingredients.interface";
import { ItemType } from "./item.interface";
import { Propertie } from "./properties.interface";
import { Category, SubCategory } from "./categories.interface";
import { ApiService } from "../services/api.service";
import { OnInit } from "@angular/core";
import { Observable, tap } from "rxjs";



export class Recipe {
    
    private category_name: string = "Receitas"
    private formBuilder = new FormBuilder();
    private getcat: Observable<Category> | undefined;


    name: string;
    description: string;
    ingredients: Ingredient[];
    instructions: string;
    type: ItemType | undefined;
    properties: Propertie[];
    id: number | undefined;
    category_obj: Category = new Category({});
    subcategory: SubCategory | undefined;

    constructor(
        options: {
        id?: number;
        name?: string;
        description?: string;
        ingredients?: Ingredient[];
        instructions?: string;
        type?: ItemType;
        properties?: Propertie[];
        subcategory?: SubCategory;
        }={},
        private api?: ApiService,
    ){
        this.id = options.id;
        this.name = options.name || '';
        this.description = options.description || '';
        this.ingredients = options.ingredients || [];
        this.instructions = options.instructions || '';
        this.type = options.type || undefined;
        this.properties = options.properties || [];
        this.subcategory = options.subcategory || undefined;
        this.cat();
    }

    newFormGroup(): FormGroup {
        let form = new FormGroup({
            name: new FormControl(''),
            description: new FormControl(''),
            ingredients: new FormArray([]),
            instructions: new FormControl(''),
            type: new FormControl(''),
            color: new FormControl(''),
            id: new FormControl(null),
        })

        return form
    }
    cat(): void{
        this.getcat = this.api?.getCategory(this.category_name).pipe(tap(element => {
            console.log(element);
            this.category_obj = element
        }))
    }
    
}


export interface Ingredient {
    id: number;
    ingredient: IngredientData;
    quantity: number;
}

recipe.mock.ts

import { ItemType } from "../models/item.interface";
import { Ingredient, Recipe } from "../models/recipe.interface";
import { RecipeEditComponent } from "../recipe-edit/recipe-edit.component";
import { ingredients } from "./ingredient.mock";

export const type: Array<ItemType> = [
    {
        id:0,
        type:"esmalte"
    },
    {
        id:1,
        type:"argila"
    }
]

const recepiesingredients: Array<Array<Ingredient>> = [
    [
        {
            id: 0,
            ingredient: ingredients[0],
            quantity: 100
        },
        {
            id: 1,
            ingredient: ingredients[1],
            quantity: 100
        }, {
            id: 2,
            ingredient: ingredients[2],
            quantity: 100
        },
    ],
    [
        {
            id: 0,
            ingredient: ingredients[0],
            quantity: 50
        },
        {
            id: 1,
            ingredient: ingredients[1],
            quantity: 40
        }, {
            id: 2,
            ingredient: ingredients[2],
            quantity: 10
        },

    ]
]

export const recepieslist = new Array<Recipe>(
    new Recipe({
        name: "receita 1",
        description:"esmalte com cor próxima do ciano, com muito escorrimento, para queima em 1000ºC em um forno a gás",
        ingredients: recepiesingredients[0],
        type:type[0],
        instructions:"",
        id: 0
    }),
    new Recipe({
        name: "receita 2",
        description:"esmalte cerâmico com cor vermelha vibrante, para queima em 1000ºC em um forno a gás",
        ingredients: recepiesingredients[1],
        type:type[0],
        instructions:"",
        id: 0
    })
)