angular 5 get value of input on child component

Question

Hello it's my first project with angular 5

I'm working on form to create issues with multi Prosecutors under it so I made the general info on CreateIssueComponent and Prosecutors(it should be array of inputs) data on ProsecutorsComponent

First: I want to get value of inputs of ProsecutorsComponent when submit the form on CreateIssueComponent? Second: I wonder about best why to make Prosecutors as array of input, and the return like

Prosecutors[1][name]

Prosecutors[1][email]

Prosecutors[2][name]

Prosecutors[2][email]

The ProsecutorsComponent (child)

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-prosecutors',
  templateUrl: './prosecutors.component.html',
  styleUrls: ['./prosecutors.component.css']
})
export class ProsecutorsComponent implements OnInit {

  @Input() index : number;

  constructor() { }

  ngOnInit() {
  }
}

the CreateIssueComponent (parent)

  import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Response } from '@angular/http';

@Component({
  selector: 'app-create-issue',
  templateUrl: './create-issue.component.html',
  styleUrls: ['./create-issue.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CreateIssueComponent implements OnInit {
  @ViewChild('f') issueInsert: NgForm;

  prosecutorsNoArray : number[] = [1];
  prosecutorsNoBinding : number = 1;

  constructor() {
  }

  ngOnInit() {
  }

  insertIssue(){
    console.log(this.issueInsert.value);
  }

  onchangeProsecutorsNo(){
    this.prosecutorsNoArray = Array(this.prosecutorsNoBinding).fill(1);
  }
}

the create-issue.component.html (parent)

<form (ngSubmit)="insertIssue()" #f="ngForm">
    <div>
        <div>
            issue Name
            <input class="form-control m-input" type="number" name="Name" ngModel  #Name="ngModel" required>
        </div>
    <div>
        Prosecutors No
        <input class="form-control m-input" type="number" [(ngModel)]="prosecutorsNoBinding" (change)="onchangeProsecutorsNo()" name="prosecutorsNo" ngModel  #prosecutorsNo="ngModel" required>
    </div>
    <h3 class="parties">Prosecutors</h3>
    <app-prosecutors *ngFor="let prosecutor of prosecutorsNoArray; let i = index" [index]="i"></app-prosecutors>
</form>

the prosecutors.component.html (child)

    <div>
        Prosecutors name
        <input class="form-control m-input" type="text" name="name_{{ index }}" ngModel #name="ngModel" required>
    </div>

i tried to remove any useless code to make it clear as much as i can

Regards

Answer 1

For your first question you can use EventEmitter follow the example:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'user-profile',
  template: '<div>Hi, my name is {{user.name}}</div>'
})
export class UserProfile {
  @Output() userUpdated = new EventEmitter();

  constructor() { // this can be any method that you want
    // Update user
    // ...
    this.userUpdated.emit(this.user);
  }
}

Now when we used this component in its parent component, we can bind the event that user-profile emits

template:
`...
<user-profile (userUpdated)="handleUserUpdated($event)"></user-profile>
...`

export class SettingsPage {
  constructor(){}

  handleUserUpdated(user) {
    // here *user* is equal to emitted value in *UserProfile*
  }
}

And for you second question you can do this:

prosecutor: {
    name: string,
    email: string
};
prosecutors = [];

_method() {
    this.prosecutor.name = 'test';
    this.prosecutor.email = 'test@test.com';
    this.prosecutors.push(this.prosecutor);
    ...
}

I hope it helps you comment if there was any problem