How to get the value of dynamically created input in angular

Question

I have created an empty hash map of a 'question' object in angular according to the no. of questions given in the earlier page.Then i am rendering the 'question' objects in the hash map when the page initializes.I want to get the values of the inputs given for each question object when the user clicks 'add paper' button which calls the 'test()' function.What is the best way to do this?I was thinking of using viewChild to get the values,but it returns undefined.Thanks in advance.

Component File

import { Component, OnInit, ViewChild,ElementRef, ViewChildren } from '@angular/core';
import { SharedserviceService } from "../services/sharedservice.service";

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

  public paperID:any;
  public noOfQuestions : number ;
  public message : any;
  public i : number ;
  public questionSet = {};
  public question0 : any;

  @ViewChildren('testchild') testchild :ElementRef;
  constructor(private shared : SharedserviceService) { }

  ngOnInit() {
    this.shared.currentMessage.subscribe((message)=>{
      this.message = message;
    });
    this.paperID = this.message.paperID;
    this.noOfQuestions = this.message.noOfQuestions;

    for (this.i =0;this.i < this.noOfQuestions;this.i++){
      const question = {
        'paperID': this.paperID,
        'questionID': this.i,
        'question': '',
        'answers': [],
        'correctAnswer':''
      };
      this.questionSet[this.i] = question;
    }

    console.log(this.questionSet);
  }

  test(){

    //console.log(this.testchild.nativeElement.value);

    for (this.i =0;this.i < this.noOfQuestions;this.i++){

      const question = {
        'paperID': this.paperID,
        'questionID': this.i,
        'question': `question${this.i}');`,
        'answers': [`question${this.i}answer0`,`question${this.i}answer1`,`question${this.i}answer2`,`question${this.i}answer3`],
        'correctAnswer':'vghvhg'
      };
      console.log(question);
      this.questionSet[this.i] = question;
    }
    console.log("clicked");
    console.log(this.questionSet);
  }

}

HTML File

<ng-container *ngIf="questionSet" >
<div class="panel panel-widget border-right" *ngFor="let question of questionSet | keyvalue; let i= index;" style="text-align: left; background-color: white; padding: 10px; border-radius: 10px;border-style: solid; border-width: 3px; border-color: #1aa3ff;">
  <div class="container">
    <div class="row">
    <div class="form-group col-md-10">
      <label> Question  {{question.value.questionID+1}}</label>
      <input type="text" class="form-control" #question{{i}} aria-describedby="emailHelp" placeholder="Enter question Here">
    </div>
  </div>
    <div class= "row">
    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 1</label>
        <input type="email" class="form-control" id="question{{i}}answer0" aria-describedby="emailHelp" placeholder="Answer 1">
      </div>
    </div>

    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 2</label>
        <input type="email" class="form-control" id="question{{i}}answer1" aria-describedby="emailHelp" placeholder="Answer 2">
      </div>
    </div>

    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 3</label>
        <input type="email" class="form-control"  id="question{{i}}answer2" aria-describedby="emailHelp" placeholder="Answer 3">
      </div>
    </div>

    <div class="col-sm-2">
      <div class="form-group">
        <label>Answer 4</label>
        <input type="email" class="form-control"  id="question{{i}}answer3" aria-describedby="emailHelp" placeholder="Answer 4">
      </div>
    </div>
  </div>

    </div>

    <div class="row">
      <div class="col-sm-6">
          <div class="form-group">
            <label>Correct Answer</label>
            <input type="text" class="form-control"  aria-describedby="emailHelp" placeholder="Correct Answer">
          </div>
        </div>
      <div class="col-sm-6">
          <button type="submit" style="margin-top:6%"  (click)="addQuestion($event,question,'new')" class="btn btn-primary mb-2">Add Question</button>
      </div>
    </div>
    <br><br>


</div>
</ng-container>

<button type="button" class="btn btn-primary btn-lg btn-block" (click)="test()">Add Paper</button>

Answer 1

*ngIf="questionSet" always be true because an empty object is a truthy value in js. Convert your ngOnInit like this

  ngOnInit() {
    this.shared.currentMessage.subscribe((message)=>{
        this.message = message;
        this.paperID = this.message.paperID;
        this.noOfQuestions = this.message.noOfQuestions;

        for (let i =0; i < this.noOfQuestions; i++){
          const question = {
            'paperID': this.paperID,
            'questionID': this.i,
            'question': '',
            'answers': [],
            'correctAnswer':''
          };
          this.questionSet[this.i] = question;
        }

        console.log(this.questionSet);
    });
  }