title: Angular 9 - Datorama Akita display value from store
body: <p>I am currently trying to set up a simple form in Angular 8 using Akita.
  Before going further I'll have to tell you that I am not a developer and I am quite new to the Angular world... Not even mentioning the state management concepts. Please keep that in mind when reading my code :)</p>
  
  <p>Here is a quick description of what I am trying to achieve. A user enters the first characters of a registration number in an input. Below, in an autocomplete, are suggested the registration numbers known in the database. When the user selects one of these values, a service is triggered with the corresponding ID and gets the data for the selected vehicle (an aircraft in this case). And the returned data is displayed below the select box.</p>
  
  <p>So far so good... My autocomplete box works well and the store is filled (apparently) as expected. I see the correct data in the store using Redux devtools. </p>
  
  <p><a href="https://i.stack.imgur.com/tTOE9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTOE9.png" alt="enter image description here"></a></p>
  
  <p>My problem comes when I try to display the data... I am able to see the whole object in the store on my page with something like <code>{{ store_aircraft$ | json }}</code> which gives me something like:</p>
  
  <pre><code>    {
    "_isScalar": false,
    "source": {
      "_isScalar": false,
      "source": {
        "_isScalar": false,
        "source": {
          "_isScalar": false,
          "source": {
            "_isScalar": false,
            "observers": [],
            "closed": false,
            "isStopped": false,
            "hasError": false,
            "thrownError": null,
            "_value": {
              "entities": {},
              "ids": [],
              "loading": true,
              "error": null,
              "aircraft_id": 18737,
              "manufacturer_id": 1,
              "manufacturer_name": "Cessna Aircraft",
              "model_id": 60,
              "model_name": "172",
              "model_variant": "N",
              "model_subname": "Skyhawk",
              "model_designator": "C172",
              "serial_number": "17270821",
              "registration": "C-GVNH",
              "year_manufacture": 1978,
              "mtom_kg": 1043,
              "seats": null,
              "address_hex": "c07d76",
              "registration_status": "Registered"
            }
          }
        },
        "operator": {}
      },
      "operator": {}
    },
    "operator": {}
  }
  </code></pre>
  
  <p>I just would like to know how to simply access the data in the store and to display it. Let's say for example the "manufacturer_name".</p>
  
  <p>Here is my aircraft.store.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { EntityStore, StoreConfig } from '@datorama/akita';
  import { AircraftModel, AircraftState } from './aircraft.model';
  
  export function createInitialState(): AircraftState {
    return {
      aircraft_id: null,
      manufacturer_id: null,
      manufacturer_name: null,
      model_id: null,
      model_name: null,
      model_variant: null,
      model_subname: null,
      model_designator: null,
      serial_number: null,
      registration: null,
      year_manufacture: null,
      mtom_kg: null,
      seats: null,
      address_hex: null,
      registration_status: null
    };
  }
  
  export function createAircraft(aircraft: AircraftState) {
    return { ...aircraft };
  }
  
  @Injectable({ providedIn: 'root' })
  @StoreConfig({ name: 'aircraft', idKey: 'aircraft_id' })
  export class AircraftStore extends EntityStore&lt;AircraftState, AircraftModel&gt; {
    constructor() {
      super(createInitialState());
    }
  
    set(data) {
      //console.log('set function triggered');
      const aircraft = createAircraft(data.body[0]);
      this.update(aircraft);
    }
  }
  </code></pre>
  
  <p>Here is the aircraft.service.ts:</p>
  
  <pre><code>import { HttpClient, HttpResponse } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { ID } from '@datorama/akita';
  import { Configuration } from '../../_constants/app.constants';
  import { AircraftDataService } from './aircraft-data.service';
  import { AircraftState } from './aircraft.model';
  import { AircraftStore } from './aircraft.store';
  
  @Injectable({ providedIn: 'root' })
  export class AircraftService {
    entities: AircraftState;
    private actionUrl: string;
  
    constructor(
      private aircraftStore: AircraftStore,
      private http: HttpClient,
      private configuration: Configuration,
      private aircrafDataService: AircraftDataService
    ) {
      this.actionUrl = configuration.apiUrl;
    }
  
    get(aircraftId: ID) {
      return this.aircrafDataService
        .getAircraft(aircraftId)
        .subscribe((response: HttpResponse&lt;any&gt;) =&gt; this.aircraftStore.set(response));
    }
  
  }
  </code></pre>
  
  <p>Here is the aircraft.query.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { QueryEntity } from '@datorama/akita';
  import { AircraftModel, AircraftState } from './aircraft.model';
  import { AircraftStore } from './aircraft.store';
  
  @Injectable({ providedIn: 'root' })
  export class AircraftQuery extends QueryEntity&lt;AircraftState, AircraftModel&gt; {
      constructor(protected store: AircraftStore) {
      super(store);
    }
  }
  </code></pre>
  
  <p>So my question is: <strong>How to display any value from the store?</strong></p>
  
  <p>Thanks a million in advance for your help.</p>