title: Angular2 - Click to edit form fields
body: <p>I have a form which pulls data from a service and displays it as follows </p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
      selector: 'profile',
      template: `&lt;h1&gt;Profile Page&lt;/h1&gt;
      &lt;form [ngFormModel]="myForm" (ngSubmit)="onSubmit()" #f="ngForm"&gt;
      &lt;div *ngFor="#prof of profileObject"&gt;
          &lt;label from="name"&gt;Name&lt;/label&gt;
          &lt;input [ngFormControl]="myForm.controls['name'] "type="text" id="name" #name="ngForm" [(ngModel)]="prof.userFirstName"&gt;
      &lt;/div&gt;
      &lt;button name="submit" type="submit"&gt;submit&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;a [routerLink]="['../Dashboard']"&gt;Back to Dash&lt;/a&gt;
      `,
      directives: [ROUTER_DIRECTIVES]
  })
  
  export class ProfileComponent implements OnInit {
      myForm: ControlGroup;
      userEmail = JSON.parse(localStorage.getItem('profile'));
      public profileObject: Object[];
  
  
      constructor(private fb: FormBuilder, private apartmentService: ApartmentService) {
          this.apartmentService = apartmentService;
      }
  
  
      onSubmit(form) {
          console.log(this.myForm);
          //post to rest API
      };
  
      ngOnInit(): any {
          this.apartmentService.getProfile(this.userEmail.email).subscribe(res =&gt; this.profileObject = res);
          this.myForm = this.fb.group({
              'name': ['', Validators.required],
          });
      }
  }
  </code></pre>
  
  <p>When the component loads the template displays the data pre-populated in input text. </p>
  
  <p>How can I display data in labels, and change it to input text on user click? basically want to implement click to edit functionality in the form </p>