How to hide/show in angular 2

Question

I have used [hidden] as below where "secondTab" value is true.

<form #siteForm="ngForm" novalidate (ngSubmit)="saveSite(siteForm.value,siteForm.valid)" class="admin-modal">

  <div class="txt-danger">{{errorMessage}}</div><br/>
  <ul role="tablist" class="nav nav-tabs">
    <li [ngClass]="{active:firstTab}"><a (click)="siteDetail()">Site Details</a></li>
    <li [ngClass]="{active:secondTab}"><a (click)="siteLocation()">Site Location</a></li>
  </ul>
  <div [hidden]="secondTab">
    <input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location>
    <input type="hidden" class="form-control" value="{{site.id}}" name="id" [(ngModel)]="site.id" #id>
    <div class="form-group mb-20" [ngClass]="{'has-error':name.errors && (name.dirty || name.touched || siteForm.submitted)}">
      <label class="control-label mb-10">Site Name</label>
      <input type="text" class="form-control default-rounded" name="name" required [(ngModel)]="site.name" #name>
      <small [hidden]="name.valid || (name.pristine && !siteForm.submitted)" class="text-danger">
        Name is require.
      </small>
    </div>  
    <div class="form-group mb-20" [ngClass]="{'has-error':maximumCapacity.errors && (maximumCapacity.dirty || maximumCapacity.touched || siteForm.submitted)}">
      <label class="control-label mb-10">Maximum Capacity</label>
      <input type="text" class="form-control default-rounded" name="maximumCapacity" required [(ngModel)]="site.maximumCapacity" #maximumCapacity pattern="[0-9]+">
      <small [hidden]="maximumCapacity.valid || (maximumCapacity.pristine && !siteForm.submitted)" class="text-danger">
        Maximum capacity is require (enter only digits)
      </small>
    </div>     
    <div class="form-group mb-20">
      <label class="control-label mb-10">Site Type</label>
      <select class="form-control" name="type" [(ngModel)]="site.type" #type>
        <option>Comercial</option>
        <option>Residential</option>
        <option>Industrial</option>
        <option>Etc</option>
      </select>
    </div>
    <div class="form-group mb-20" [ngClass]="{'has-error':contactNumber.errors && (contactNumber.dirty || contactNumber.touched || siteForm.submitted)}">
      <label class="control-label mb-10">Site Contact Number</label>
      <input type="text" class="form-control default-rounded" name="contactNumber" required [(ngModel)]="site.contactNumber" #contactNumber>
      <small [hidden]="contactNumber.valid || (contactNumber.pristine && !siteForm.submitted)" class="text-danger">
        Site contact number is require
      </small>
    </div> 
  </div>
  <div [hidden]="firstTab">
    <div class="form-group mb-20">
      <label class="control-label">Address</label>
      <div class="flex">
        <div class="w-79 mr-10 mt-5">
          <input type="text" class="form-control default-rounded" name="location" required  places-auto-complete (place_changed)="placeChanged($event)" [types]="['geocode']">
        </div>
        <div class="mt-5">
          <button type="button" class="btn btn-primary black-background white-text pull-right" (click)="chnageMap()">Lookup</button>
        </div>
      </div>
    </div>
    <div class="form-group mb-20">
      <ng2-map zoom="{{zoom}}" center="{{site.latitude}}, {{site.longitude}}">
        <marker *ngFor="let pos of positions" [position]="pos" [icon]="markerImage"></marker>
        <drawing-manager [drawingMode]="'marker'" [drawingControl]="true" [drawingControlOptions]="{ position: 2, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }" [circleOptions]="{ fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, editable: true, zIndex: 1 }"></drawing-manager>
      </ng2-map>
    </div>
  </div>

  <button type="submit" class="btn btn-primary black-background white-text pull-right">Save</button>

If I set value false of "secondTab" then I got below error

ORIGINAL EXCEPTION: self._NgModel_202_5.context is not a function

If I use ngFor instead of [hidden] then it works fine but I didn't get value on form submit if I am on second tab.

If I used formBuilder then for form then also it will works fine. So I may be issue with ngModel

Answer 1

What is the point of using here?

#location="ngModel"

you normally use #variable to have a reference on the html element in this case.

Try changing the code to this:

<div [hidden]="secondTab">
  <input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location>
</div>

As a recommendation I wouldn´t use the hidden property but *ngIf="secondTab"