want to extract recipe list from recipe detail. But still have no idea about link formControl between 2 component

client/src/app/core/models/recipe.model.ts

@@ -95,18 +95,18 @@ export interface ToppingList {
 }
 
 export interface MatRecipe {
-  MixOrder: string;
-  FeedParameter: string;
-  FeedPattern: string;
+  MixOrder: number;
+  FeedParameter: number;
+  FeedPattern: number;
   isUse: boolean;
   materialPathId: number;
-  powderGram: string;
-  powderTime: string;
-  stirTime: string;
-  syrupGram: string;
-  syrupTime: string;
-  waterCold: string;
-  waterYield: string;
+  powderGram: number;
+  powderTime: number;
+  stirTime: number;
+  syrupGram: number;
+  syrupTime: number;
+  waterCold: number;
+  waterYield: number;
 }
 
 export interface ToppingSet {

client/src/app/core/services/recipe.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable, tap } from 'rxjs';
 import { Recipe, Recipe01 } from '../models/recipe.model';
 import { environment } from 'src/environments/environment';
+import { RecipeMetaData } from 'src/app/shared/types/recipe';
 
 interface RecipeParams {
   version: string;
@@ -62,25 +63,11 @@ export class RecipeService {
 
   getRecipesById(id: string): Observable<{
     recipe: Recipe01;
-    recipeMetaData: {
-      productCode: string;
-      name: string;
-      otherName: string;
-      description: string;
-      otherDescription: string;
-      picture: string;
-    };
+    recipeMetaData: RecipeMetaData;
   }> {
     return this._httpClient.get<{
       recipe: Recipe01;
-      recipeMetaData: {
-        productCode: string;
-        name: string;
-        otherName: string;
-        description: string;
-        otherDescription: string;
-        picture: string;
-      };
+      recipeMetaData: RecipeMetaData;
     }>(environment.api + '/recipes/' + id, {
       withCredentials: true,
       responseType: 'json',