The textbox is not visible until I show the data in Angular4

Question

I am working on angular4 web API in Visual Studio 2015. Here I have some text boxes in the page, and on clicking a button I am selecting data from database and showing it in the textbox.

I want to show empty boxes when page loading but here The textbox is not visible until I show the data (which means is, unless I gets data from server "item details" will be empty and thus in DOM textbox is not rendered, and it appears only when I gets the data) I am new in angular please help

Here is my HTML Code

 <form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
     <div class="row ">
                    <div class="col-md-12 col-sm-6 col-xs-12">

                    <div class="form-group">
                        <label>Item Code</label>
                        <ng-container *ngFor="let item of itemdetails;">
                            <input type="text" class="form-control" id="itemcode" name="itemcode" [value]="item.ItemCode" required />
                        </ng-container>
                    </div>




       .........etc rows...........



   <input type="button" value="Add Item" class="btn btn-success" 
  (click)="addItems(newForm.value);newForm.reset()" /> </div>

This is my TS code

    addItems(value: any) {
this.items = new IComboDetails(value.ItemID, value.ItemCode, value.ItemDescription, value.PackingtypeID, value.PackingtypeName, value.quantity);
this.stockitems.push(this.items);   
}

Answer 1

I think its because you are displaying input field inside *ngFor. Unless you get details from server the itemdetails array remains empty and the input field is not rendered.

You can declare a boolean flag to check if you got data from server OR use itemdetails.length

 <div class="form-group">


      <!--Until server returns its data show empty text field may you can keep it disabled -->
      <ng-container *ngIf="!itemdetails || itemdetails.length == 0">
          <label>Item Code</label> 
          <input type="text" class="form-control" name="temporaryField"  /> 
      </ng-container>

      <!--If server returns data display data in text field -->
      <ng-container *ngFor="let item of itemdetails;" >
            <label>Item Code</label>
            <input type="text" class="form-control" id="itemcode" 
            name="itemcode" [value]="item.ItemCode" required />
      </ng-container>
</div>

Another way :

 <div class="form-group">

      <!--Until server returns its data show empty text field may you can keep it disabled -->
      <ng-container *ngIf="!itemdetails || itemdetails.length == 0">
          <label>Item Code</label> 
          <input type="text" class="form-control" name="temporaryField"  /> 
      </ng-container>

      <!--If server returns data display data in text field -->
      <div  *ngIf="itemdetails && itemdetails.length > 0">
          <ng-container *ngFor="let item of itemdetails;" >
              <label>Item Code</label>
              <input type="text" class="form-control" id="itemcode" 
               name="itemcode" [value]="item.ItemCode" required />
          </ng-container>
      </div>

</div>