<div class="CreateSettleParticipantBlock">
          <h1>Participants</h1>

          <!!=*=.=>
            <label for="name">Person {{ i + 1 }}</label>
            <input type="text" class="form-control" id="participant{{i}}" name="participant{{i}}" ([ngModel])="participant.name">
          </div>

          <button type="button" class="btn btn-info" (click)="addNewParticipant()">Add new person</button>
        </div>

import {Component, OnInit} from '@angular/core';
import {Settle} from "../settle";
import {Participant} from "../participant";
import {SettleService} from "../settle.service";
import {Currency} from "../currency";
import {Router} from "@angular/router";
import {UUID} from 'angular2-uuid';
import {AppConfig} from "../config/app.config";

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})

export class CreateComponent implements OnInit {
  submitted = false;
  currencies = new Array<Currency>();
  settles = new Array<Settle>();

  private frontEndpoint = AppConfig.endpoints.front;

  public model: Settle;

  constructor(private settleService: SettleService, private router: Router) {
  }

  ngOnInit() {
    this.getCurrencies();
    this.getSettles();

    this.model = new Settle();
    this.model.participants = [{ name: ''}];
  }

  onSubmit() {
    this.model.token = UUID.UUID();

    this.settleService
      .addSettle(this.model)
      .subscribe(settle => this.settles.push(settle));

    this.router.navigate([`${this.frontEndpoint}/settle/${this.model.token}`]);

    this.submitted = true;
  }

  addNewParticipant(): void {
    this.model.participants.push(new Participant(''));
  }

  getCurrencies(): void {
    this.settleService
      .getCurrencies()
      .subscribe(currencies => this.currencies = currencies);
  }

  getSettles(): void {
    this.settleService
      .getSettles(1)
      .subscribe(settles => this.settles = settles);
  }
}