Helper at the time of demo

userProfile.html

<ng-template #form>
  <form novalidate>
    <label>
      First Name
      <input name="firstName" />
      <!-- <span>This field is required</span> -->
    </label>
    <label>
      Last Name
      <input name="lastName" />
      <!-- <span>This field is required</span> -->
    </label>
    <label>
      Age
      <input name="age" />
      <!-- <span>This field is required</span> -->
    </label>
    <label>
      Hobbies
      <input [(ngModel)]="newHobby" [ngModelOptions]="{standalone: true}" placeholder="Add new hobby ..." /> 
      <button type="button" (click)="addHobby()">+</button>
      <hr />
      <ul *ngFor="let hobby of userForm.controls.hobbies.value">
        <li>{{hobby}}</li>
      </ul>
    </label>
  </form>
</ng-template>
<ng-template #info>
  <div>First Name: {{user.firstName}}</div>
  <div>Last Name: {{user.lastName}}</div>
  <div>Age: {{user.age}}</div>
  <div>
    Hobbies:
    <ul *ngFor="let hobby of user.hobbies">
      <li>{{hobby}}</li>
    </ul> 
  </div>
</ng-template>