title: How to store data from service to a class/interface in angular2?
body: <p>im currently developing a web application and im very new with angular2. I have problem in one of my components. This component act as a form where user can update its data. </p>
  
  <p>I want to access a specific data in my json. The current code i used is to store the data in an object of a class however, i think i have implemented it wrong so it does not reached its desired function. Below is my UserDetailsComponent</p>
  
  <p><strong>UserDetailsComponents.ts</strong></p>
  
  <pre><code>import { Component, OnInit, OnDestroy, ViewChild  } from '@angular/core';
  import { Router, ActivatedRoute, Params } from '@angular/router';
  import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';
  
  import { ApiService } from '../../assets/services/api.service';
  
  import { UserDetails } from '../../assets/classes/user-details';
  
  @Component({
    selector: 'app-user-details',
    templateUrl: './user-details.component.html',
    styleUrls: ['./user-details.component.scss']
  })
  export class UserDetailsComponent implements OnInit, OnDestroy {
  
      id: any;
      data: UserDetails;
  
      private sub: any;
  
      constructor(
        private route: ActivatedRoute,
        private apiService: ApiService,
        private fb: FormBuilder) {}
  
      ngOnInit() {
        this.createForm();
        this.sub = this.route.params.subscribe(params =&gt;{
          this.id = params['id']; //console.log(this.id);
          this.apiService.getUserById(this.id).subscribe(values =&gt; 
            this.data = values[0];
           ) 
        })
      }
  }
  </code></pre>
  
  <p>And below is my userDetails class</p>
  
  <p><strong>UserDetails.ts</strong></p>
  
  <pre><code>export class UserDetails {
      id: string;
      first_name: string;
      last_name: string;
      status: boolean;
  }
  </code></pre>
  
  <p>What i want to do is simply by using <code>this.data</code> to access the <code>id</code>, <code>first_name</code>, <code>last_name</code>, <code>status</code> within the component.</p>
  
  <p><strong>Example</strong></p>
  
  <pre><code>createForm(data){
        this.userDetailForm = this.fb.group({
          id: [this.data.id],
          first_name: [this.data.first_name, Validators.required],
          last_name: [this.data.last_name, Validators.required],
          status: [this.data.status, Validators.required]
        });
  }
  </code></pre>
  
  <p>Any kind of help is appreciated, thanks.</p>