Inputting multiple strings into a string array Angular2

Question

I'm new to Angular, and I am creating a recipe page. I have my API portion all set up, and now need to input my data into the API using angular.

I have a recipe interface that looks like this:

export interface Recipe {
    directions: string[];
    reviews: {
        _id: string,
        description: string,
        rating: string,
        date: string,
        user: string,
        __v: number,
        createDate: string
    }[];
    _id: string;
    name: string;
    description: string;
    image: string;
    prepTime: number;
    cookTime: number;
    ingredients: {
        _id: string,
        name: string,
        amount: string
    }[];
    __v: number;
}

And I am confused on how I can input multiple strings into the description array (and similarly how to input multiple ingredients into its corresponding array).

This is what I have so far in my html. I'm thinking I need to do something like an ngFor or ngIf, but I'm lost on how to do this:

<div class="modal-header">
    <h4 class="modal-title pull-left">Create a New Recipe</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div>
        Id: {{recipe._id}} <br>
        Name: <input [(ngModel)]="recipe.name"><br>
        Description: <input [(ngModel)]="recipe.description"><br>
        Image URL: <input [(ngModel)]="recipe.image"><br>
        Prep Time: <input [(ngModel)]="recipe.prepTime"><br>
        Cook Time: <input [(ngModel)]="recipe.cookTime"><br><br>
<!--        ngFor here? or ngIf? -->
        Ingredients: <br>
        Id: {{recipe.ingredients._id}} <br>
        Name: <input [(ngModel)]="recipe.ingredients.name"><br>
        Amount: <input [(ngModel)]="recipe.ingredients.amount"><br><br>
        <!--        ngFor here? How do I access the Ingredient to add?-->
        Directions:<input [(ngModel)]="recipe.directions">
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="createRecipe()">Submit</button>
    <!--    <button [routerLink]="['/home']">Cancel</button>-->
    <button type="button" class="btn btn-danger" id="closeModal" (click)="onCloseModal()">Cancel</button>
</div>

How do I do this? TIA!

Answer 1

There you go. I've also added add and remove features.

<div class="modal-body">
  <div>
    Id: {{recipe._id}} <br>
    Name: <input [(ngModel)]="recipe.name"><br>
    Description: <input [(ngModel)]="recipe.description"><br>
    Image URL: <input [(ngModel)]="recipe.image"><br>
    Prep Time: <input type="number" [(ngModel)]="recipe.prepTime"><br>
    Cook Time: <input type="number" [(ngModel)]="recipe.cookTime"><br><br>
    Ingredients: <button type="button" class="btn btn-primary" (click)="addIngredient()">Add</button>
    <br><br>
    <ng-container *ngFor="let ingredient of recipe.ingredients; let i = index;">
      Id: {{recipe.ingredients[i]._id}}
      <button type="button" class="btn btn-primary" (click)="removeIngredient(i)">Remove</button>
      <br>
      Name: <input [(ngModel)]="recipe.ingredients[i].name"><br>
      Amount: <input [(ngModel)]="recipe.ingredients[i].amount"><br><br>
    </ng-container>
    <br>
    Directions: <button type="button" class="btn btn-primary" (click)="addDirection()">Add</button>
    <br><br>
    <ng-container *ngFor="let direction of recipe.directions; let i = index;">
      <input [(ngModel)]="direction" (change)="recipe.directions[i] = direction">
      &nbsp;<button type="button" class="btn btn-primary" (click)="removeDirection(i)">Remove</button>
      <br><br>
    </ng-container>
    <br><br>
  </div>
</div>

View working demo at Stackblitz.