title: Angular2: How to put return service value into private variable object?
body: <p>I am creating an Accounting System UI and using angular2 as my framework.</p>
  
  <p>My app is working except for assigning the service value into private var. I created a service to make it more dynamic. </p>
  
  <p>So, here's my Service</p>
  
  <p>/* formdata.ts */</p>
  
  <pre><code>export class Formdata {
      viewBy: string;
      companyUnit: string;
      financialYear: string;
      clients: string;
  }
  </code></pre>
  
  <p>/* mocked-form */</p>
  
  <p>import { Formdata } from './formdata'</p>
  
  <pre><code>export const FORMDATA: Formdata[] = [
      {
          viewBy: 'Daniela Oraa',
          companyUnit: 'BIR - Legazpi',
          financialYear: '2016',
          clients: 'Dummy Text 1'
      }
  ];
  </code></pre>
  
  <p>/* form.service.ts */</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import { Formdata } from './formdata';
  import { FORMDATA } from './mocked-form';
  
  @Injectable()
  export class FormService {
    getData(): Promise&lt;Formdata[]&gt; {
      return Promise.resolve(FORMDATA);
    }
  }
  </code></pre>
  
  <p>Injecting Service into Component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { Formdata } from '../formdata';
  import { FormService } from '../form.service';
  
  @Component({
    templateUrl: 'app/html-templates/clientdata_balance.html',
    styleUrls: ['css/templates.css'],
    providers: [ FormService ]
  })
  
  export class BalanceComponent implements OnInit {
      formData: Formdata[];
  
      constructor(private formService: FormService){}
  
      getData(): void {
          this.formService.getData().then(formData =&gt; this.formData = formData);
      }
  
      ngOnInit(): void {
          this.getData();
      }
  
      private data = this.formService.getData().then(formData =&gt; this.formData = formData);
  
      search_data(data){
          console.log(data);
      }
  }
  </code></pre>
  
  <p>If you check the private data in component. I tried to get the data in the service. Unfortunately, no luck.</p>
  
  <p>Basically, it will be a value of inputs and selecboxes.</p>
  
  <p>So, here's my form</p>
  
  <pre><code>&lt;form&gt;
    &lt;label class="input-group"&gt;
      &lt;p&gt;View By&lt;/p&gt;
      &lt;select [(ngModel)]="data.viewBy" name="viewBy"&gt;
        &lt;option&gt;Daniela Oraa&lt;/option&gt;
        &lt;option&gt;Lovely Laparan&lt;/option&gt;
        &lt;option&gt;Justin Bibo&lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
    &lt;label class="input-group"&gt;
      &lt;p&gt;Company Unit&lt;/p&gt;
      &lt;select [(ngModel)]="data.companyUnit" name="companyUnit"&gt;
        &lt;option&gt;Nusa&lt;/option&gt;
        &lt;option&gt;Bumi&lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
    &lt;label class="input-group"&gt;
      &lt;p&gt;Financial Year&lt;/p&gt;
      &lt;select [(ngModel)]="data.financialYear" name="financialYear"&gt;
        &lt;option&gt;2016&lt;/option&gt;
        &lt;option&gt;2004&lt;/option&gt;
        &lt;option&gt;1945&lt;/option&gt;
        &lt;option&gt;1897&lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
    &lt;label class="input-group"&gt;
      &lt;p&gt;Clients&lt;/p&gt;
      &lt;select [(ngModel)]="data.clients" name="clients"&gt;
        &lt;option&gt;Dummy Text 1&lt;/option&gt;
        &lt;option&gt;Dummy Text 2&lt;/option&gt;
        &lt;option&gt;Dummy Text 3&lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
    &lt;label class="input-group"&gt;
      &lt;p&gt;Date From&lt;/p&gt;
      &lt;input type="date" [(ngModel)]="data.dateFrom" name="dateFrom"/&gt;
    &lt;/label&gt;
    &lt;label class="input-group"&gt;
      &lt;p&gt;Date To&lt;/p&gt;
      &lt;input type="date" [(ngModel)]="data.dateTo" name="dateTo"/&gt;
    &lt;/label&gt;
    &lt;button type="button" (click)="search_data(data)"&gt;Search&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The logic I can think to put a value in ngModel data object is:</p>
  
  <pre><code>private data = {
    viewBy: 'Daniela Oraa',
    ...
  }
  </code></pre>
  
  <p>I also tried this eventhough it I knew that it won't work.</p>
  
  <pre><code>private data = formData;
  </code></pre>
  
  <p>The second way is to inject value inside the element.</p>
  
  <pre><code>&lt;form *ngFor="let fdata of formData"&gt;
      &lt;select [(ngModel)]="data.viewBy" name="viewBy" [ngValue]="fdata.viewBy"&gt; 
      // this method fail but I can get fdata.viewBy value
  
      ...
  </code></pre>
  
  <p>I tried all that I can think of. And none of them work. So, I decided to ask it here in SO. </p>
  
  <p>Any help would mean so much to me. Thanks.</p>